Leafletjs setMaxBounds won't scale down to see the whole world

Question

I use the js booklet to show a map of the world using cloud tiles. When I setMaxBounds to the map, the borders work fine except north. This, however, is not my biggest problem. I am worried, since I am using maxBounds , I cannot zoom out to see the whole world in any screen size.

The border I use extends from the northeastern corner of Canada southwest of Australia. I can pan to reach borders, but I cannot zoom out to see the whole map. I set minZoom to 0. Without maxBound it is reduced too much, and you can see the world repeat three times on the big screen.

 map = L.map('canvas',{zoomControl: false}).setView([38.82259, -2.8125], 0); map.setMaxBounds([[84.67351256610522, -174.0234375], [-58.995311187950925, 223.2421875]]); 

Any help is determined. Anil

Answer 1

If I understand correctly, your problem is that you want to see the whole world in your view, but you want the user to see how the tiles are wrapped.

First, Leaflet does exactly what you tell him. Check out this JSFiddle I created with your code. http://jsfiddle.net/zF6bf/ I can zoom out to see the whole world, but only if I resize the results pane to be large enough to show the whole world without violating your maxBounds rule, This seems right to me .

Secondly, if you really do not want the world to be wrapped, you can also set the noWrap parameter to true when creating the layer.

 var osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { noWrap: true}).addTo(map); 

This will prevent this layer from wrapping around the map. If this wrapping is what made you create the borders in the first place, then possibly removing the wrapper will eliminate your need to set maxBounds . Then the map will be available and scaled freely.