Is there a way to make leaflet not repeat the world map and make the map stay within the world bounds when dragging? and also disable zoom out when the size of the world reaches the size of the window

Is there a way to make leaflet not repeat the world map and make the map stay within the world bounds when dragging? and also disable zoom out when the size of the world reaches the size of the window

• javascript
• maps
• leaflet
• draggable

• Possible duplicate of Can I prevent panning Leaflet map out of the world's edge? – rob.m Commented May 25, 2019 at 15:19

2 Answers 2

To stop the tiles from repeating, use the noWrap option of L.TileLayer

If set to true, the tiles just won't load outside the world width (-180 to 180 longitude) instead of repeating.

http://leafletjs./reference.html#tilelayer-nowrap

If you want to stop panning beyond defined bounds, use the maxBounds option of L.Map or call the setMaxBounds method:

Restricts the view to the given geographical bounds, bouncing the user back when he tries to pan outside the view.

• http://leafletjs./reference.html#map-maxbounds
• http://leafletjs./reference.html#map-setmaxbounds

If you want to disable zoom beyond a certain level use L.Map's minZoom and maxZoom options. What you want to do is set a minimum zoom level and use that as initial zoom. What factor depends on your map's elementsize and your tilelayer's tilesize. Most tileproviders use 256px². At zoom 0 the world is 1 tile, at zoom 1, 2x2 tiles, at 3 it's 4x4 etc. So if your map's elements is 512px² your minZoom would be 1.

• http://leafletjs./reference.html#map-minzoom

Here's a demonstration on Plunker: http://embed.plnkr.co/rP5NLQ/preview

By Setting minimum zoom level :

map._layersMinZoom=1 (which sets the minimum zoom level to 1)

OR

map.options.minZoom = 1;

Read more here