CODEWITHSUNDEEP
javascriptangularjsleafletangular-leaflet-directive
Catalin
Catalin

Reputation: 258

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>

Upvotes: 0

Views: 223

Answers (1)

chrki
chrki

Reputation: 6323

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.

Upvotes: 1

Related Questions