react-three-map 0.1.4 → 0.2.0

package/src/canvas/core/coords-to-matrix.ts

@@ -0,0 +1,20 @@
+import { Euler, Matrix4, Quaternion, Vector3 } from "three";
+import { FromLngLat } from "./generic-map";
+
+const quat = new Quaternion();
+const euler = new Euler();
+const pos = new Vector3();
+const scale = new Vector3();
+const m4 = new Matrix4();
+
+/** calculate Matrix4 from coordinates */
+export function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {
+  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat
+}) {
+  const center = fromLngLat([longitude, latitude], altitude);
+  const scaleUnit = center.meterInMercatorCoordinateUnits();
+  pos.set(center.x, center.y, center.z || 0);
+  scale.set(scaleUnit, -scaleUnit, scaleUnit);
+  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));
+  return m4.compose(pos, quat, scale).toArray();
+}

package/src/canvas/{create-events.ts → core/create-events.ts}

@@ -17,7 +17,7 @@ const DOM_EVENTS = {
 } as const;
 
 /** ThreeLayer event manager for MapLibre and Mapbox */
-export function createEvents() : RenderProps<HTMLCanvasElement>["events"] {
+export function createEvents(): RenderProps<HTMLCanvasElement>["events"] {
   return (store: UseBoundStore<RootState>) => {
     const { handlePointer } = createFiberEvents(store);
     return {
@@ -50,7 +50,7 @@ export function createEvents() : RenderProps<HTMLCanvasElement>["events"] {
       connect: (target: HTMLElement) => {
         const { set, events } = store.getState();
         events.disconnect?.();
-        set((state) => ({ events: { ...state.events, connected: target } }));
+        set((state) => ({ events: { ...state.events, connected: target.parentNode } }));
         Object.entries(events.handlers ?? []).forEach(([name, event]) => {
           const [eventName, passive] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];
           target.addEventListener(eventName, event, { passive });

package/src/canvas/core/generic-map.test.ts

@@ -0,0 +1,2 @@
+// add type tests to make sure our generic functions
+// can be satisfied by Mapbox and Maplibre

package/src/canvas/core/generic-map.ts

@@ -0,0 +1,44 @@
+// mock of functions used by `react-three-map` from `Maplibre` or `Mapbox`
+
+/** Generic interface of Mapbox/Maplibre `LngLatLike` */
+export type LngLatLike = {
+	lng: number;
+	lat: number;
+} | {
+	lon: number;
+	lat: number;
+} | [
+	number,
+	number
+];
+
+/** Generic interface of Mapbox/Maplibre `static MercatorCoordinate.fromLngLat` */
+export type FromLngLat = (lngLatLike: LngLatLike, altitude?: number) => MercatorCoordinate;
+
+/** Generic interface of Mapbox/Maplibre typeof `MercatorCoordinate` */
+export interface MercatorCoordinate {
+	x: number;
+	y: number;
+	z?: number;
+	meterInMercatorCoordinateUnits(): number;
+}
+
+/** Generic interface of Mapbox/Maplibre `Map` */
+export interface Map {
+	getCanvas(): HTMLCanvasElement;
+	triggerRepaint(): void;
+	on<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): this;
+}
+
+/** Generic interface of Mapbox/Maplibre `MapEventType` */
+export type MapEventType = {
+	resize: MapEvent;
+};
+
+/** Generic interface of `MapLibreEvent` or `MapBoxEvent` */
+export interface MapEvent<TOrig = unknown> {
+	type: string;
+	target: Map;
+	originalEvent: TOrig;
+}

package/src/canvas/core/internal-canvas.tsx

@@ -0,0 +1,43 @@
+import { RenderProps } from "@react-three/fiber";
+import { PropsWithChildren, memo, useEffect, useId, useRef } from "react";
+import { Layer } from "react-map-gl";
+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 {
+  frameloop: 'always' | 'demand',
+  m4: Matrix4Tuple;
+}
+
+export const InternalCanvas = memo<InternalCanvasProps>(({
+  m4, children, frameloop, ...renderProps
+}) => {
+  const id = useId();
+
+  const stateRef: StateRef = useRef();
+
+  const { onAdd, onRemove, mounted } = useOnAdd(stateRef, { frameloop, ...renderProps });
+
+  const render = useRender(m4, stateRef, frameloop);
+
+  useEffect(() => {
+    if (!mounted) return;
+    if (!stateRef.current) return;
+    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';

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

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

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

@@ -1,28 +1,23 @@
 import { RenderProps, createRoot } from "@react-three/fiber";
+import { Map } from "./generic-map";
 import { useState } from "react";
-import { MapInstance } from "react-map-gl";
 import { createEvents } from "./create-events";
 import { StateRef } from "./state-ref";
 import { useFunction } from "./use-function";
 
-export function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElement>) {
+export function useOnAdd(ref: StateRef, { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>) {
 
   const [mounted, setMounted] = useState(false);
 
-  const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext)=>{
-   
+  const onAdd = useFunction((map: Map, gl: WebGLRenderingContext) => {
+
     const canvas = map.getCanvas();
-    const invalidate = () => {
-      map.triggerRepaint();
-      return 0;
-    }
-    const root = createRoot(canvas, invalidate);
+    const root = createRoot(canvas);
     root.configure({
-      frameloop: "demand",
       dpr: window.devicePixelRatio,
-      shadows: true,
       events: createEvents(),
       ...renderProps,
+      frameloop: 'never',
       gl: {
         context: gl,
         depth: true,
@@ -31,16 +26,29 @@ export function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElem
         ...renderProps?.gl,
       },
       onCreated: (state) => {
+
+        if (frameloop === 'demand') {
+          state.set({
+            frameloop,
+            invalidate: () => {
+              map.triggerRepaint();
+            }
+          })
+        }
+
         ref.current = {
           state,
           map,
           root,
         }
+
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         state.gl.forceContextLoss = () => { };
-      },
-      camera: {
-        matrixAutoUpdate: false,
+
+        // we update the camera on create rather than on config
+        // because otherwise some components may use it too early
+        // and get NaN values they can't recover from (drei HTML)
+        state.camera.matrixAutoUpdate = false;
       },
       size: {
         width: canvas.clientWidth,
@@ -58,25 +66,25 @@ export function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElem
 
     map.on('resize', onResize)
 
-    setTimeout(()=>setMounted(true));
-    
+    setTimeout(() => setMounted(true));
+
   })
 
-  const onResize = useFunction(()=>{
-    if(!ref.current?.state) return;
+  const onResize = useFunction(() => {
+    if (!ref.current?.state) return;
     const state = ref.current.state;
     const map = ref.current.map;
     const canvas = map.getCanvas();
     state.setSize(canvas.width, canvas.height);
   })
 
-  const onRemove = useFunction((map: MapInstance)=>{
-    setTimeout(()=>{
-      if(!ref.current) return;
+  const onRemove = useFunction((map: Map) => {
+    setTimeout(() => {
+      if (!ref.current) return;
       ref.current.root.unmount();
-      map.off(onRemove);
+      map.off('resize', onResize)
     })
   })
 
-  return {onAdd, onRemove, mounted};
+  return { onAdd, onRemove, mounted };
 }

package/src/canvas/core/use-render.ts

@@ -0,0 +1,25 @@
+import { Matrix4, Matrix4Tuple } from "three";
+import { StateRef } from "./state-ref";
+import { useFunction } from "./use-function";
+
+const mx = new Matrix4();
+
+export function useRender(
+  m4: Matrix4Tuple, stateRef: StateRef, frameloop: 'always' | 'demand'
+) {
+
+  const render = useFunction((_gl: WebGL2RenderingContext, matrix: number[]) => {
+    if (!stateRef.current?.state) return;
+    const camera = stateRef.current.state.camera;
+    const gl = stateRef.current.state.gl;
+    const advance = stateRef.current.state.advance;
+    camera.projectionMatrix.fromArray(matrix).multiply(mx.fromArray(m4));
+    camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
+    gl.resetState();
+    advance(Date.now() * 0.001, true);
+    if (frameloop === 'always') stateRef.current.map.triggerRepaint();
+  })
+
+  return render;
+
+}

package/src/main-mapbox.ts

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

package/src/main-maplibre.ts

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

package/src/stories/canvas.basic.stories.tsx

@@ -0,0 +1,63 @@
+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 { Mesh } from "three";
+import { Canvas } from "../canvas/canvas-maplibre";
+import MapLibre from "maplibre-gl";
+
+export default {title: 'Canvas'}
+
+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>
+  )
+}
+
+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>
+}

package/src/stories/{canvas.stories.tsx → comparison.stories.tsx}

@@ -1,10 +1,11 @@
 import { ThemeState, useLadleContext } from "@ladle/react";
 import 'maplibre-gl/dist/maplibre-gl.css';
-import Map from 'react-map-gl/maplibre';
-import { Canvas } from "../canvas/canvas";
+import Map from 'react-map-gl';
+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"
+import MapLibre from "maplibre-gl";
 
 export function WithMap() {
   const theme = useLadleContext().globalState.theme;
@@ -13,6 +14,7 @@ export function WithMap() {
     : "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
   return <div style={{ height: '100vh' }}>
     <Map
+      mapLib={MapLibre}
       antialias
       initialViewState={{
         latitude: 51.5073218,
@@ -22,7 +24,7 @@ export function WithMap() {
       }}
       mapStyle={mapStyle}
     >
-      <Canvas latitude={51.5073218} longitude={-0.1276473}>
+      <Canvas latitude={51.5073218} longitude={-0.1276473} shadows="variance">
         <MyScene />
       </Canvas>
     </Map>
@@ -31,7 +33,7 @@ export function WithMap() {
 
 export const WithoutMap = () => {
   return <div style={{ height: '100vh' }}>
-    <FiberCanvas camera={{position: [100,100,100]}} shadows="basic">
+    <FiberCanvas camera={{position: [100,100,100]}} shadows="variance">
       <MyScene />    
       <MapControls makeDefault />
     </FiberCanvas>

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

@@ -0,0 +1,26 @@
+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-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>
+  </StoryMap>
+}

package/src/stories/my-scene.tsx

@@ -1,5 +1,6 @@
 import { Box, Plane, useHelper } from "@react-three/drei";
 import { MeshProps, useFrame, useThree } from '@react-three/fiber';
+import { useControls } from "leva";
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useCallback, useRef, useState } from 'react';
 import { CameraHelper, MathUtils, Mesh, OrthographicCamera } from "three";
@@ -8,8 +9,8 @@ export function MyScene() {
   return <>
     <Lights />
     <Floor />
-    <MyBox position={[-8* 3, 8*1.5, 0]} />
-    <MyBox position={[8*3, 8*1.5, 0]} />
+    <MyBox position={[-8 * 3, 8 * 1.5, 0]} />
+    <MyBox position={[8 * 3, 8 * 1.5, 0]} />
   </>
 }
 
@@ -17,18 +18,18 @@ export function MyScene() {
 function MyBox(props: MeshProps) {
   const [hovered, hover] = useState(false);
   const mesh = useRef<Mesh>(null)
-  const invalidate = useThree(st=>st.invalidate);
+  const invalidate = useThree(st => st.invalidate);
 
-  const onOver = useCallback(()=>{
+  const onOver = useCallback(() => {
     hover(true);
   }, [])
 
-  const onOut = useCallback(()=>{
+  const onOut = useCallback(() => {
     hover(false);
   }, [])
 
-  useFrame((_st, dt)=>{
-    if(!mesh.current) return;
+  useFrame((_st, dt) => {
+    if (!mesh.current) return;
     mesh.current.rotateY(dt);
     invalidate();
   })
@@ -54,23 +55,29 @@ function MyBox(props: MeshProps) {
 }
 function Lights() {
   const cam = useRef<OrthographicCamera>(null);
+  const noCam = useRef<OrthographicCamera>(null);
+  const { showCamHelper } = useControls({
+    showCamHelper: {
+      value: false,
+      label: 'show camera helper'
+    }
+  });
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  useHelper(cam as any, CameraHelper)
+  useHelper((showCamHelper ? cam : noCam) as any, CameraHelper)
   const camSize = 100;
   return <>
     <ambientLight intensity={0.5} />
-    <directionalLight 
+    <directionalLight
       castShadow
       position={[2.5, 50, 5]}
       intensity={1.5}
       shadow-mapSize={1024}
-      shadow-bias={-0.005}
     >
       <orthographicCamera
         ref={cam}
         attach="shadow-camera"
         args={[-camSize, camSize, -camSize, camSize, 0.1, 100]}
-        rotation={[0,90*MathUtils.DEG2RAD,0]}
+        rotation={[0, 90 * MathUtils.DEG2RAD, 0]}
       />
     </directionalLight>
     <pointLight position={[-10, 0, -20]} color="white" intensity={1} />

package/src/stories/render-on-demand.stories.tsx

@@ -2,9 +2,10 @@ import { ThemeState, useLadleContext } from "@ladle/react";
 import { Box, Stats } from "@react-three/drei";
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useState } from "react";
-import Map from 'react-map-gl/maplibre';
+import Map from 'react-map-gl';
 import { MathUtils } from "three";
-import { Canvas } from "../canvas/canvas";
+import { Canvas } from "../canvas/canvas-maplibre";
+import MapLibre from "maplibre-gl";
 
 export function Default() {
 
@@ -18,6 +19,7 @@ export function Default() {
 
   return <div style={{ height: '100vh', position: 'relative' }}>
     <Map
+      mapLib={MapLibre}
       antialias
       initialViewState={{
         latitude: 51,
@@ -27,11 +29,11 @@ export function Default() {
       }}
       mapStyle={mapStyle}
     >
-      <Canvas latitude={51} longitude={0}>
+      <Canvas latitude={51} longitude={0} frameloop="demand">
         <Box
-          args={[500,500,500]}
-          position={[0,250,0]}
-          rotation={[0,45 * MathUtils.DEG2RAD,0]}
+          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'}
@@ -39,7 +41,7 @@ export function Default() {
         <Stats />
       </Canvas>
     </Map>
-    <div style={{position: 'absolute', top: 0, right: 0}}>
+    <div style={{ position: 'absolute', top: 0, right: 0, left: 80, background: '#ffffffc2', padding: 5 }}>
       Hover over the box, it will only render once to change colour, or when you move the camera. Look at the stats to confirm.
     </div>
   </div>

package/src/stories/story-map.tsx

@@ -0,0 +1,40 @@
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { FC, PropsWithChildren } from "react"
+import MapLibre from "maplibre-gl";
+import Map from 'react-map-gl';
+import { useLadleContext, ThemeState } from '@ladle/react';
+
+export interface StoryMapProps extends PropsWithChildren {
+  latitude?: number,
+  longitude?: number,
+  zoom?: number,
+  pitch?: number,
+}
+
+/** `<Map>` styled for stories */
+export const StoryMap: FC<StoryMapProps> = ({
+  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: 51,
+        longitude: 0,
+        zoom: 13,
+        pitch: 60,
+      }}
+      mapStyle={mapStyle}
+    >
+      {children}
+      </Map>
+  </div>
+}

package/dist/cjs/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/es/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/src/canvas/canvas.tsx

@@ -1,49 +0,0 @@
-import { RenderProps, extend } from "@react-three/fiber";
-import { PropsWithChildren, memo, useEffect, useId, useMemo, useRef } from "react";
-import { Layer } from "react-map-gl/maplibre";
-import * as THREE from "three";
-import { coordsToMatrix } from "./coords-to-matrix";
-import { StateRef } from "./state-ref";
-import { useOnAdd } from "./use-on-add";
-import { useRender } from "./use-render";
-
-extend(THREE);
-
-export interface CanvasProps extends RenderProps<HTMLCanvasElement>, PropsWithChildren {
-  longitude: number,
-  latitude: number,
-  altitude?: number
-}
-
-/** react`-three-fiber` canvas inside `MapLibre` */
-export const Canvas = memo<CanvasProps>(({
-  longitude, latitude, altitude = 0,
-  children, ...renderProps
-})=>{
-  const id = useId();
-  
-  const ref : StateRef = useRef();
-
-  const m4 = useMemo(()=>coordsToMatrix({
-    latitude, longitude, altitude
-  }), [latitude, longitude, altitude])
-
-  const {onAdd, onRemove, mounted} = useOnAdd(ref, renderProps);
-
-  const render = useRender(m4, ref);
-
-  useEffect(()=>{
-    if(!mounted) return;
-    if(!ref.current) return;
-    ref.current.root.render(<>{children}</>);
-  }, [ref, mounted, children])
-
-  return <Layer
-    id={id}
-    type="custom"
-    renderingMode="3d"
-    onAdd={onAdd}
-    onRemove={onRemove}
-    render={render}
-  />
-})

package/src/canvas/coords-to-matrix.ts

@@ -1,19 +0,0 @@
-import { MercatorCoordinate } from "maplibre-gl";
-import { Euler, Matrix4, Quaternion, Vector3 } from "three";
-
-const quat = new Quaternion();
-const euler = new Euler();
-const pos = new Vector3();
-const scale = new Vector3();
-
-/** calculate Matrix4 from coordinates */
-export function coordsToMatrix ({ longitude, latitude, altitude }: {
-  longitude: number, latitude: number, altitude: number
-}) {
-  const center = MercatorCoordinate.fromLngLat([longitude, latitude], altitude);
-  const scaleUnit = center.meterInMercatorCoordinateUnits();
-  pos.set(center.x, center.y, center.z || 0);
-  scale.set(scaleUnit, -scaleUnit, scaleUnit);
-  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));  
-  return new Matrix4().compose(pos, quat, scale);
-}