LeafletJS: How to remove the zoom control
I'm trying to remove the zoom controls (+/-) on a LeafletJS map.
I'm using the MapBox.js version of Leaflet but most of the operations are the same as Leaflet. I implement my map like this:
var map = L.mapbox.map('map');
var layer = L.mapbox.tileLayer('MAPBOX-ID', {
format: 'jpg70',
minZoom: 13,
maxZoom: 15,
reuseTiles: true,
unloadInvisibleTiles: true
});
map.addLayer(layer);
map.setView([40.73547,-73.987856]);
The documentation says there's a zoomControl option that will remove the zoom control from the map but I've had no luck in getting it to work.
How can I remove the zoom control with this implementation?
Thanks!
Solution 1:
This worked for me:
var map = new L.map('map', { zoomControl: false });
With mapbox try:
var map = L.mapbox.map('map', { zoomControl: false });
See map creation and the zoomControl option in the Leaflet documentation.
Solution 2:
If you want to dynamically turn on and off zooming you can do something like this:
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
$(".leaflet-control-zoom").css("visibility", "hidden");
Solution 3:
Thanks to coordinate's answer I was able to figure out the correct method. The solution is:
// Create the map
var map = L.mapbox.map('map', null, { zoomControl:false });
// Create my custom layer
var layer = L.mapbox.tileLayer('MAPBOX-ID', {
format: 'jpg80',
minZoom: 13,
maxZoom:15,
tileSize: 256,
reuseTiles: true,
unloadInvisibleTiles: true
});
// Add the layer
map.addLayer(layer);
Solution 4:
you can remove the control zoomControl
in this way:
map.removeControl(map.zoomControl);