LeafletJS: How to remove the zoom control

JavascriptMapLeafletMapbox

Javascript Problem Overview


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!

Javascript Solutions


Solution 1 - Javascript

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 - Javascript

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 - Javascript

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 - Javascript

you can remove the control zoomControl in this way:

map.removeControl(map.zoomControl);

Solution 5 - Javascript

You can just use

map.zoomControl.remove();

Solution 6 - Javascript

map.scrollWheelZoom.disable();

Solution 7 - Javascript

To dynamically remove then add back the zoom control:

var map = L.mapbox.map('map');

if( wantToRemove ) {
    map.removeControl( map.zoomControl ); 
} else {
    map.addControl( map.zoomControl );
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBrett DeWoodyView Question on Stackoverflow
Solution 1 - JavascriptcoordinateView Answer on Stackoverflow
Solution 2 - JavascriptAllie Hoch JanochView Answer on Stackoverflow
Solution 3 - JavascriptBrett DeWoodyView Answer on Stackoverflow
Solution 4 - JavascriptleobelizquierdoView Answer on Stackoverflow
Solution 5 - JavascriptyemawView Answer on Stackoverflow
Solution 6 - JavascriptAnikView Answer on Stackoverflow
Solution 7 - JavascriptCDMView Answer on Stackoverflow