[Fixed] Leaflet on Angular: Max-Zoom on Mobile-Devices not working


When trying to set the max-zoom of a layer to "14", the leaflet-controlls block at 14. But when i try to use the gestures on the trackpad or touchscreen the maxZoom-property seems not to be used.

How can I set the maxZoom for all types of Gestures or Controlls?

This is the configuration I use in my code for my layer:

    var humanitarianMap = new L.TileLayer(
        maxZoom: 19,
        attribution: "© OpenStreetMap",

It seems for me like a bug – or did I forgot something?


Not exactly sure what behaviour you are describing and considering a bug. But in case you see a touch user being able to still pinch zoom a little bit beyond your predefined map maxZoom limit, and when they release the pinch zoom, the map goes back to that max zoom, then this is the expected behaviour. Most users expect navigation feedback from their touch interaction, even when reaching horizontal or zoom limits (think about iOS scroll bounce behaviour).

If you want to prevent this specific behaviour, use the bounceAtZoomLimits map option:

Set it to false if you don’t want the map to zoom beyond min/max zoom and then bounce back when pinch-zooming.

L.map("mapId", {
  bounceAtZoomLimits: false

Leave a Reply

(*) Required, Your email will not be published