angular-leaflet-directive

AngularJS directive to embed an interact with maps managed by Leaflet library

Homepage

Angular Core Dependency: 1.x

Module License: MIT

Added by: Sam Deering

GitHub

Repository

tombatossals/angular-leaflet-directive

Stats

Stars: 1272

Watchers: 1272

Forks: 610

Module Description

angular-leaflet-directive

tombatossals - main upstream

Join the chat at https://gitter.im/tombatossals/angular-leaflet-directive

Build Status

Dependencies  Dependencies 

Coverage
Status

realtymaps

Build Status

Dependencies  Dependencies 

Coverage
Status

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

You can browse all the examples added by the community to learn about the directive and its possibilities here:

http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html

Or you can see some examples directly:

To see it in action, go to the main page where you can find more examples and some documentation:

  • http://tombatossals.github.com/angular-leaflet-directive

How to use it

You must include the leaflet-directive dependency on your angular module:

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

After that, you can change the default values of the directive (if you want) 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, like this:

<leaflet defaults="defaults" 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, like this:

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

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

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

Module stats last updated: 2017-09-16 16:00:02

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!