Search code examples
reactjsreact-leaflet

How to disable the react leaflet zoom

Is it possible to stop the user being able to zoom in or out using the react leaflet library?

I can see the following option in the documentation but this just controls whether you see the plus and minus control box - you can still double click/tap to zoom in and drag the map around

<Map zoomControl={false} .. />

Zoom Documentation

https://leafletjs.com/reference-1.4.0.html#control-zoom-option

Is it possible to configure the map so it acts like an image, i.e. you can't move it, you can't drag it, you can't change the zoom etc.?

Solution

  • I would recommend you to check these "Interaction Options":

    {
  doubleClickZoom: false, 
  closePopupOnClick: false, 
  dragging: false, 
  zoomSnap: false, 
  zoomDelta: false, 
  trackResize: false,
  touchZoom: false,
  scrollWheelZoom: false
}

    Check the docs. https://leafletjs.com/reference-1.4.0.html#map-closepopuponclick