CODEWITHSUNDEEP
reactjsreact-leaflet
James
James

Reputation: 767

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

Upvotes: 5

Views: 13457

Answers (2)

glennsl
glennsl

Reputation: 29106

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.

Upvotes: 1

mokiSRB
mokiSRB

Reputation: 1162

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

Upvotes: 8

Related Questions