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.