Support maplibre@v5 (#150)

Author: woyehenni

.changeset/thin-bears-train.md

@@ -0,0 +1,5 @@
+---
+"react-three-map": patch
+---
+
+Support maplibre@v5

README.md

@@ -73,7 +73,9 @@ import { Canvas } from "react-three-map/maplibre"
 
 function BasicExample() {
   return <Map
-    antialias
+    canvasContextAttributes={{
+      antialias: true,
+    }}
     initialViewState={{
       latitude: 51,
       longitude: 0,

example-mapbox/src/canvas.basic.stories.tsx

@@ -3,7 +3,7 @@ import { useControls } from "leva";
 import Mapbox from "mapbox-gl";
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { FC, PropsWithChildren, useRef, useState } from "react";
-import Map from 'react-map-gl';
+import Map from 'react-map-gl/mapbox';
 import { Canvas } from "react-three-map";
 import { Mesh } from "three";
 

example-mapbox/src/story-map.tsx

@@ -3,7 +3,7 @@ import { useControls } from 'leva';
 import Mapbox from "mapbox-gl";
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { FC, PropsWithChildren } from "react";
-import Map from 'react-map-gl';
+import Map from 'react-map-gl/mapbox';
 
 export interface StoryMapProps extends PropsWithChildren {
   latitude: number,

example-maplibre/package.json

@@ -11,7 +11,7 @@
     "@react-three/drei": "^9.77.10",
     "@react-three/fiber": "^8.13.4",
     "leva": "^0.9.35",
-    "maplibre-gl": "^4.7.1",
+    "maplibre-gl": "^5.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "8.0.1",

example-maplibre/src/canvas.basic.stories.tsx

@@ -10,7 +10,9 @@ export default { title: 'Canvas' }
 export function BasicExample() {
   return <div style={{ height: '100vh' }}>
     <Map
-      antialias
+      canvasContextAttributes={{
+        antialias: true,
+      }}
       initialViewState={{
         latitude: 51,
         longitude: 0,

example-maplibre/src/story-map.tsx

@@ -23,7 +23,9 @@ export const StoryMap: FC<StoryMapProps> = ({
 
   return <div style={{ height: '100vh', position: 'relative' }}>
     <Map
-      antialias
+      canvasContextAttributes={{
+        antialias: true,
+      }}
       initialViewState={{
         latitude,
         longitude,

package.json

@@ -54,7 +54,7 @@
     "leva": "^0.9.35",
     "luxon": "^3.3.0",
     "mapbox-gl": "^3.9.4",
-    "maplibre-gl": "4.7.1",
+    "maplibre-gl": "^5.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^8.0.1",

src/core/canvas-in-layer/use-render.ts

@@ -21,7 +21,7 @@ export function useRender({
     const state = useThree.getState();
     const camera = state.camera as PerspectiveCamera;
     const {gl, advance} = state;
-    syncCamera(camera as PerspectiveCamera, origin, projViewMx as Matrix4Tuple);
+    syncCamera(camera as PerspectiveCamera, origin, pVMx as Matrix4Tuple);
     gl.resetState();
     advance(Date.now() * 0.001, true);
     if (!frameloop || frameloop === 'always') map.triggerRepaint();

src/core/canvas-overlay/sync-camera-fc.tsx

@@ -57,7 +57,7 @@ export const SyncCameraFC = memo<SyncCameraFCProps>(({
     }
   }, -Infinity)
 
-  const onRender = useFunction((viewProjMx: Matrix4Tuple) => {
+  const onRender = useFunction((viewProjMx: Matrix4Tuple | {defaultProjectionData: {mainMatrix: Record<string, number>}}) => {
     map.triggerRepaint = triggerRepaintOff;
 
     if (threeCanvas.width !== mapCanvas.width || threeCanvas.height !== mapCanvas.height) {
@@ -70,7 +70,8 @@ export const SyncCameraFC = memo<SyncCameraFCProps>(({
       );
     }
 
-    r3m.viewProjMx = viewProjMx;
+    const pVMx = 'defaultProjectionData' in viewProjMx ? Object.values(viewProjMx.defaultProjectionData.mainMatrix) : viewProjMx;
+    r3m.viewProjMx = pVMx as Matrix4Tuple;
     if (!ready.current && onReady) {
       ready.current = true;
       onReady();