CODEWITHSUNDEEP
javascriptleafletmapbox
Tim Nuwin
Tim Nuwin

Reputation: 2897

What is the max bounds of the entire world? - Leaflet

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?

Upvotes: 5

Views: 8218

Answers (3)

Nemo
Nemo

Reputation: 163

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

Upvotes: 16

Fraeli78
Fraeli78

Reputation: 21

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>

Upvotes: 0

Elyass
Elyass

Reputation: 736

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.

Upvotes: 3

Related Questions