react-three-map 0.2.1 → 0.3.1

package/maplibre/package.json

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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-three-map",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
-  "module": "dist/es/main.js",
-  "types": "src/main-mapbox.ts",
+  "module": "dist/es/main.mjs",
+  "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",
@@ -22,7 +21,7 @@
     "build:mapbox": "cross-env LIB_MODE=1 MAP_MODE=1 vite build",
     "postbuild:mapbox": "cross-env LIB_MODE=2 MAP_MODE=1 vite build",
     "release": "yarn build && yarn changeset publish",
-    "lint": "eslint src --ext ts,tsx --fix",
+    "lint": "eslint src example-maplibre/src example-mapbox/src --ext ts,tsx --fix",
     "preview": "vite preview",
     "ts": "tsc -w",
     "stories": "yarn ladle serve",
@@ -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,26 @@
     "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",
+    "mapbox-gl": ">=2.15",
+    "maplibre-gl": ">=3.1",
+    "react-map-gl": ">=7.1",
+    "react": ">=18.0",
+    "three": ">=0.133"
+  },
+  "peerDependenciesMeta": {
+    "mapbox-gl": {
+      "optional": true
+    },
+    "maplibre-gl": {
+      "optional": true
+    }
   }
 }

package/src/{canvas/core → core}/generic-map.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,10 +35,12 @@ 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
 	on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
+	// eslint-disable-next-line @typescript-eslint/ban-types
 	off<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
 }
 
@@ -39,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;
 }

package/src/{canvas/core → core}/state-ref.ts

@@ -1,9 +1,9 @@
 import { ReconcilerRoot, RootState } from "@react-three/fiber";
 import { MutableRefObject } from "react";
-import { Map } from "./generic-map";
+import { MapInstance } from "./generic-map";
 
 export type StateRef = MutableRefObject<{
-  map: Map;
+  map: MapInstance;
   root: ReconcilerRoot<HTMLCanvasElement>;
   state?: RootState;
 } | undefined>

package/src/{canvas/core/internal-canvas.tsx → core/use-canvas.tsx}

@@ -1,19 +1,18 @@
 import { RenderProps } from "@react-three/fiber";
-import { PropsWithChildren, memo, useEffect, useId, useRef } from "react";
-import { Layer } from "react-map-gl";
+import { PropsWithChildren, useEffect, useId, useRef } from "react";
 import { Matrix4Tuple } from "three";
 import { StateRef } from "./state-ref";
 import { useOnAdd } from "./use-on-add";
 import { useRender } from "./use-render";
 
-export interface InternalCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+export interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
   frameloop: 'always' | 'demand',
   m4: Matrix4Tuple;
 }
 
-export const InternalCanvas = memo<InternalCanvasProps>(({
+export const useCanvas = (({
   m4, children, frameloop, ...renderProps
-}) => {
+}: useCanvasProps) => {
   const id = useId();
 
   const stateRef: StateRef = useRef();
@@ -28,16 +27,5 @@ export const InternalCanvas = memo<InternalCanvasProps>(({
     stateRef.current.root.render(<>{children}</>);
   }, [stateRef, mounted, children])
 
-  return <Layer
-    id={id}
-    type="custom"
-    renderingMode="3d"
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onAdd={onAdd as any}
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onRemove={onRemove as any}
-    render={render}
-  />
-})
-
-InternalCanvas.displayName = 'InternalCanvas';
+  return { id, onAdd, onRemove, render }
+})

package/src/{canvas/core → core}/use-on-add.ts

@@ -1,7 +1,7 @@
 import { RenderProps, createRoot } from "@react-three/fiber";
-import { Map } from "./generic-map";
 import { useState } from "react";
 import { createEvents } from "./create-events";
+import { MapInstance } from "./generic-map";
 import { StateRef } from "./state-ref";
 import { useFunction } from "./use-function";
 
@@ -9,7 +9,7 @@ export function useOnAdd(ref: StateRef, { frameloop, ...renderProps }: RenderPro
 
   const [mounted, setMounted] = useState(false);
 
-  const onAdd = useFunction((map: Map, gl: WebGLRenderingContext) => {
+  const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {
 
     const canvas = map.getCanvas();
     const root = createRoot(canvas);
@@ -78,7 +78,7 @@ export function useOnAdd(ref: StateRef, { frameloop, ...renderProps }: RenderPro
     state.setSize(canvas.width, canvas.height);
   })
 
-  const onRemove = useFunction((map: Map) => {
+  const onRemove = useFunction((map: MapInstance) => {
     setTimeout(() => {
       if (!ref.current) return;
       ref.current.root.unmount();

package/src/{canvas/canvas-mapbox.tsx → mapbox/canvas.tsx}

@@ -1,9 +1,10 @@
 import { RenderProps, extend } from "@react-three/fiber";
+import { MercatorCoordinate } from "mapbox-gl";
 import { PropsWithChildren, memo, useMemo } from "react";
+import { Layer } from "react-map-gl";
 import * as THREE from "three";
-import { coordsToMatrix } from "./core/coords-to-matrix";
-import { InternalCanvas } from "./core/internal-canvas";
-import { MercatorCoordinate } from "mapbox-gl";
+import { coordsToMatrix } from "../core/coords-to-matrix";
+import { useCanvas } from "../core/use-canvas";
 
 extend(THREE);
 
@@ -14,7 +15,7 @@ export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frame
   frameloop?: 'always' | 'demand',
 }
 
-/** react`-three-fiber` canvas inside `Mapbox` */
+/** react`-three-fiber` canvas inside `MapLibre` */
 export const Canvas = memo<CanvasProps>(({
   longitude, latitude, altitude = 0,
   frameloop = 'always', ...renderProps
@@ -22,11 +23,16 @@ export const Canvas = memo<CanvasProps>(({
 
   const m4 = useMemo(() => coordsToMatrix({
     latitude, longitude, altitude, fromLngLat: MercatorCoordinate.fromLngLat,
-  }), [latitude, longitude, altitude])
+  }), [latitude, longitude, altitude]);
+
+  const { id, onAdd, onRemove, render } = useCanvas({ m4, frameloop, ...renderProps });
 
-  return <InternalCanvas
-    frameloop={frameloop}
-    m4={m4}
-    {...renderProps}
+  return <Layer
+    id={id}
+    type="custom"
+    renderingMode="3d"
+    onAdd={onAdd}
+    onRemove={onRemove}
+    render={render}
   />
 })

package/src/mapbox/index.ts

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

package/src/{canvas/canvas-maplibre.tsx → maplibre/canvas.tsx}

@@ -1,9 +1,10 @@
 import { RenderProps, extend } from "@react-three/fiber";
 import { MercatorCoordinate } from "maplibre-gl";
 import { PropsWithChildren, memo, useMemo } from "react";
+import { Layer } from "react-map-gl/maplibre";
 import * as THREE from "three";
-import { coordsToMatrix } from "./core/coords-to-matrix";
-import { InternalCanvas } from "./core/internal-canvas";
+import { coordsToMatrix } from "../core/coords-to-matrix";
+import { useCanvas } from "../core/use-canvas";
 
 extend(THREE);
 
@@ -22,11 +23,16 @@ export const Canvas = memo<CanvasProps>(({
 
   const m4 = useMemo(() => coordsToMatrix({
     latitude, longitude, altitude, fromLngLat: MercatorCoordinate.fromLngLat,
-  }), [latitude, longitude, altitude])
+  }), [latitude, longitude, altitude]);
 
-  return <InternalCanvas
-    frameloop={frameloop}
-    m4={m4}
-    {...renderProps}
+  const { id, onAdd, onRemove, render } = useCanvas({ m4, frameloop, ...renderProps });
+
+  return <Layer
+    id={id}
+    type="custom"
+    renderingMode="3d"
+    onAdd={onAdd}
+    onRemove={onRemove}
+    render={render}
   />
 })

package/src/maplibre/index.ts

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

package/src/stories/comparison.stories.tsx

@@ -1,41 +1,38 @@
-import { ThemeState, useLadleContext } from "@ladle/react";
-import 'maplibre-gl/dist/maplibre-gl.css';
-import Map from 'react-map-gl';
-import { Canvas } from "../canvas/canvas-maplibre";
-import { Canvas as FiberCanvas } from "@react-three/fiber"
+import { MapControls } from "@react-three/drei";
+import { Canvas as FiberCanvas } from "@react-three/fiber";
+import { useControls } from "leva";
 import { MyScene } from "./my-scene";
-import { MapControls } from "@react-three/drei"
-import MapLibre from "maplibre-gl";
+import { StoryMap } from "./story-map";
 
 export function WithMap() {
-  const theme = useLadleContext().globalState.theme;
-  const mapStyle = theme === ThemeState.Dark
-    ? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
-    : "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
-  return <div style={{ height: '100vh' }}>
-    <Map
-      mapLib={MapLibre}
-      antialias
-      initialViewState={{
-        latitude: 51.5073218,
-        longitude: -0.1276473,
-        zoom: 18,
-        pitch: 60,
-      }}
-      mapStyle={mapStyle}
-    >
-      <Canvas latitude={51.5073218} longitude={-0.1276473} shadows="variance">
-        <MyScene />
-      </Canvas>
-    </Map>
-  </div>
+  const showCamHelper = useShowCamHelper()
+  return <StoryMap
+    latitude={51.5073218}
+    longitude={-0.1276473}
+    zoom={18}
+    pitch={60}
+    canvas={{ shadows: 'variance' }}
+  >
+    <MyScene showCamHelper={showCamHelper} />
+  </StoryMap>
 }
 
 export const WithoutMap = () => {
+  const showCamHelper = useShowCamHelper()
   return <div style={{ height: '100vh' }}>
-    <FiberCanvas camera={{position: [100,100,100]}} shadows="variance">
-      <MyScene />    
+    <FiberCanvas camera={{ position: [100, 100, 100] }} shadows="variance">
+      <MyScene showCamHelper={showCamHelper} />
       <MapControls makeDefault />
     </FiberCanvas>
   </div>
+}
+
+const useShowCamHelper = () => {
+  const { showCamHelper } = useControls({
+    showCamHelper: {
+      value: false,
+      label: 'show camera helper'
+    }
+  });
+  return showCamHelper
 }

package/src/stories/html-on-top.stories.tsx

@@ -1,26 +1,21 @@
-import { Box, Html, Stats } from "@react-three/drei";
-import 'maplibre-gl/dist/maplibre-gl.css';
+import { Box, Html } from "@react-three/drei";
 import { useState } from "react";
 import { MathUtils } from "three";
-import { Canvas } from "../canvas/canvas-maplibre";
 import { StoryMap } from "./story-map";
 
 export function Default() {
 
   const [hovered, hover] = useState(false);
 
-  return <StoryMap>
-    <Canvas latitude={51} longitude={0} frameloop="demand">
-      <Html>ola</Html>
-      <Box
-        args={[500, 500, 500]}
-        position={[0, 250, 0]}
-        rotation={[0, 45 * MathUtils.DEG2RAD, 0]}
-        onPointerOver={() => hover(true)}
-        onPointerOut={() => hover(false)}
-        material-color={hovered ? 'purple' : 'orange'}
-      />
-      <Stats />
-    </Canvas>
+  return <StoryMap latitude={51} longitude={0} zoom={13} pitch={60}>
+    <Html center position={[0, 250, 0]} style={{ textAlign: 'center', fontSize: '2em', width: '10em', lineHeight: '1.5em' }}><i>Some</i> <b>HTML</b><br />content!</Html>
+    <Box
+      args={[500, 500, 500]}
+      position={[0, 250, 0]}
+      rotation={[0, 45 * MathUtils.DEG2RAD, 0]}
+      onPointerOver={() => hover(true)}
+      onPointerOut={() => hover(false)}
+      material-color={hovered ? 'purple' : 'orange'}
+    />
   </StoryMap>
 }

package/src/stories/mapbox/story-mapbox.tsx

@@ -0,0 +1,58 @@
+import { ThemeState, useLadleContext } from '@ladle/react';
+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 { Canvas } from 'react-three-map';
+import { StoryMapProps } from '../story-map';
+
+/** `<Map>` styled for stories */
+export const StoryMapbox: FC<StoryMapProps> = ({
+  latitude, longitude, zoom = 18, pitch = 60, canvas, children
+}) => {
+
+  const { mapboxToken } = useControls({
+    mapboxToken: {
+      value: import.meta.env.VITE_MAPBOX_TOKEN || '',
+      label: 'mapbox token',
+    }
+  })
+
+  const theme = useLadleContext().globalState.theme;
+
+  const mapStyle = theme === ThemeState.Dark
+    ? "mapbox://styles/mapbox/dark-v11"
+    : "mapbox://styles/mapbox/streets-v12";
+
+  Mapbox.accessToken = mapboxToken;
+
+  return <div style={{ height: '100vh', position: 'relative' }}>
+    {!mapboxToken && <Center>Add a mapbox token to load this component</Center>}
+    {!!mapboxToken && <Map
+      antialias
+      initialViewState={{
+        latitude,
+        longitude,
+        zoom,
+        pitch,
+      }}
+      mapStyle={mapStyle}
+      mapboxAccessToken={mapboxToken}
+    >
+      <Canvas latitude={latitude} longitude={longitude} {...canvas}>
+        {children}
+      </Canvas>
+    </Map>}
+  </div>
+}
+
+const Center = ({ children }: PropsWithChildren) => (
+  <div style={{
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }}>{children}</div>
+)

package/src/stories/mapbox-example.stories.tsx

@@ -0,0 +1,84 @@
+import { useFrame, Vector3 } from "@react-three/fiber";
+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 { Canvas } from "react-three-map";
+import { Mesh } from "three";
+
+export default { title: 'Canvas' }
+
+export function MapboxExample() {
+
+  const { mapboxToken } = useControls({
+    mapboxToken: {
+      value: import.meta.env.VITE_MAPBOX_TOKEN || '',
+      label: 'mapbox token',
+    }
+  })
+
+  Mapbox.accessToken = mapboxToken;
+
+  return <div style={{ height: '100vh' }}>
+    {!mapboxToken && <Center>Add a mapbox token to load this component</Center>}
+    {!!mapboxToken && <Map
+      antialias
+      initialViewState={{
+        latitude: 51,
+        longitude: 0,
+        zoom: 13,
+        pitch: 60,
+      }}
+      mapStyle="mapbox://styles/mapbox/streets-v12"
+    >
+      <Canvas latitude={51} longitude={0}>
+        <hemisphereLight
+          args={["#ffffff", "#60666C"]}
+          position={[1, 4.5, 3]}
+        />
+        <object3D scale={500}>
+          <Box position={[-1.2, 1, 0]} />
+          <Box position={[1.2, 1, 0]} />
+        </object3D>
+      </Canvas>
+    </Map>}
+  </div>
+}
+
+const Center = ({ children }: PropsWithChildren) => (
+  <div style={{
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }}>{children}</div>
+)
+
+const Box: FC<{ position: Vector3 }> = (props) => {
+  // This reference gives us direct access to the THREE.Mesh object
+  const ref = useRef<Mesh>(null)
+  // Hold state for hovered and clicked events
+  const [hovered, hover] = useState(false)
+  const [clicked, click] = useState(false)
+  // Subscribe this component to the render-loop, rotate the mesh every frame
+  useFrame((_state, delta) => {
+    if (!ref.current) return;
+    ref.current.rotation.x += delta;
+    ref.current.rotation.z -= delta;
+  })
+  // Return the view, these are regular Threejs elements expressed in JSX
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      scale={clicked ? 1.5 : 1}
+      onClick={() => click(!clicked)}
+      onPointerOver={() => hover(true)}
+      onPointerOut={() => hover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}

package/src/stories/maplibre/story-maplibre.tsx

@@ -0,0 +1,32 @@
+import { ThemeState, useLadleContext } from '@ladle/react';
+import MapLibre from "maplibre-gl";
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { FC } from "react";
+import Map from 'react-map-gl/maplibre';
+import { StoryMapProps } from '../story-map';
+import { Canvas } from 'react-three-map/maplibre';
+
+/** Maplibre `<Map>` styled for stories */
+export const StoryMaplibre: FC<StoryMapProps> = ({
+  latitude, longitude, zoom, pitch, canvas, children
+}) => {
+
+  const theme = useLadleContext().globalState.theme;
+
+  const mapStyle = theme === ThemeState.Dark
+    ? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+    : "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
+
+  return <div style={{ height: '100vh', position: 'relative' }}>
+    <Map
+      mapLib={MapLibre}
+      antialias
+      initialViewState={{ latitude, longitude, zoom, pitch, }}
+      mapStyle={mapStyle}
+    >
+      <Canvas latitude={latitude} longitude={longitude} {...canvas}>
+        {children}
+      </Canvas>
+      </Map>
+  </div>
+}

package/src/stories/{canvas.basic.stories.tsx → maplibre-example.stories.tsx}

@@ -1,13 +1,38 @@
 import { useFrame, Vector3 } from "@react-three/fiber";
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { FC, useRef, useState } from "react";
-import Map from 'react-map-gl';
+import Map from 'react-map-gl/maplibre';
 import { Mesh } from "three";
-import { Canvas } from "../canvas/canvas-maplibre";
-import MapLibre from "maplibre-gl";
+import { Canvas } from "react-three-map/maplibre";
 
 export default {title: 'Canvas'}
 
+export function AMaplibreExample() {
+  return <div style={{ height: '100vh' }}>
+    <Map
+      antialias
+      initialViewState={{
+        latitude: 51,
+        longitude: 0,
+        zoom: 13,
+        pitch: 60,
+      }}
+      mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+    >
+      <Canvas latitude={51} longitude={0}>
+        <hemisphereLight
+          args={["#ffffff", "#60666C"]}
+          position={[1, 4.5, 3]}
+        />
+        <object3D scale={500}>
+          <Box position={[-1.2, 1, 0]} />
+          <Box position={[1.2, 1, 0]} />
+        </object3D>
+      </Canvas>
+    </Map>
+  </div>
+}
+
 const Box : FC<{position: Vector3}> = (props) => {
   // This reference gives us direct access to the THREE.Mesh object
   const ref = useRef<Mesh>(null)
@@ -33,31 +58,4 @@ const Box : FC<{position: Vector3}> = (props) => {
       <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
     </mesh>
   )
-}
-
-export function BasicExample() {
-  return <div style={{ height: '100vh' }}>
-    <Map
-      mapLib={MapLibre}
-      antialias
-      initialViewState={{
-        latitude: 51,
-        longitude: 0,
-        zoom: 13,
-        pitch: 60,
-      }}
-      mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
-    >
-      <Canvas latitude={51} longitude={0}>
-        <hemisphereLight
-          args={["#ffffff", "#60666C"]}
-          position={[1, 4.5, 3]}
-        />
-        <object3D scale={500}>
-          <Box position={[-1.2, 1, 0]} />
-          <Box position={[1.2, 1, 0]} />
-        </object3D>
-      </Canvas>
-    </Map>
-  </div>
 }