LeafletJS: How to remove the zoom control

Question

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

Answer 1

you can remove the control zoomControl in this way:

map.removeControl(map.zoomControl);

Answer 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");

Answer 3

map.scrollWheelZoom.disable();

Answer 4

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 );
}

Answer 5

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.

Answer 6

You can just use

map.zoomControl.remove();