Search code examples
javascriptangularjsleafletangular-leaflet-directive

Javascript - Angularjs - leaflet. Translation

Everywhere I look on the internet/docs about leaflet I always see this type of statement, example :

var map = L.mapbox.map('map', { zoomControl:false });

What does it mean?

And how Can I integrate it in Angularjs?

P.S. : html-leaflet tag

<div id="map">
<leaflet class="leafletmap" markers="markers" lf-center="center"
height="300px" width="785px"></leaflet>
</div>
Solution

  • L.mapbox comes from the custom Leaflet implementation by Mapbox called Mapbox.js. angular-leaflet-directive however uses the standard Leaflet library and with the directive options, markers etc. are defined in a different way.

    For angular-leaflet-directive to work you don't need an extra map <div>, you just put this somewhere:

    <leaflet id="map" class="leafletmap" defaults="myDefaults" markers="markers" lf-center="center" height="300px" width="785px"></leaflet>

    To add zoomControl to the map you add defaults="myDefaults" to the directive, and then specify the Leaflet default options in your controller:

    angular.extend($scope, {
    defaults: {
      scrollWheelZoom: false
    }
}

    You can see an example here: https://plnkr.co/edit/rZbuHmAwA7q7WtBAZg4W

    You can find more examples in the angular-leaflet-directive documentation.