leafletjs setMaxBounds wont let zoom out to see whole world

Question

I am using leaflet js to show a world map using cloudmade tiles. When I setMaxBounds to the map the bounds work great except to north. That is, however, not my biggest concern. My concern is, as I use maxBounds I can not zoom out to see whole world in any screen size.

The bound I used reaches all the way from north east corner of canada to south west of australia. I can pan to reach the bounds but cant zoom out to see whole map. I set minZoom to 0. Without maxBound, it is zoomed out too far you can see the world repeat thrice on 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 appriciated. Anil

Answer 1

If I understand correctly, your problem is that you want to be able to see the entire world in your view, but you want to be able to restrict the user from seeing the tiles wrapped around.

First, Leaflet is doing exactly what you are telling it to do. Check out this JSFiddle I created with your code. http://jsfiddle.net/zF6bf/ I can zoom out to see the entire world, but only if I resize the result pane to be large enough to show the entire world, without violating your maxBounds rule. This appears to be correct behavior to me.

Second, if you really do not want the world to wrap, you can also set the noWrap option to true when creating a layer.

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

This will prevent that layer from wrapping around the map. If this wrapping is what made you create the bounds in the first place, then perhaps removing the wrapping will remove your need to set the maxBounds. Then the map will be able to be panned and zoomed freely.