3

Using Leaflet.js for an open-source map project, but I need to set specific bounds the user can't move beyond. The maxBounds property of the map object works as expected on the north, east and west directions- but it lets me scroll forever southward.

In the fiddle, the green background reveals where the bound should end, and I've added an on-click alert of the latitude for checking.

http://jsfiddle.net/7m7n7/

var map = L.map('map', {
maxZoom: 4,
minZoom: 1,
maxBounds: [
    //south west
    [-85.07815906717186, -179.97802734374997],
    //north east
    [-60.413852350464914, 39.8583984375]
]
}).setView([-72.5, -110], 1);

L.tileLayer(
    'http://{s}.tile.cloudmade.com/{API}/998/256/{z}/{x}/{y}.png', 
    { maxZoom: 18 }).addTo(map);
rob-gordon
  • 1,099
  • 2
  • 15
  • 32
  • I have no answer, but I did have this discussion the other day in a question: http://stackoverflow.com/questions/16558231/leafletjs-setmaxbounds-wont-let-zoom-out-to-see-whole-world/16567244#16567244 The JSFiddle in question has the same problem you did, BUT the problem there was his bounds would let him scroll north forever. South worked just fine. There must be some sort of Leaflet bug in play here. – Patrick D May 23 '13 at 14:18
  • Thanks for the lead @PatrickD ! I've reposted my question in the google group for Leaflet (https://groups.google.com/forum/?fromgroups#!topic/leaflet-js/OvVXbJYtkf8) hoping someone's seen it before or brave enough to dig deeper. If I get a solution, will repost here. – rob-gordon May 25 '13 at 02:39

1 Answers1

2

When you use setBounds then leaflet called L.Map.panInsideBounds with your bounds, where are you trying get projection: viewSw = this.project(viewBounds.getSouthWest()), which use next code for default projection:

project: function (latlng) { // (LatLng) -> Point
    var d = L.LatLng.DEG_TO_RAD,
    max = this.MAX_LATITUDE,
    lat = Math.max(Math.min(max, latlng.lat), -max),
    x = latlng.lng * d,
    y = lat * d;

    y = Math.log(Math.tan((Math.PI / 4) + (y / 2)));

    return new L.Point(x, y);
}

So there are Math.max(Math.min(max, latlng.lat), -max) can't be more then max or min value and viewSw became equal to max value and real bounds not fixed.

This issue was fixed. You can use version from master or wait when next realise will be come.

tbicr
  • 20,912
  • 10
  • 72
  • 100