Support react-map-gl v8 (#135)

RodrigoHamuy · web-flow · commit 9be6c41dccb7 · 2025-02-12T17:07:47.000Z
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,8 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "react-three-map": "0.8.2"
+  },
+  "changesets": []
+}
diff --git a/.changeset/wet-trees-scream.md b/.changeset/wet-trees-scream.md
@@ -0,0 +1,10 @@
+---
+"react-three-map": major
+---
+
+Updated to work with `react-map-gl >= 8.0.0`.
+
+This has the cascade effect of requiring also to upgrade either of the map providers you are using:
+
+- `mapbox-gl >= 3.5.0`
+- `maplibre-gl >= 4.0.0`
diff --git a/package.json b/package.json
@@ -53,11 +53,11 @@
     "happy-dom": "^10.5.2",
     "leva": "^0.9.35",
     "luxon": "^3.3.0",
-    "mapbox-gl": "^3.1.2",
-    "maplibre-gl": "^3.2.0",
+    "mapbox-gl": "^3.9.4",
+    "maplibre-gl": "4.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.7",
+    "react-map-gl": "^8.0.1",
     "suncalc": "^1.9.0",
     "suspend-react": "^0.1.3",
     "three": "^0.159.0",
@@ -70,10 +70,10 @@
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.13",
-    "mapbox-gl": ">=2.15",
-    "maplibre-gl": ">=3.2",
+    "mapbox-gl": ">=3.5.0",
+    "maplibre-gl": ">=4.0.0",
     "react": ">=18.0",
-    "react-map-gl": ">=7.1",
+    "react-map-gl": ">=8.0.0",
     "three": ">=0.133"
   },
   "peerDependenciesMeta": {
diff --git a/src/core/canvas-in-layer/use-render.ts b/src/core/canvas-in-layer/use-render.ts
@@ -15,8 +15,9 @@ export function useRender({
   frameloop?: 'always' | 'demand',
   r3m: R3M
 }) {
-  const render = useFunction((_gl: WebGL2RenderingContext, projViewMx: number[]) => {
-    r3m.viewProjMx.splice(0, 16, ...projViewMx)
+  const render = useFunction((_gl: WebGL2RenderingContext, projViewMx: number[] | {defaultProjectionData: {mainMatrix: Record<string, number>}}) => {
+    const pVMx = 'defaultProjectionData' in projViewMx ? Object.values(projViewMx.defaultProjectionData.mainMatrix) : projViewMx;
+    r3m.viewProjMx.splice(0, 16, ...pVMx)
     const state = useThree.getState();
     const camera = state.camera as PerspectiveCamera;
     const {gl, advance} = state;
diff --git a/src/core/generic-map.ts b/src/core/generic-map.ts
@@ -41,9 +41,9 @@ export interface MapInstance {
 	getPixelRatio?: ()=>number;
 	triggerRepaint(): void;
 	// eslint-disable-next-line @typescript-eslint/ban-types
-	on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
+	on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): void;
 	// eslint-disable-next-line @typescript-eslint/ban-types
-	off<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
+	off<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): void;
 }
 
 /** Generic interface of Mapbox/Maplibre `MapEventType` */
diff --git a/src/mapbox/canvas.tsx b/src/mapbox/canvas.tsx
@@ -2,7 +2,7 @@
 import { extend } from "@react-three/fiber";
 import { MercatorCoordinate } from "mapbox-gl";
 import { memo, useState } from "react";
-import { Layer, useMap } from "react-map-gl";
+import { Layer, useMap } from "react-map-gl/mapbox";
 import * as THREE from "three";
 import { Matrix4Tuple } from "three";
 import { CanvasProps } from "../api/canvas-props";
@@ -16,7 +16,7 @@ extend(THREE);
 
 const fromLngLat = MercatorCoordinate.fromLngLat
 
-/** react`-three-fiber` canvas inside `Mapbox` */
+/** `react-three-fiber` canvas inside `Mapbox` */
 export const Canvas = memo<CanvasProps>(({ overlay, ...props }) => {
 
   const map = useMap().current!.getMap(); // eslint-disable-line @typescript-eslint/no-non-null-assertion
diff --git a/src/maplibre.index.ts b/src/maplibre.index.ts
@@ -2,6 +2,6 @@ import type { Map } from 'maplibre-gl';
 import { useMap as useMapGeneric } from './api/use-map';
 
 export * from './api';
-export * from './mapbox/canvas';
+export * from './maplibre/canvas';
 
 export const useMap = useMapGeneric<Map>;
diff --git a/src/maplibre/canvas.tsx b/src/maplibre/canvas.tsx
@@ -16,7 +16,7 @@ extend(THREE);
 
 const fromLngLat = MercatorCoordinate.fromLngLat
 
-/** react`-three-fiber` canvas inside `MapLibre` */
+/** `react-three-fiber` canvas inside `MapLibre` */
 export const Canvas = memo<CanvasProps>(({ overlay, ...props }) => {
 
   const map = useMap().current!.getMap(); // eslint-disable-line @typescript-eslint/no-non-null-assertion
diff --git a/stories/package.json b/stories/package.json
@@ -15,11 +15,11 @@
     "@types/tz-lookup": "^6.1.2",
     "leva": "^0.9.35",
     "luxon": "^3.4.4",
-    "mapbox-gl": "^3.1.2",
-    "maplibre-gl": "^3.2.0",
+    "mapbox-gl": "^3.9.4",
+    "maplibre-gl": "^5.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.7",
+    "react-map-gl": "^8.0.1",
     "react-three-map": "^0.8.1",
     "suncalc": "^1.9.0",
     "three": "^0.159.0",
diff --git a/stories/src/canvas/mapbox.stories.tsx b/stories/src/canvas/mapbox.stories.tsx
@@ -3,7 +3,7 @@ import { useControls } from "leva";
 import MapboxGl 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";
 
diff --git a/stories/src/mapbox/story-mapbox.tsx b/stories/src/mapbox/story-mapbox.tsx
@@ -3,13 +3,13 @@ import { useControls } from 'leva';
 import Mapbox from "mapbox-gl";
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { FC, PropsWithChildren, memo } from "react";
-import Map, { Layer } from 'react-map-gl';
+import Map, { Layer } from 'react-map-gl/mapbox';
 import { Canvas } from 'react-three-map';
 import { StoryMapProps } from '../story-map';
 
 /** `<Map>` styled for stories */
-export const StoryMapbox: FC<StoryMapProps> = ({
-  latitude, longitude, canvas, children, mapChildren, ...rest
+export const StoryMapbox: FC<Omit<StoryMapProps, 'maplibreChildren'>> = ({
+  latitude, longitude, canvas, children, mapChildren, mapboxChildren, ...rest
 }) => {
 
   const { mapboxToken } = useControls({
@@ -44,6 +44,7 @@ export const StoryMapbox: FC<StoryMapProps> = ({
       mapboxAccessToken={mapboxToken}
     >
       {mapChildren}
+      {mapboxChildren}
       <Canvas latitude={latitude} longitude={longitude} {...canvas}>
         {children}
       </Canvas>
diff --git a/stories/src/maplibre/story-maplibre.tsx b/stories/src/maplibre/story-maplibre.tsx
@@ -7,8 +7,8 @@ import { StoryMapProps } from '../story-map';
 import { Canvas } from 'react-three-map/maplibre';
 
 /** Maplibre `<Map>` styled for stories */
-export const StoryMaplibre: FC<StoryMapProps> = ({
-  latitude, longitude, canvas, mapChildren, children, ...rest
+export const StoryMaplibre: FC<Omit<StoryMapProps, 'mapboxChildren'>> = ({
+  latitude, longitude, canvas, mapChildren, maplibreChildren, children, ...rest
 }) => {
 
   const theme = useLadleContext().globalState.theme;
@@ -19,14 +19,15 @@ export const StoryMaplibre: FC<StoryMapProps> = ({
 
   return <div style={{ height: '100vh', position: 'relative' }}>
     <Map
+        antialias
       mapLib={MapLibre}
-      antialias
       initialViewState={{ latitude, longitude, ...rest }}
       maxPitch={rest.pitch ? Math.min(rest.pitch, 85) : undefined}
       mapStyle={mapStyle}
     >
       <FlyTo latitude={latitude} longitude={longitude} zoom={rest.zoom} />
       {mapChildren}
+      {maplibreChildren}
       <Canvas latitude={latitude} longitude={longitude} {...canvas}>
         {children}
       </Canvas>
diff --git a/stories/src/pivot-controls.stories.tsx b/stories/src/pivot-controls.stories.tsx
@@ -1,8 +1,11 @@
 import { PivotControls, ScreenSizer, Sphere } from "@react-three/drei";
 import { useControls } from "leva";
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
-import { Marker } from "react-map-gl";
-import { useMap, vector3ToCoords } from "react-three-map";
+import { Marker as MapboxMarker } from "react-map-gl/mapbox";
+import { Marker as MaplibreMarker } from "react-map-gl/maplibre";
+import { useMap, 
+  vector3ToCoords
+ } from "react-three-map";
 import { Matrix4, Vector3, Vector3Tuple } from "three";
 import { StoryMap } from "./story-map";
 
@@ -22,10 +25,15 @@ export function Default() {
       {...origin}
       zoom={13}
       pitch={60}
-      mapChildren={(
-        <Marker {...geoPos}>
+      maplibreChildren={(
+        <MaplibreMarker {...geoPos}>
           <div style={{ fontSize: 18 }}>lat: {geoPos.latitude}<br />lon: {geoPos.longitude}</div>
-        </Marker>
+        </MaplibreMarker>
+      )}
+      mapboxChildren={(
+        <MapboxMarker {...geoPos}>
+          <div style={{ fontSize: 18 }}>lat: {geoPos.latitude}<br />lon: {geoPos.longitude}</div>
+        </MapboxMarker>
       )}
     >
       <Move position={position} setPosition={setPosition} />
diff --git a/stories/src/story-map.tsx b/stories/src/story-map.tsx
@@ -20,6 +20,8 @@ export interface StoryMapProps extends PropsWithChildren {
   bearing?: number,
   canvas?: Partial<CanvasProps>,
   mapChildren?: ReactNode,
+  mapboxChildren?: ReactNode,
+  maplibreChildren?: ReactNode,
 }
 
 /** `<Map>` styled for stories */
diff --git a/stories/yarn.lock b/stories/yarn.lock
diff --git a/vite.config.ts b/vite.config.ts
diff --git a/yarn.lock b/yarn.lock
