Maplibre-gl-leaflet layer is mis-aligned with map when panning the map off screen

[gavinr]

If you drag the map out of the window, the maplibre-gl-leaflet layer gets stuck in view while other leaflet layers (like markers) continue to get pulled, causing the two layers not to be aligned correctly.

Replication case

https://jsbin.com/vepuyeqoyo/3/edit?html,output

1. Open the demo case
2. Drag the map down
   • Expected: point stays in its place relative the maplibre-gl-leaflet layer (in the ocean above greenland)
   • Actual: when the maplibre-gl-leaflet layer reaches the bottom of the window, as the map continues to be drug down, the point moves relative to the maplibre-gl-leaflet layer, moving all the way off screen.

chrome_t6InO6UcHH.mp4

[wipfli]

Thanks for taking the time to open this issue @gavinr

[wipfli]

Is there a way to limit the map movement maybe?

[patrickarlt]

@wipfli yes Leaflet supports a maxBounds property and setMaxBounds() method on the Map. Enabling it seems to fix the issues:

https://jsbin.com/yofobup/1/edit?html,output

var map = L.map('map', {
  maxBounds:[[-90,-180], [90,180]] // limit to the defined world bounds
}).setView([0,0 ], 2);

L.marker([179, 0])
    .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
    .addTo(map)
    .openPopup();

var gl = L.maplibreGL({
    // get your own MapTiler token at https://cloud.maptiler.com/ or use MapBox style
    style: 'https://api.maptiler.com/maps/topo/style.json?key=gbetYLSD5vR8MdtZ88AQ'
}).addTo(map);

I guess the question is do we try to just limit the north/south panning/zooming behavior in _update or _transformGl() or just call map.setMaxBounds([[-90,-180], [90,180]]) and document this behavior.

[wipfli]

Since it is a north/south problem, I would like to avoid limiting also east/west movement, so map.setMaxBounds([[-90,-180], [90,180]]) seems like a bad option. But could you maybe share the idea of fixing the problem with _update in a pull request? That would be interesting...

[patrickarlt]

@wipfli I can give it a shot but it probably won't be soon.

[patrickarlt]

@wipfli @gavinr turns out this was really simple. I put up #31 with a fix.