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

score 153 · Accepted Answer · edited Sep 10 '19 at 15:15

153

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.

edited Sep 10 '19 at 15:15

lucas

1,050
12
21

answered May 14 '13 at 07:38

coordinate

15,224
6
24
24

4

`var map = L.mapbox.map('map', { zoomControl:false });` does not work, the second parameter needs to be a string specifying the map type, the third parameter takes the `{ zoomControl:false }` – Programster Aug 31 '15 at 15:11
6

for those just wanting to disable the mousewheel zoom, but not disable the ability to zoom using the + and - buttons on the map, substitute `zoomControl` with `scrollWheelZoom` – Programster Aug 31 '15 at 15:12

score 69 · Answer 2 · answered Feb 07 '14 at 02:00

69

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

answered Feb 07 '14 at 02:00

Allie Hoch Janoch

1,156
8
9

11

For those who want to disable drag feature, you can do this too: map.dragging.disable(); – sam Mar 18 '15 at 11:19

score 18 · Answer 3 · answered May 15 '13 at 23:23

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

score 15 · Answer 4 · answered Feb 01 '16 at 22:03

15

you can remove the control zoomControl in this way:

map.removeControl(map.zoomControl);

answered Feb 01 '16 at 22:03

leobelizquierdo

1,648
12
20

score 10 · Answer 5 · answered Nov 23 '15 at 06:45

10

You can just use

map.zoomControl.remove();

answered Nov 23 '15 at 06:45

yemaw

708
7
6

2

in my case a get a TypeError: map.zoomControl.remove is not a function. The way I found is using the `removeControl` function like this: `map.removeControl(map.zoomControl);` – leobelizquierdo Feb 03 '16 at 16:39
I guess, map.zoomControl.remove() is a new function in version 1.0.0 while map.removeControl() is for lower versions. – yemaw Feb 17 '16 at 03:34

score 8 · Answer 6 · answered Feb 02 '14 at 12:39

8

map.scrollWheelZoom.disable();

answered Feb 02 '14 at 12:39

Anik

2,692
2
22
25

score 5 · Answer 7 · answered Apr 19 '18 at 21:12

5

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

answered Apr 19 '18 at 21:12

CDM

51
1
6

This answer is still working, unlike the others – Aug 25 '21 at 21:52

LeafletJS: How to remove the zoom control

7 Answers7

Linked