AngularJS directive to embed an interact with maps managed by Leaflet library
Clone or download
elesdoar Merge pull request #354 from Pedrazl/master
fix(nominatum): Fix Nominatim Service to work with all angular versions (1.x)
Latest commit a35fc81 Jan 10, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Adapt Nominatim service to work with angular versions > 1.5 Jan 5, 2018
doc docs(marker attributes): Add zIndexOffset. Mar 29, 2016
examples docs(website): fix main website Oct 7, 2016
grunt chore(release-process): fix release bump tasks Oct 5, 2016
src Adapt Nominatim service to work with angular versions > 1.5 Jan 5, 2018
test chore(merge): merge with 1.X branch, fix #294 Oct 5, 2016
website docs(website): fix main website Oct 7, 2016
.editorconfig "chore(indenting): keeping indenting at 4 but enforcing it across other Nov 9, 2015
.gitignore fix(grunt, karma): huge glob would run out of memory. Removed Nov 9, 2015
.jshintrc chore(merge): merge with 1.X branch, fix #294 Oct 5, 2016
.npmignore gitignore logo.svg Nov 9, 2015
.travis.yml chore(npm): fix travis error Jun 8, 2016 Release v2.0.0 Oct 5, 2016 save off module renaming of leaflet-directive to ui-leaflet #73 Oct 29, 2015
Gruntfile.js issue #19 Nov 19, 2015
LICENSE updating docs and changelog to point to angular-ui fork Oct 29, 2015 Add CDNJS version badge in May 4, 2017
bower.json chore(merge): merge with 1.X branch, fix #294 Oct 5, 2016
coffeelint.json style(grunt aliases): yml to coffee Nov 9, 2015
generate-examples.js NodeJS script to extract controllers from examples Apr 17, 2015
index.html docs(website): fix main website Oct 7, 2016
logo.svg issue #72 Oct 29, 2015
package.json chore(merge): merge with 1.X branch, fix #294 Oct 5, 2016

Angular Leaflet

Why the fork?

While we are grateful for all the original work at tombatossals/angular-leaflet-directive. We need to be able to operate as an organization to respond to issues, pull-requests and other various items quicker. We need to be able to add other developers as admins easier via group permissions via github orgs. Lastly this project needs to be more credible via being a group / org.

Master Branch State

Please note the master branch is currently in a "in-progress state" and is not suitable for use at this point. We are trying break up the library to be more unix / plugin like. This will reduce the burden of constant changes to the core repo (this repo) for each and every unforseeable plugin that leaflet has. Therefore, the new usage plugins will require developers (angular-ui or not) to create specific angular directives, services, factories, and etc to extend the main ui-leaflet directive. Where ui-leaflet would be the main dependency.


How to extend: Create new directives, factories, and services specific to plugins. Use the decorator pattern to extend existing services, factories and directives. Specifically see ui-leaflet-draw as it decorates ui-leaflet.

More about decorators:


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

Join the chat at CDNJS

Build Status Dependencies  Dependencies Coverage Status


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



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 that if you're using the browser to load it without CommonJS (browserify, webpack) please use angular-simple-logger.js (not index.js).

Include the ui-leaflet dependency on your Angular module:

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

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}{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);