Leaflet tasks should be handled in Leaflet, Angular tasks in Angular – no big surprise. All this should be loosely coupled to achieve simple communication between the frameworks. We cut off all the parts of Angular Leaflet Directive we don’t actually have to use and the result is Tiny Leaflet Directive. A lightweight map directive with only two arguments:
- id – Common HTML attribute
- tld-options – Map options
In fact the interface is the same as for common Leaflet map object L.map(id, options). Look how it’s embedded in Angular templates:
<tld-map id="map" tld-options="::mapOptions" style="width:100%; height:480px;"> </tld-map>
That’s all you have to do to display simple map. There is one another service called tldMapService with public function getMap(id). You can imagine it is used to retrieve real Leaflet map object in your controllers and services to play with.