4

I am trying to set the bounds of the entire world using leaflet.js:

  leafletMap.setMaxBounds([
      [?, ?],
      [?, ?]
  ]);

What values do I have to use to set the bounds for the entire world so it doesn't show multiple same countries?

Tim Nuwin
  • 2,775
  • 2
  • 29
  • 63
  • Could you be a bit more specific about what you mean by "show multiple same countries", maybe with some screenshots? Also, are you using the default (EPSG:3857) map CRS? – IvanSanchez Jan 25 '18 at 13:38
  • 1
    Possibly a duplicate of https://stackoverflow.com/questions/42854681/leaflet-get-a-map-that-covers-the-full-screen/42855961#42855961 – IvanSanchez Jan 25 '18 at 13:38
  • Possible duplicate of [Leaflet - get a map that covers the full screen](https://stackoverflow.com/questions/42854681/leaflet-get-a-map-that-covers-the-full-screen) – xmojmr Jan 25 '18 at 16:40

3 Answers3

14

Assuming you meant that you don't want to show multiple worlds and not contries

setting maxBounds to the min and max lat/long will make it so when you scroll off the map it will bounce back

leafletMap.setMaxBounds(  [[-90,-180],   [90,180]]  )

you can also set noWrap to true when adding a tileLayer which gets rid of the repeat maps

noWrap:true

kboul
  • 13,836
  • 5
  • 42
  • 53
Nemo
  • 143
  • 1
  • 8
3

You can also set an option to repeat the "original world" and not copies

worldCopyJump: true

here is the doc from leafletjs :

With this option enabled, the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible.

This could help some of you here.

Elyass
  • 726
  • 8
  • 15
0

To make the world show only once set your tileLayer’s noWrap property to true https://leafletjs.com/reference-1.5.0.html#gridlayer-nowrap

Leaflet contains a convenient method to make the entire world fit: map.fitWorld(); https://leafletjs.com/reference-1.5.0.html#map-fitworld

<body>
  <div id="map"></div>
  <script>
    var map = L.map('map', {
      center: [35.9602, -99.2285],
      zoom: 4
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      noWrap: true
    }).addTo(map);
    map.fitWorld();
  </script>
Fraeli78
  • 21
  • 7