fix: react-maplibre - support maplibre-gl v6

.github/workflows/test.yml

@@ -16,7 +16,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        maplibre: ['^4.0.0', '^5.0.0']
+        maplibre: ['^4.0.0', '^5.0.0', '^6.0.0']
     permissions:
       checks: write
       contents: read

modules/react-maplibre/package.json

@@ -33,7 +33,7 @@
     "@maplibre/maplibre-gl-style-spec": "^19.2.1"
   },
   "devDependencies": {
-    "maplibre-gl": "^5.0.0"
+    "maplibre-gl": "^6.0.0"
   },
   "peerDependencies": {
     "maplibre-gl": ">=4.0.0",

modules/react-maplibre/src/components/layer.ts

@@ -35,25 +35,25 @@ function updateLayer(map: MapInstance, id: string, props: LayerProps, prevProps:
     const prevLayout = prevProps.layout || {};
     for (const key in layout) {
       if (!deepEqual(layout[key], prevLayout[key])) {
-        map.setLayoutProperty(id, key, layout[key]);
+        map.setLayoutProperty(id, key as any, layout[key]);
       }
     }
     for (const key in prevLayout) {
       if (!layout.hasOwnProperty(key)) {
-        map.setLayoutProperty(id, key, undefined);
+        map.setLayoutProperty(id, key as any, undefined);
       }
     }
   }
   if (paint !== prevProps.paint) {
     const prevPaint = prevProps.paint || {};
     for (const key in paint) {
       if (!deepEqual(paint[key], prevPaint[key])) {
-        map.setPaintProperty(id, key, paint[key]);
+        map.setPaintProperty(id, key as any, paint[key]);
       }
     }
     for (const key in prevPaint) {
       if (!paint.hasOwnProperty(key)) {
-        map.setPaintProperty(id, key, undefined);
+        map.setPaintProperty(id, key as any, undefined);
       }
     }
   }

modules/react-maplibre/src/maplibre/maplibre.ts

@@ -1,6 +1,7 @@
 import {
   transformToViewState,
   applyViewStateToTransform,
+  getTransformLike,
   updateZoomConstraint,
   updatePitchConstraint
 } from '../utils/transform';
@@ -25,6 +26,7 @@
   ProjectionSpecification
 } from '../types/style-spec';
 import type {MapInstance} from '../types/lib';
+import type {CameraUpdateTransformFunction, MapEventType} from 'maplibre-gl';
 import type {
   MapCallbacks,
   ViewStateChangeEvent,
@@ -281,7 +283,7 @@
     if (map.isStyleLoaded()) {
       map.fire('load');
     } else {
       map.once('style.load', () => map.fire('load'));
     }
 
     // Force reload
@@ -332,7 +334,16 @@
     }
 
     // add listeners
-    map.transformCameraUpdate = this._onCameraUpdate;
+    const mapWithCameraUpdate = map as MapInstance & {
+      setTransformCameraUpdate?: (value: CameraUpdateTransformFunction | null) => void;
+      transformCameraUpdate?: CameraUpdateTransformFunction | null;
+    };
+    if (typeof mapWithCameraUpdate.setTransformCameraUpdate === 'function') {
+      // maplibre-gl v6+
+      mapWithCameraUpdate.setTransformCameraUpdate(this._onCameraUpdate);
+    } else {
+      mapWithCameraUpdate.transformCameraUpdate = this._onCameraUpdate;
+    }
     map.on('style.load', () => {
       // Map style has changed, this would have wiped out all settings from props
       this._styleComponents = {
@@ -349,13 +360,13 @@
       this._updateStyleComponents(this.props);
     });
     for (const eventName in pointerEvents) {
-      map.on(eventName, this._onPointerEvent);
+      map.on(eventName as keyof MapEventType, this._onPointerEvent);
     }
     for (const eventName in cameraEvents) {
-      map.on(eventName, this._onCameraEvent);
+      map.on(eventName as keyof MapEventType, this._onCameraEvent);
     }
     for (const eventName in otherEvents) {
-      map.on(eventName, this._onEvent);
+      map.on(eventName as keyof MapEventType, this._onEvent);
     }
     this._map = map;
   }
@@ -402,7 +413,8 @@
     const {viewState} = nextProps;
     if (viewState) {
       const map = this._map;
-      if (viewState.width !== map.transform.width || viewState.height !== map.transform.height) {
+      const canvas = map.getCanvas();
+      if (viewState.width !== canvas.clientWidth || viewState.height !== canvas.clientHeight) {
         map.resize();
         return true;
       }
@@ -418,7 +430,7 @@
    */
   private _updateViewState(nextProps: MaplibreProps): boolean {
     const map = this._map;
-    const tr = map.transform;
+    const tr = getTransformLike(map);
     const isMoving = map.isMoving();
 
     // Avoid manipulating the real transform when interaction/animation is ongoing
@@ -512,7 +524,7 @@
    * 1. They can not be applied right away. Certain conditions (style loaded, source loaded, etc.) must be met
    * 2. They can be overwritten by mapStyle
    */
   private _updateStyleComponents({light, projection, sky, terrain}: MaplibreProps): void {
     const map = this._map;
     const currProps = this._styleComponents;
     // We can safely manipulate map style once it's loaded
@@ -573,7 +585,7 @@
     if (this._internalUpdate) {
       return;
     }
-    e.viewState = this._propsedCameraUpdate || transformToViewState(this._map.transform);
+    e.viewState = this._propsedCameraUpdate || transformToViewState(getTransformLike(this._map));
     // @ts-ignore
     const cb = this.props[cameraEvents[e.type]];
     if (cb) {

modules/react-maplibre/src/types/events.ts

@@ -10,21 +10,25 @@ import type {
   MapLayerMouseEvent,
   MapTouchEvent,
   MapLayerTouchEvent,
+  MapEventType,
   MapStyleDataEvent,
   MapSourceDataEvent,
-  MapWheelEvent,
-  MapLibreZoomEvent as MapBoxZoomEvent
+  MapWheelEvent
 } from 'maplibre-gl';
 
+// MapLibre renamed this type from `MapLibreZoomEvent` (v4/v5) to
+// `MapBoxZoomEvent` (v6). The event map is exported under the same name
+// across supported versions.
+export type MapBoxZoomEvent = MapEventType['boxzoomstart' | 'boxzoomend' | 'boxzoomcancel'];
+
 export type {
   MapLibreEvent as MapEvent,
   MapLayerMouseEvent,
   MapTouchEvent,
   MapLayerTouchEvent,
   MapStyleDataEvent,
   MapSourceDataEvent,
-  MapWheelEvent,
-  MapBoxZoomEvent
+  MapWheelEvent
 };
 
 export type MapCallbacks = {

modules/react-maplibre/src/utils/transform.ts

@@ -4,6 +4,23 @@ import type {TransformLike} from '../types/internal';
 import type {MapInstance} from '../types/lib';
 import {deepEqual} from './deep-equal';
 
+/**
+ * maplibre-gl v6 removed the public `map.transform` property in favor of
+ * discrete getters. Reconstruct a TransformLike snapshot from those getters
+ * so it works across maplibre-gl v4/v5/v6.
+ */
+export function getTransformLike(map: MapInstance): TransformLike {
+  return {
+    center: map.getCenter(),
+    zoom: map.getZoom(),
+    bearing: map.getBearing(),
+    pitch: map.getPitch(),
+    // @ts-ignore getCenterElevation does not exist before v5.0.0
+    elevation: map.getCenterElevation?.() ?? 0,
+    padding: map.getPadding()
+  };
+}
+
 /**
  * Capture a transform's current state
  * @param transform

modules/react-maplibre/test/utils/transform.spec.js

@@ -1,15 +1,68 @@
 import test from 'tape-promise/tape';
 import {
+  getTransformLike,
   transformToViewState,
   applyViewStateToTransform,
   updateZoomConstraint,
   updatePitchConstraint
 } from '@vis.gl/react-maplibre/utils/transform';
-import maplibregl from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
+
+const {LngLat} = maplibregl.default || maplibregl;
+
+test('getTransformLike', t => {
+  const center = new LngLat(-122.45, 37.78);
+  const padding = {top: 1, left: 2, right: 3, bottom: 4};
+  const map = {
+    get transform() {
+      throw new Error('map.transform should not be accessed');
+    },
+    getCenter: () => center,
+    getZoom: () => 10.5,
+    getBearing: () => -70,
+    getPitch: () => 30,
+    getCenterElevation: () => 100,
+    getPadding: () => padding
+  };
+
+  const tr = getTransformLike(map);
+
+  t.is(tr.center, center, 'center retains its LngLat instance');
+  t.is(tr.padding, padding, 'padding retains its identity');
+  t.deepEqual(
+    tr,
+    {
+      center,
+      zoom: 10.5,
+      bearing: -70,
+      pitch: 30,
+      elevation: 100,
+      padding
+    },
+    'camera state is read from public getters'
+  );
+
+  t.end();
+});
+
+test('getTransformLike#pre-v5', t => {
+  const center = new LngLat(-122.45, 37.78);
+  const map = {
+    getCenter: () => center,
+    getZoom: () => 10.5,
+    getBearing: () => -70,
+    getPitch: () => 30,
+    getPadding: () => ({top: 0, left: 0, right: 0, bottom: 0})
+  };
+
+  t.is(getTransformLike(map).elevation, 0, 'missing center elevation defaults to zero');
+
+  t.end();
+});
 
 test('transformToViewState', t => {
   const tr = {
-    center: new maplibregl.LngLat(-122.45, 37.78),
+    center: new LngLat(-122.45, 37.78),
     zoom: 10.5,
     bearing: -70,
     pitch: 30,
@@ -30,7 +83,7 @@ test('transformToViewState', t => {
 
 test('applyViewStateToTransform', t => {
   const tr = {
-    center: new maplibregl.LngLat(-122.45, 37.78),
+    center: new LngLat(-122.45, 37.78),
     zoom: 10.5,
     bearing: -70,
     pitch: 30,
@@ -44,7 +97,7 @@ test('applyViewStateToTransform', t => {
   t.deepEqual(
     changed,
     {
-      center: new maplibregl.LngLat(-10, 5)
+      center: new LngLat(-10, 5)
     },
     'center changed'
   );

test/browser.js

@@ -1,5 +1,12 @@
 /* global window */
 import test from 'tape';
+import {getVersion, setWorkerUrl} from 'maplibre-gl';
+
+// MapLibre v6 resolves its worker relative to import.meta.url. Vite prebundles
+// dependencies into .vite/deps, where the sibling worker file is not present.
+if (Number.parseInt(getVersion(), 10) >= 6) {
+  setWorkerUrl('/node_modules/maplibre-gl/dist/maplibre-gl-worker.mjs');
+}
 
 test.onFinish(window.browserTestDriver_finish);
 test.onFailure(window.browserTestDriver_fail);