How to disable the react leaflet zoom

Question

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

Irony

Answer 1

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

Trev

Can you provide an example how to script these in? I'm only familiar with my example, i.e. setting the values within the "html" – Irony

It looks like it's working but on closer inspection I'm still able to zoom in using the double fingers gesture on my mac – Irony

You will have to add more options like scrollWheelZoom: false and touchZoom: false. Read the docs it's on the same page. I will update the answer too. – Trev

@Irony This an example <Map center={position} zoom={zoom} style={{ height: 300 }} scrollWheelZoom={false}> </Map> – Upstroke

Answer 2

This should disable all built-in zoom interactions:

<Map 
  zoomControl=false
  scrollWheelZoom=false
  doubleClickZoom=false
  touchZoom=false
  boxZoom=false
/>

Option	Description
zoomControl	Whether a zoom control is added to the map by default.
scrollWheelZoom	Whether the map can be zoomed by using the mouse wheel.
doubleClickZoom	Whether the map can be zoomed in by double clicking on it and zoomed out by double clicking while holding shift.
touchZoom	Whether the map can be zoomed by touch-dragging with two fingers.
boxZoom	Whether the map can be zoomed to a rectangular area specified by dragging the mouse while pressing the shift key.

Infantine