A simple directive for displaying a Leaflet map in AngularJS, providing a callback with the map object.
Example 2: sync center&zoom Source
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;
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:
MIT