Angular Leaflet Directive

AngularJS directive for the Leaflet Javascript Library. This software aims to easily embed maps managed by Leaflet on your project.

tombatossals — main upstream

 

realtymaps

 

Examples

Browse all the examples added by the community to learn about the directive and its possibilities.

Documentation

See https://tombatossals.github.com/angular-leaflet-directive

How to use it

Include angular-simple-logger before Angular-Leaflet js files. Logger gets installed as a requirement of Angular-Leaflet with bower install or npm install. Note if your using the browser to load it without CommonJS (browserify, webpack) please use angular-simple-logger.js (not index.js) .

Include the leaflet-directive dependency on your Angular module:

var app = angular.module('demoapp', ['nemLogging','leaflet-directive']);

After that, you can change the default values of the directive on your angular controller. For example, you can change the tiles source, the maxzoom on the Leaflet map or the polyline path properties.

angular.extend($scope, {
    defaults: {
        tileLayer: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
        maxZoom: 14,
        path: {
            weight: 10,
            color: '#800000',
            opacity: 1
        }
    }
});

If you want to set the start of the map to a precise position, you can define the "center" property of the scope (lat, lng, zoom). It will be updated interacting on the scope and on the leaflet map in two-way binding. Example:

angular.extend($scope, {
    center: {
        lat: 51.505,
        lng: -0.09,
        zoom: 8
    }
});

If you need to run any method on the map object, use leafletData as following (notice the map object is returned in a form of a promise):

angular.module('myModule').controller('MapController', ['$scope', 'leafletData',
    function($scope, leafletData) {
        leafletData.getMap().then(function(map) {
            L.GeoIP.centerMapOnPosition(map, 15);
        });
    }
]);

Finally, you must include the markup directive on your HTML page:

<leaflet defaults="defaults" lf-center="center" height="480px" width="640px"></leaflet>

If you want to have more than one map on the page and access their respective map objects, add an id attribute to your leaflet directive in HTML:

<leaflet id="mymap" defaults="defaults" lf-center="center" height="480px" width="640px"></leaflet>

And then you can use this id in getMap():

angular.module('myModule').controller('MapController', ['$scope', 'leafletData',
    function($scope, leafletData) {
        leafletData.getMap('mymap').then(function(map) {
            L.GeoIP.centerMapOnPosition(map, 15);
        });
    }
]);