MapLibre GL JS v5.0.0 does not work with MapLibre GL Leaflet

[olivier3lanc]

MapLibre GL JS v5.0.0 does not work with MapLibre GL Leaflet
https://plnkr.co/plunk/4iSagBIN38qRjpRT

Expected behavior
Dragging the map runs smoothly

Observed behavior
Impossible to drag

Kapture.2025-01-02.at.08.55.05.mp4

Quick fix rolling back to previous stable version
MapLibre GL JS v4.7.1 works fine with Leaflet
https://plnkr.co/plunk/aUOgRVH7nc248m1d

[gavinr-maps]

Here is a simpler, front-end only replication case:

• With Maplibre GL JS v4.7.1: https://jsbin.com/yiqedem/4/edit?html,output
  • Expected: Can pan as normal
  • Actual: Can pan as normal ✅
• With Maplibre GL JS v5.0.1: https://jsbin.com/jajeyuy/2/edit?html,output
  • Expected: Can pan as normal
  • Actual: the basemap stays in place while the point layer is moved. https://github.com/user-attachments/assets/08f111c0-e607-4431-a7ef-e0d070df2056

[ianthetechie]

Can confirm the same behavior (tested on 5.0.1 rather than 5.0.0). Here's a similar (mostly minimal) reproducible example in JSFiddle: https://jsfiddle.net/fzr8dtsp/1/

[gavinr-maps]

I've looked into this, and I think the issue is happening on pan where the code in this Leaflet plugin is calling .resize() after setting the transform here:

maplibre-gl-leaflet/leaflet-maplibre-gl.js

Lines 176 to 184 in c7ba89c

	this._transformGL(gl);
	if (gl.transform.width !== size.x || gl.transform.height !== size.y) {
	container.style.width = size.x + 'px';
	container.style.height = size.y + 'px';
	if (gl._resize !== null && gl._resize !== undefined){
	gl._resize();
	} else {
	gl.resize();

I have logged an issue with Maplibre GL JS here: maplibre/maplibre-gl-js#5344.

[gavinr-maps]

Proposal to fix this is here: #66