From 5576607c5a8e884cb7adff4e7b933bed8a924cd0 Mon Sep 17 00:00:00 2001 From: FaSheng Gu Date: Wed, 23 Apr 2025 15:39:55 +0800 Subject: [PATCH 1/6] Support maplibre@v5 --- example-maplibre/package.json | 2 +- example-maplibre/src/canvas.basic.stories.tsx | 4 +++- example-maplibre/src/story-map.tsx | 4 +++- src/core/canvas-in-layer/use-render.ts | 2 +- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/example-maplibre/package.json b/example-maplibre/package.json index 31befaa..9e865d1 100644 --- a/example-maplibre/package.json +++ b/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", diff --git a/example-maplibre/src/canvas.basic.stories.tsx b/example-maplibre/src/canvas.basic.stories.tsx index 21869b8..a99aa75 100644 --- a/example-maplibre/src/canvas.basic.stories.tsx +++ b/example-maplibre/src/canvas.basic.stories.tsx @@ -10,7 +10,9 @@ export default { title: 'Canvas' } export function BasicExample() { return
= ({ return
Date: Wed, 23 Apr 2025 16:01:30 +0800 Subject: [PATCH 2/6] update stories --- README.md | 4 ++- example-mapbox/src/canvas.basic.stories.tsx | 2 +- example-mapbox/src/story-map.tsx | 2 +- package.json | 4 +-- stories/package.json | 2 +- stories/src/canvas/maplibre.stories.tsx | 4 ++- stories/src/maplibre/story-maplibre.tsx | 4 ++- stories/yarn.lock | 33 +++++++++------------ yarn.lock | 33 +++++++++------------ 9 files changed, 42 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index ab09603..744456b 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,9 @@ import { Canvas } from "react-three-map/maplibre" function BasicExample() { return =8.13", "mapbox-gl": ">=3.5.0", - "maplibre-gl": ">=4.0.0", + "maplibre-gl": ">=5.0.0", "react": ">=18.0", "react-map-gl": ">=8.0.0", "three": ">=0.133" diff --git a/stories/package.json b/stories/package.json index b9e26eb..99d79ae 100644 --- a/stories/package.json +++ b/stories/package.json @@ -16,7 +16,7 @@ "leva": "^0.9.35", "luxon": "^3.4.4", "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", diff --git a/stories/src/canvas/maplibre.stories.tsx b/stories/src/canvas/maplibre.stories.tsx index 6eaee01..f8141d3 100644 --- a/stories/src/canvas/maplibre.stories.tsx +++ b/stories/src/canvas/maplibre.stories.tsx @@ -13,7 +13,9 @@ export function Maplibre() {
> = ({ return
Date: Wed, 23 Apr 2025 16:14:06 +0800 Subject: [PATCH 3/6] Update type error --- src/core/canvas-in-layer/use-render.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/canvas-in-layer/use-render.ts b/src/core/canvas-in-layer/use-render.ts index d9e2a13..6988751 100644 --- a/src/core/canvas-in-layer/use-render.ts +++ b/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, pVMx); + syncCamera(camera as PerspectiveCamera, origin, pVMx as Matrix4Tuple); gl.resetState(); advance(Date.now() * 0.001, true); if (!frameloop || frameloop === 'always') map.triggerRepaint(); From c64560c3181aaaafb72707234be1d8f7407a8742 Mon Sep 17 00:00:00 2001 From: FaSheng Gu Date: Wed, 23 Apr 2025 16:39:40 +0800 Subject: [PATCH 4/6] Update overlay mode --- src/core/canvas-overlay/sync-camera-fc.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/core/canvas-overlay/sync-camera-fc.tsx b/src/core/canvas-overlay/sync-camera-fc.tsx index 30ea287..40ecafc 100644 --- a/src/core/canvas-overlay/sync-camera-fc.tsx +++ b/src/core/canvas-overlay/sync-camera-fc.tsx @@ -57,7 +57,7 @@ export const SyncCameraFC = memo(({ } }, -Infinity) - const onRender = useFunction((viewProjMx: Matrix4Tuple) => { + const onRender = useFunction((viewProjMx: Matrix4Tuple | {defaultProjectionData: {mainMatrix: Record}}) => { map.triggerRepaint = triggerRepaintOff; if (threeCanvas.width !== mapCanvas.width || threeCanvas.height !== mapCanvas.height) { @@ -70,7 +70,8 @@ export const SyncCameraFC = memo(({ ); } - 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(); From 9b4f9718ad64eada15e44722dadeb863cfc79974 Mon Sep 17 00:00:00 2001 From: Rodri Date: Wed, 23 Apr 2025 09:42:43 +0100 Subject: [PATCH 5/6] Support from maplibre-gl@4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c2de2e0..dd5eea1 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "peerDependencies": { "@react-three/fiber": ">=8.13", "mapbox-gl": ">=3.5.0", - "maplibre-gl": ">=5.0.0", + "maplibre-gl": ">=4.0.0", "react": ">=18.0", "react-map-gl": ">=8.0.0", "three": ">=0.133" From 70ad5126be9b724d9c39ab9e9203d76e14778b9a Mon Sep 17 00:00:00 2001 From: Rodri Date: Wed, 23 Apr 2025 09:44:11 +0100 Subject: [PATCH 6/6] Create thin-bears-train.md --- .changeset/thin-bears-train.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/thin-bears-train.md diff --git a/.changeset/thin-bears-train.md b/.changeset/thin-bears-train.md new file mode 100644 index 0000000..3cfc1a7 --- /dev/null +++ b/.changeset/thin-bears-train.md @@ -0,0 +1,5 @@ +--- +"react-three-map": patch +--- + +Support maplibre@v5