add Mapbox

Author: RodrigoHamuy

index.html

@@ -0,0 +1,32 @@
+import { RenderProps, extend } from "@react-three/fiber";
+import { PropsWithChildren, memo, useMemo } from "react";
+import * as THREE from "three";
+import { coordsToMatrix } from "./core/coords-to-matrix";
+import { InternalCanvas } from "./core/internal-canvas";
+import { MercatorCoordinate } from "mapbox-gl";
+
+extend(THREE);
+
+export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+  longitude: number,
+  latitude: number,
+  altitude?: number,
+  frameloop?: 'always' | 'demand',
+}
+
+/** react`-three-fiber` canvas inside `Mapbox` */
+export const Canvas = memo<CanvasProps>(({
+  longitude, latitude, altitude = 0,
+  frameloop = 'always', ...renderProps
+}) => {
+
+  const m4 = useMemo(() => coordsToMatrix({
+    latitude, longitude, altitude, fromLngLat: MercatorCoordinate.fromLngLat,
+  }), [latitude, longitude, altitude])
+
+  return <InternalCanvas
+    frameloop={frameloop}
+    m4={m4}
+    {...renderProps}
+  />
+})

public/vite.svg

@@ -1,4 +1,4 @@
-// quick mock of functions used by Maplibre and Mapbox
+// mock of functions used by `react-three-map` from `Maplibre` or `Mapbox`
 
 /** Generic interface of Mapbox/Maplibre `LngLatLike` */
 export type LngLatLike = {
@@ -19,7 +19,7 @@ export type FromLngLat = (lngLatLike: LngLatLike, altitude?: number) => Mercator
 export interface MercatorCoordinate {
 	x: number;
 	y: number;
-	z: number;
+	z?: number;
 	meterInMercatorCoordinateUnits(): number;
 }
 

src/canvas/canvas-mapbox.tsx

@@ -0,0 +1 @@
+export * from './canvas/canvas-maplibre';

src/canvas/canvas.tsx renamed to src/canvas/canvas-maplibre.tsx

@@ -3,7 +3,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 import { FC, useRef, useState } from "react";
 import Map from 'react-map-gl';
 import { Mesh } from "three";
-import { Canvas } from "../canvas/canvas";
+import { Canvas } from "../canvas/canvas-maplibre";
 import MapLibre from "maplibre-gl";
 
 export default {title: 'Canvas'}

src/canvas/core/generic-map.ts

@@ -1,7 +1,7 @@
 import { ThemeState, useLadleContext } from "@ladle/react";
 import 'maplibre-gl/dist/maplibre-gl.css';
 import Map from 'react-map-gl';
-import { Canvas } from "../canvas/canvas";
+import { Canvas } from "../canvas/canvas-maplibre";
 import { Canvas as FiberCanvas } from "@react-three/fiber"
 import { MyScene } from "./my-scene";
 import { MapControls } from "@react-three/drei"

src/main-maplibre.ts

@@ -2,7 +2,7 @@ import { Box, Html, Stats } from "@react-three/drei";
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useState } from "react";
 import { MathUtils } from "three";
-import { Canvas } from "../canvas/canvas";
+import { Canvas } from "../canvas/canvas-maplibre";
 import { StoryMap } from "./story-map";
 
 export function Default() {