Angular Leaflet Light

A simple directive for displaying a Leaflet map in AngularJS, providing a callback with the map object.

Examples

Example 1: Default Source

Example 2: sync center&zoom Source

Example 3: geojson Source

Installation

Install using npm:

npm install --save angular-leaflet-light

Add angular-leaflet as a dependency for your app:

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

Use it as so:

<leaflet></leaflet>

Extending:

A simple service adds some common utils to handle things like compiling popup with your data from the scope + default settings for all leaflet maps. Callback is used at initialization so it doesn't need a watcher.

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

You can also access the map using the service, note map id "mymap":

leafletService.data.mymap;

Comparing to alternatives

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

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

Later own that project got forked by some actives and is now maintained by angular-ui team:

https://github.com/angular-ui/ui-leaflet

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...)

License

MIT