<!DOCTYPE html>
<html ng-app="demoapp">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../bower/angular/angular.min.js"></script>
    <script src="../bower/leaflet/dist/leaflet.js"></script>
    <script src="../dist/azavea-ng-leaflet.js"></script>
    <link rel="stylesheet" href="../bower/leaflet/dist/leaflet.css" />
    <script>
        var app = angular.module('demoapp', ['az.leaflet']);
        app.directive('appBaselayers', ['AZLeafletComponentFactory', function (AZLeafletComponentFactory) {
            return AZLeafletComponentFactory({
                onMapReady: function (map) {
                    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    }).addTo(map);
                }
            });
        }]);
        app.controller('AppController', [ 'AZLeafletData', function(LeafletData) {}]);
    </script>
  </head>

  <body ng-controller="AppController">
    <az-leaflet width="100%" height="480px">
        <app-baselayers></app-baselayers>
    </az-leaflet>
    <h1>Basic Example</h1>
    <p>Not very angular-like, to add basemaps, etc in a related controller. But, this provides an example of how to use <pre>LeafletData.getMap()</pre> to access the map object. See 002-basic-directive.html for a better example.</p>
  </body>
</html>

Add example 002 using directive to setup leaflet map
Add example 002 using directive to setup leaflet map
