panInsideBounds doesn't handle world bounds

[fungiboletus]

If you configure the map's bounds to the world bounds ([[-90.0,-180.0],[90.0,180.0]]), you can infinitly move the map on the vertical axis.

In my opinion, it's because the default projection tends to zero with the worlds bounds.

I wrote this example : http://jsfiddle.net/gxzhc/1/, where the bounds are a little smaller so you can see a very short animation (around 3 pixels) when you release your mouse click.

The problem seems to be in the panInsideBounds function, but i don't know how to fix it properly. Maybe we have to work with latitude and longitude instead of pixels.

Can you give me advices for fixing it ?

[wmleler]

I've noticed this when, on map creation, I set the maxBounds option to anything greater than around 80 degrees N. If I set the Northern bounds above 85 degrees then the map scrolls arbitrarily, as if there were no bounds. If I set it to, say 82 degrees, then if you scroll slightly past the boundary then the map bounces back, but if you scroll further, then it doesn't bounce back. Probably some simple computation error.

[wmleler]

Ok, I spent some time on this and came up with a workaround. The bug is in the panInsideBounds function.

First of all, you shouldn't use +/- 90 degrees as your world bound latitudes. The default mercator projection only goes to +/- 85.05112878, so a better world bound would be [[-85,-180.0],[85,180.0]]. Of course, you can use smaller bounds too.

Second, replace map.panInsideBounds by placing the following code at the start of your JavaScript:

L.Map.include({
    panInsideBounds: function(bounds) {
        bounds = L.latLngBounds(bounds);

        var viewBounds = this.getBounds(),
            viewSw = this.project(viewBounds.getSouthWest()),
            viewNe = this.project(viewBounds.getNorthEast()),
            sw = this.project(bounds.getSouthWest()),
            ne = this.project(bounds.getNorthEast()),
            dx = 0,
            dy = 0;

        if (viewNe.y < ne.y) { // north
            dy = ne.y - viewNe.y + Math.max(0, this.latLngToContainerPoint([85.05112878, 0]).y); // + extra vertical scroll
        }
        if (viewNe.x > ne.x) { // east
            dx = ne.x - viewNe.x;
        }
        if (viewSw.y > sw.y) { // south
            dy = sw.y - viewSw.y + Math.min(0, this.latLngToContainerPoint([-85.05112878, 0]).y - this.getSize().y); // + extra vertical scroll
        }
        if (viewSw.x < sw.x) { // west
            dx = sw.x - viewSw.x;
        }

        return this.panBy(new L.Point(dx, dy, true));
    }
});

The changed lines are the ones with comments that start with a + (2 of them). The bug only manifests if you scroll the map far enough so that the gray space above or below the map shows. This new code fixes that.

I did NOT submit a pull request for this because I think this fix is not general enough. It probably only works for the default projection. I'll leave it to one of the Leaflet gurus to figure out how to generalize it. But it solved my problem. See http://jsfiddle.net/gxzhc/3/ to see how it solved yours.

[fungiboletus]

Thanks alot for your fix. You had even fixed my code, I'm happy :-)

[wmleler]

You are welcome! I'm still hoping that one of the Leaflet gurus incorporates this fix into the distribution (and generalizes it to other projections).

[wmleler]

Issue #1475 is related, but a different bug. After zooming, panInsideBounds should get called. My fix didn't deal with that.

[obliquid]

wmleler your code saved my life!!!! it solved a lot of bugs that a was having with panInsideBounds() on smartphones using latest leaflet version: Leaflet 1.0.0-rc.3+8333407

thank you!