3

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

enter image description here

katie
  • 991
  • 2
  • 11
  • 19
  • Possible duplicate of [Can I prevent panning Leaflet map out of the world's edge?](https://stackoverflow.com/questions/22155017/can-i-prevent-panning-leaflet-map-out-of-the-worlds-edge) – rob.m May 25 '19 at 15:19

2 Answers2

7

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.com/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.

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.

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

iH8
  • 27,722
  • 4
  • 67
  • 76
  • The code in the plunkr is very helpful. It would be great to include it in the answer. (Would edit myself, but the edit queue is full atm.) – vlz Sep 20 '22 at 09:51
  • react example: ```const nortWest = new L.LatLng(Number(90), Number(-180)) const southEast = new L.LatLng(Number(-90), Number(180)) const bounds = L.latLngBounds(nortWest, southEast) // provide the above bounds to the MapContainer as props ``` – asevindik Nov 22 '22 at 11:57
1

By Setting minimum zoom level :

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

OR

map.options.minZoom = 1;

Read more here

Sunil B N
  • 4,159
  • 1
  • 31
  • 52
  • Does that actually work? Because at zoom=1, the world consists of four (=two-by-two) 256x256px square tiles for most providers. Meaning if your map is say 800px wide you still have 288px of duplication (=sum of both left&right overhang past 512px); on a widescreen say 1600px you have more than three full worlds. [Mapwidth in CSS is either fixed in px, in em, or in % so can be fixed, parametrized, or dynamic respectively.] Also this only tries to answer the secondary question about duplicating, and doesn't address the main query of dragging past the polar edges. – user3445853 Dec 16 '19 at 12:37