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?

Thanks!

Answer 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.

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