"Walking" map with custom projection

[kvolleberg]

I have made two very simple map setups (based on "https://github.com/bartvde/PDOK-Leaflet". Both maps show more or less the same area. Panning is bounded by "setMaxBounds". One map uses default Leaflet projection, the other map uses the RD projection (EPSG 28992).

Data can be found here: https://dl.dropboxusercontent.com/u/8713747/walking_maps.zip

When zooming in and/or panning through the map, I notice strange behaviour on the map with RD-projection. It looks like it's related to browser size and map zoomlevel, but effects are different in different browsers and differend window sizes.

In case setMaxBounds is not called (so the user can pan to anywhere), 'walking' does not occur either.

It does not occur for the map with default projection, so I assume it has to do with Proj4Leaflet.

Cheers, Koen

[perliedman]

I can reproduce this in Chrome on Mac, also in Firefox on Windows, but not in Chrome on Windows.

It looks like a CSS transition is somehow left, which very slowly pans the map. Just guessing, I would say the way Leaflet enforces the bounds is somehow thrown off when the coordinates are different from spherical Mercator, but I will have to investigate further.

[kvolleberg]

Did you find time to take a look at this problem? Digging into the Leaflet source is a bridge too far for me now, so I would really appreciate any help to solve this.

[perliedman]

Sorry, no update more than that I can't get it to reproduce on my Linux laptop in Chrome or Firefox.

Do you have any hints for how to trigger the behaviour? I saw it in Firefox on Windows, as I mentioned, but it wasn't clear to me how it was actually triggered. What browsers and operating systems have you seen it on?

[kvolleberg]

It's not clear to me what triggers it. It happens on Chrome & FF (Win7)with certain window sizes and zoom levels.

I tried to find out what causes the problem, and think it hangs on the panInsideBounds routine of Leaflet. It considers LatLons not equal, even with very small differences. In the Proj4Leaflet code, I changed the unproject function to:

    unproject: function (point, unbounded) {
        var point2 = this._proj.inverse([point.x, point.y]);
        var lat = Math.round(point2[1] * 100000) / 100000
        var lon =Math.round(point2[0] * 100000) / 100000
        return new L.LatLng(lat, lon, unbounded);
    }

Since then, 'walking' maps were over. I do not know if this is the ultimate solution, or a workaround, but: it works...

[perliedman]

Interesting. It sounds like it's really panInsideBounds that should be modified to handle this scenario. I think it would be a bad idea to assume to projected coordinates should be rounded to some arbitrary precision.

[perliedman]

Looking at panInsideBounds, it uses LatLng.equals, which in turn uses the constant LatLng.MAX_MARGIN to determine if two coordinates are equal.

Could you check if adjusting the constant could fix the issue as well? It seems like an easy and more general fix.

[kvolleberg]

Changing LatLng.Max_MARGIN tot 1.0E-5 solves the issue as well (smaller values do not work)

[perliedman]

@kvolleberg it would be great if you could explain what you've found out in the Leaflet issue I've created: https://github.com/Leaflet/Leaflet/issues/2427, since I'm not able to reproduce and can't tell exactly why panInsideBounds gets stuck.

[perliedman]

This long-standing issue has finally been fixed in latest Leaflet master: https://github.com/Leaflet/Leaflet/issues/4077