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?
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?
Share Improve this question asked Jan 25, 2018 at 12:40 Tim NuwinTim Nuwin 2,8872 gold badges32 silver badges63 bronze badges 3- 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 Commented Jan 25, 2018 at 13:38
- 1 Possibly a duplicate of stackoverflow.com/questions/42854681/… – IvanSanchez Commented Jan 25, 2018 at 13:38
- Possible duplicate of Leaflet - get a map that covers the full screen – xmojmr Commented Jan 25, 2018 at 16:40
3 Answers
Reset to default 16Assuming 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
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.
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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
noWrap: true
}).addTo(map);
map.fitWorld();
</script>