upgrade react-map-gl

Author: RodrigoHamuy

.env.sample

@@ -0,0 +1 @@
+VITE_MAPBOX_TOKEN=add-your-mapbox-key

example-mapbox/.env.sample

@@ -1 +1 @@
-VITE_MAPBOX_KEY=add-your-mapbox-key
+VITE_MAPBOX_TOKEN=add-your-mapbox-key

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

@@ -38,7 +38,7 @@ const Box: FC<{ position: Vector3 }> = (props) => {
 
 export function BasicExample() {
 
-  const { mapboxToken } = useControls({ mapboxToken: import.meta.env.VITE_MAPBOX_KEY || '' })
+  const { mapboxToken } = useControls({ mapboxToken: import.meta.env.VITE_MAPBOX_TOKEN || '' })
 
   Mapbox.accessToken = mapboxToken;
 

example-mapbox/src/story-map.tsx

@@ -17,7 +17,7 @@ export const StoryMap: FC<StoryMapProps> = ({
   latitude, longitude, zoom = 18, pitch = 60, children
 }) => {
 
-  const { mapboxToken } = useControls({ mapboxToken: import.meta.env.VITE_MAPBOX_KEY || '' })
+  const { mapboxToken } = useControls({ mapboxToken: import.meta.env.VITE_MAPBOX_TOKEN || '' })
 
   const theme = useLadleContext().globalState.theme;
 

maplibre/package.json

@@ -2,6 +2,6 @@
   "internal": true,
   "main": "../dist/maplibre/cjs/main.js",
   "module": "../dist/maplibre/es/main.js",
-  "types": "../src/main-maplibre.ts",
+  "types": "../src/maplibre/index.ts",
   "sideEffects": false
 }

package.json

@@ -4,7 +4,7 @@
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.js",
-  "types": "src/main-mapbox.ts",
+  "types": "src/mapbox/index.ts",
   "sideEffects": false,
   "repository": "https://github.com/RodrigoHamuy/react-three-map",
   "homepage": "https://github.com/RodrigoHamuy/react-three-map",
@@ -14,7 +14,6 @@
   "license": "MIT",
   "author": "RodrigoHamuy",
   "scripts": {
-    "dev": "vite",
     "prebuild": "tsc",
     "build": "yarn build:maplibre && yarn build:mapbox",
     "build:maplibre": "cross-env LIB_MODE=1 MAP_MODE=0 vite build",
@@ -33,7 +32,7 @@
     "@changesets/cli": "^2.26.1",
     "@ladle/react": "^2.13.0",
     "@react-three/drei": "^9.74.5",
-    "@react-three/fiber": "^8.13.3",
+    "@react-three/fiber": "^8.13.4",
     "@types/node": "^20.3.1",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
@@ -50,10 +49,14 @@
     "maplibre-gl": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.0.25",
+    "react-map-gl": "^7.1.0",
     "three": "^0.153.0",
     "three-stdlib": "^2.23.8",
     "typescript": "~5.0.2",
     "vite": "^4.3.9"
+  },
+  "peerDependencies": {
+    "@react-three/fiber": "^8.13.4",
+    "react-map-gl": "^7.1.0"
   }
 }

src/canvas/core/coords-to-matrix.ts src/core/coords-to-matrix.tssrc/canvas/core/coords-to-matrix.ts renamed to src/core/coords-to-matrix.ts

@@ -1,5 +1,16 @@
 // mock of functions used by `react-three-map` from `Maplibre` or `Mapbox`
 
+/** Generic interface of Mapbox/Maplibre `LayerProps` */
+export interface LayerProps {
+	id: string;
+	type: 'custom';
+	renderingMode: '3d';
+	onRemove?(map: MapInstance, gl: WebGLRenderingContext): void;
+	onAdd?(map: MapInstance, gl: WebGLRenderingContext): void;
+	prerender?(gl: WebGLRenderingContext, matrix: number[]): void;
+	render(gl: WebGLRenderingContext, matrix: number[]): void;
+}
+
 /** Generic interface of Mapbox/Maplibre `LngLatLike` */
 export type LngLatLike = {
 	lng: number;
@@ -24,7 +35,7 @@ export interface MercatorCoordinate {
 }
 
 /** Generic interface of Mapbox/Maplibre `Map` */
-export interface Map {
+export interface MapInstance {
 	getCanvas(): HTMLCanvasElement;
 	triggerRepaint(): void;
 	// eslint-disable-next-line @typescript-eslint/ban-types
@@ -41,6 +52,6 @@ export type MapEventType = {
 /** Generic interface of `MapLibreEvent` or `MapBoxEvent` */
 export interface MapEvent<TOrig = unknown> {
 	type: string;
-	target: Map;
+	target: MapInstance;
 	originalEvent: TOrig;
 }