angular <leaflet> directive that is just leaflet

bower install angular-leaflet-light


Angular Leaflet Light


Travis CI Codacy Badge semantic-release Commitizen friendly

Quality Coverage Status Circle CI

dependencies devdependencies

This project aims at providing a leaflet integration for angularjs.

Please show me examples

Example 1: Default Source

Example 2: sync center&zoom Source

Example 3: geojson Source

How to install

install using npm

npm install --save angular-leaflet-light

create example.js file

angular.module('MyApp', ['angular-leaflet']);

create index.html file

        <title>angular leaflet default</title>
        <link rel="stylesheet" href="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src=""></script>
        <script type="text/javascript" src=""></script>

        <script type="text/javascript" src="node_modules/angular-leaflet-light/dist/angular-leaflet.js"></script>

        <script type="text/javascript" src="example.js"></script>
        <style type="text/css">
        #map {
            height: 500px;
<body ng-app="example" ng-strict-di ng-cloak>

Why do not use angular-leaflet from tombatossals ?

The first integration of leaflet in angular has been done by David Rubert aka tombatossals:

Now this project is maintains and updated by the famous angular-ui team:

So why should I do it again ? Because both provide something that is not leaflet.

Theses projects provides advanced integration into angular but ...

  • geojson (why the hell should I have only one geojson)
  • slow on mobile (may be because there are lots of watchers on quite big objects)
  • hard to customize (try to create a directive that wrap it...)

I have use tombatossals's implementation on many project before that time where I find how I would like it to be.

So what is angular leaflet light ?

A simple directive that display a map and provide a callback with the map object, so you can do what ever you want.

A simple service add some common utils to handle things like compile popup with your data from the scope + default settings for all leaflet maps (using in the init so no watcher on it).

<leaflet id="mymap" on-map-initialized="customizeMyMap(map)"></leaflet>

You can also access the map using the service:;