4

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

Anil Maharjan
  • 376
  • 3
  • 11

1 Answers1

7

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.

Patrick D
  • 5,910
  • 3
  • 41
  • 51
  • Thanks a lot @patrick-d. `noWrap` is what I was looking for. Still while using `setMaxBound`, If you see the JSFiddle you created, you can see the map does not show the whole world, (you can't further zoom out), though you can pan to bounds, try it on different window size. Only @ 950px * 550px, the map is not cropped. I really like the `setMaxBound` but for that I think I should have container bigger than 950px * 550px and in the same ratio if I have to go big. And Panning towards North, Its not restricted by bounds, I think its a bug in Leaflet, isn't it? – Anil Maharjan May 15 '13 at 16:48
  • The map does not show the whole world because the initial ratio of the result in that JSFiddle is not the ratio that the "whole world" is displayed at. In this case, zooming out further would violate your `maxBounds` restriction, so Leaflet will not let you zoom out further. – Patrick D May 15 '13 at 16:53
  • 1
    Panning towards north, I am not sure. It works for south. This may be a bug. – Patrick D May 15 '13 at 16:54
  • Okey lets be specific. I have 500px wide canvas. Now what I get with `setMaxBound` is 1/4th of the whole map and I can pan in all directions. The ratio does not seem to do anything here. [JSFiddle](http://jsfiddle.net/Fa5JY/1/) But when i dont setMaxBound it can be zoomed out so that I can see whole map like in here [JSFiddle](http://jsfiddle.net/paRxe/1/) – Anil Maharjan May 15 '13 at 18:38