react-three-map 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # react-three-map
 
+## 0.7.0
+
+### Minor Changes
+
+- 1c52c0f: `<Canvas>` props accepts `id?: string` and `beforeId?: string` to set the MapLibre/Mapbox layer.
+
+### Patch Changes
+
+- 748d7a7: Fix issues on DPR or browser zoom changes.
+
+## 0.6.3
+
+### Patch Changes
+
+- a5b94b6: Fix ThreeJS sync on Mapbox resize.
+
 ## 0.6.2
 
 ### Patch Changes

package/dist/cjs/main.js

@@ -251,21 +251,9 @@ function useOnAdd(fromLngLat2, { frameloop, ...renderProps }) {
     setTimeout(() => setMounted(true));
   });
   const onResize = useFunction(() => {
-    if (!r3mRef.current.map)
-      return;
     if (!r3mRef.current.state)
       return;
-    const canvas = r3mRef.current.map.getCanvas();
-    if (canvas.classList.contains("mapboxgl-canvas")) {
-      r3mRef.current.state.size.width = canvas.clientWidth;
-      r3mRef.current.state.size.height = canvas.clientHeight;
-    } else {
-      r3mRef.current.state.setSize(
-        canvas.clientWidth,
-        canvas.clientHeight,
-        false
-      );
-    }
+    r3mRef.current.state.set({});
   });
   const onRemove = useFunction(() => {
     if (!r3mRef.current.root)
@@ -301,6 +289,8 @@ function useRender(origin, r3mRef, frameloop) {
     const r3m = r3mRef.current;
     if (!r3m.state || !r3m.map)
       return;
+    r3m.state.size.width = r3m.state.gl.domElement.clientWidth;
+    r3m.state.size.height = r3m.state.gl.domElement.clientHeight;
     const camera = r3m.state.camera;
     const gl = r3m.state.gl;
     const advance = r3m.state.advance;
@@ -333,12 +323,13 @@ function useCanvas({
 }
 fiber.extend(THREE__namespace);
 const fromLngLat = mapboxGl.MercatorCoordinate.fromLngLat;
-const Canvas = react.memo((props) => {
-  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+const Canvas = react.memo(({ id, beforeId, ...props }) => {
+  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactMapGl.Layer,
     {
-      id,
+      id: id || reactId,
+      beforeId,
       type: "custom",
       renderingMode: "3d",
       onAdd,

package/dist/es/main10.mjs

@@ -1,23 +1,24 @@
-import { syncCamera } from "./main6.mjs";
-import { useFunction } from "./main13.mjs";
-function useRender(origin, r3mRef, frameloop) {
-  const render = useFunction((_gl, mapCamMx) => {
-    const r3m = r3mRef.current;
-    if (!r3m.state || !r3m.map)
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useId, useEffect } from "react";
+import { useOnAdd } from "./main12.mjs";
+const useCreateRoot = ({
+  children,
+  frameloop,
+  fromLngLat,
+  ...renderProps
+}) => {
+  const id = useId();
+  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
+  useEffect(() => {
+    if (!mounted)
       return;
-    const camera = r3m.state.camera;
-    const gl = r3m.state.gl;
-    const advance = r3m.state.advance;
-    r3m.mapCamMx = mapCamMx;
-    syncCamera(camera, origin, mapCamMx);
-    gl.resetState();
-    advance(Date.now() * 1e-3, true);
-    if (frameloop === "always")
-      r3m.map.triggerRepaint();
-  });
-  return render;
-}
+    if (!r3mRef.current.root)
+      return;
+    r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
+  }, [r3mRef, mounted, children]);
+  return { id, onAdd, onRemove, r3mRef };
+};
 export {
-  useRender
+  useCreateRoot
 };
 //# sourceMappingURL=main10.mjs.map

package/dist/es/main10.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main10.mjs","sources":["../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n  origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n  const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n    const r3m = r3mRef.current;\n    if (!r3m.state || !r3m.map) return;\n    const camera = r3m.state.camera;\n    const gl = r3m.state.gl;\n    const advance = r3m.state.advance;\n    r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n    syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (frameloop === 'always') r3m.map.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":[],"mappings":";;AAMgB,SAAA,UACd,QAAsB,QAAoC,WAC1D;AAEA,QAAM,SAAS,YAAY,CAAC,KAA6B,aAAuB;AAC9E,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAI,SAAS,CAAC,IAAI;AAAK;AACtB,UAAA,SAAS,IAAI,MAAM;AACnB,UAAA,KAAK,IAAI,MAAM;AACf,UAAA,UAAU,IAAI,MAAM;AAC1B,QAAI,WAAW;AACJ,eAAA,QAA6B,QAAQ,QAAwB;AACxE,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAChC,QAAI,cAAc;AAAU,UAAI,IAAI;EAAe,CACpD;AAEM,SAAA;AAET;"}
+{"version":3,"file":"main10.mjs","sources":["../../src/core/use-create-root.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId } from \"react\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useOnAdd } from \"./use-on-add\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  fromLngLat: FromLngLat\n}\n\nexport const useCreateRoot = (({\n  children, frameloop, fromLngLat, ...renderProps\n}: useCanvasProps) => {\n\n  const id = useId();\n\n  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.render(<>\n      {children}\n    </>);\n  }, [r3mRef, mounted, children])\n\n  return { id, onAdd, onRemove, r3mRef }\n})"],"names":[],"mappings":";;;AAUO,MAAM,gBAAiB,CAAC;AAAA,EAC7B;AAAA,EAAU;AAAA,EAAW;AAAA,EAAY,GAAG;AACtC,MAAsB;AAEpB,QAAM,KAAK;AAEX,QAAM,EAAE,OAAO,UAAU,SAAS,OAAO,IAAI,SAAS,YAAY,EAAE,WAAW,GAAG,YAAa,CAAA;AAE/F,YAAU,MAAM;AACd,QAAI,CAAC;AAAS;AACV,QAAA,CAAC,OAAO,QAAQ;AAAM;AAC1B,WAAO,QAAQ,KAAK,OAAO,oBAAA,UAAA,EACxB,SACH,CAAA,CAAG;AAAA,EACF,GAAA,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}

package/dist/es/main11.mjs

@@ -1,18 +1,25 @@
-import { Quaternion, Euler, Vector3, Matrix4 } from "three";
-const quat = new Quaternion();
-const euler = new Euler();
-const pos = new Vector3();
-const scale = new Vector3();
-const m4 = new Matrix4();
-function coordsToMatrix({ longitude, latitude, altitude, 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 * 0.5, 0, 0));
-  return m4.compose(pos, quat, scale).toArray();
+import { syncCamera } from "./main6.mjs";
+import { useFunction } from "./main13.mjs";
+function useRender(origin, r3mRef, frameloop) {
+  const render = useFunction((_gl, mapCamMx) => {
+    const r3m = r3mRef.current;
+    if (!r3m.state || !r3m.map)
+      return;
+    r3m.state.size.width = r3m.state.gl.domElement.clientWidth;
+    r3m.state.size.height = r3m.state.gl.domElement.clientHeight;
+    const camera = r3m.state.camera;
+    const gl = r3m.state.gl;
+    const advance = r3m.state.advance;
+    r3m.mapCamMx = mapCamMx;
+    syncCamera(camera, origin, mapCamMx);
+    gl.resetState();
+    advance(Date.now() * 1e-3, true);
+    if (frameloop === "always")
+      r3m.map.triggerRepaint();
+  });
+  return render;
 }
 export {
-  coordsToMatrix
+  useRender
 };
 //# sourceMappingURL=main11.mjs.map

package/dist/es/main11.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main11.mjs","sources":["../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n  return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":[],"mappings":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AACzB,MAAI,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AACzC,QAAM,IAAI,WAAW,CAAC,WAAW,SAAS;AACrC,OAAA,aAAa,MAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC;AAChD,SAAO,GAAG,QAAQ,KAAK,MAAM,KAAK,EAAE;AACtC;"}
+{"version":3,"file":"main11.mjs","sources":["../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n  origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n  const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n    const r3m = r3mRef.current;\n    if (!r3m.state || !r3m.map) return;\n    r3m.state.size.width = r3m.state.gl.domElement.clientWidth;\n    r3m.state.size.height = r3m.state.gl.domElement.clientHeight;\n    const camera = r3m.state.camera;\n    const gl = r3m.state.gl;\n    const advance = r3m.state.advance;\n    r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n    syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (frameloop === 'always') r3m.map.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":[],"mappings":";;AAMgB,SAAA,UACd,QAAsB,QAAoC,WAC1D;AAEA,QAAM,SAAS,YAAY,CAAC,KAA6B,aAAuB;AAC9E,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAI,SAAS,CAAC,IAAI;AAAK;AAC5B,QAAI,MAAM,KAAK,QAAQ,IAAI,MAAM,GAAG,WAAW;AAC/C,QAAI,MAAM,KAAK,SAAS,IAAI,MAAM,GAAG,WAAW;AAC1C,UAAA,SAAS,IAAI,MAAM;AACnB,UAAA,KAAK,IAAI,MAAM;AACf,UAAA,UAAU,IAAI,MAAM;AAC1B,QAAI,WAAW;AACJ,eAAA,QAA6B,QAAQ,QAAwB;AACxE,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAChC,QAAI,cAAc;AAAU,UAAI,IAAI;EAAe,CACpD;AAEM,SAAA;AAET;"}

package/dist/es/main12.mjs

@@ -54,21 +54,9 @@ function useOnAdd(fromLngLat, { frameloop, ...renderProps }) {
     setTimeout(() => setMounted(true));
   });
   const onResize = useFunction(() => {
-    if (!r3mRef.current.map)
-      return;
     if (!r3mRef.current.state)
       return;
-    const canvas = r3mRef.current.map.getCanvas();
-    if (canvas.classList.contains("mapboxgl-canvas")) {
-      r3mRef.current.state.size.width = canvas.clientWidth;
-      r3mRef.current.state.size.height = canvas.clientHeight;
-    } else {
-      r3mRef.current.state.setSize(
-        canvas.clientWidth,
-        canvas.clientHeight,
-        false
-      );
-    }
+    r3mRef.current.state.set({});
   });
   const onRemove = useFunction(() => {
     if (!r3mRef.current.root)

package/dist/es/main12.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main12.mjs","sources":["../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n  fromLngLat: FromLngLat,\n  { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n  const [mounted, setMounted] = useState(false);\n\n  const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n  const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n    const canvas = map.getCanvas();\n    const root = createRoot(canvas);\n    root.configure({\n      dpr: window.devicePixelRatio,\n      events: createEvents(),\n      ...renderProps,\n      frameloop: 'never',\n      gl: {\n        context: gl,\n        depth: true,\n        autoClear: false,\n        antialias: true,\n        ...renderProps?.gl,\n      },\n      onCreated: (state) => {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        state.gl.forceContextLoss = () => { };\n      },\n      camera: {\n        matrixAutoUpdate: false,\n        near: 0,\n      },\n      size: {\n        width: canvas.clientWidth,\n        height: canvas.clientHeight,\n        top: 0,\n        left: 0,\n        updateStyle: false,\n        ...renderProps?.size,\n      },\n    });\n\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    const store = _roots.get(canvas)!.store;\n\n    r3mRef.current.map = map;\n    r3mRef.current.root = root;\n    r3mRef.current.state = store.getState();\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    store.setState({ r3m: r3mRef.current } as any);\n\n    if (frameloop === 'demand') {\n      store.setState({\n        frameloop,\n        invalidate: () => {\n          map.triggerRepaint();\n        },\n      })\n    }\n\n    map.on('resize', onResize)\n\n    setTimeout(() => setMounted(true));\n\n  })\n\n  const onResize = useFunction(() => {\n    if (!r3mRef.current.map) return;\n    if (!r3mRef.current.state) return;\n    const canvas = r3mRef.current.map.getCanvas();\n\n    if (canvas.classList.contains('mapboxgl-canvas')) {\n      // if mapbox\n      r3mRef.current.state.size.width = canvas.clientWidth;\n      r3mRef.current.state.size.height = canvas.clientHeight;\n    } else {\n      // if maplibre\n      r3mRef.current.state.setSize(\n        canvas.clientWidth,\n        canvas.clientHeight,\n        false\n      );\n    }\n\n  })\n\n  const onRemove = useFunction(() => {\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.unmount();\n    r3mRef.current.root = undefined;\n    if (!r3mRef.current.map) return;\n    r3mRef.current.map.off('resize', onResize)\n  })\n\n  // on unmount\n  useEffect(() => () => onRemove(), [onRemove])\n\n  return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEI,QAAA,GAAG,UAAU,QAAQ;AAEd,eAAA,MAAM,WAAW,IAAI,CAAC;AAAA,EAAA,CAElC;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAK;AACrB,QAAA,CAAC,OAAO,QAAQ;AAAO;AAC3B,UAAM,SAAS,OAAO,QAAQ,IAAI,UAAU;AAE5C,QAAI,OAAO,UAAU,SAAS,iBAAiB,GAAG;AAEhD,aAAO,QAAQ,MAAM,KAAK,QAAQ,OAAO;AACzC,aAAO,QAAQ,MAAM,KAAK,SAAS,OAAO;AAAA,IAAA,OACrC;AAEL,aAAO,QAAQ,MAAM;AAAA,QACnB,OAAO;AAAA,QACP,OAAO;AAAA,QACP;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA,CAED;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAM;AACnB,WAAA,QAAQ,KAAK;AACpB,WAAO,QAAQ,OAAO;AAClB,QAAA,CAAC,OAAO,QAAQ;AAAK;AACzB,WAAO,QAAQ,IAAI,IAAI,UAAU,QAAQ;AAAA,EAAA,CAC1C;AAGD,YAAU,MAAM,MAAM,SAAY,GAAA,CAAC,QAAQ,CAAC;AAE5C,SAAO,EAAE,OAAO,UAAU,SAAS,OAAO;AAC5C;"}
+{"version":3,"file":"main12.mjs","sources":["../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n  fromLngLat: FromLngLat,\n  { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n  const [mounted, setMounted] = useState(false);\n\n  const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n  const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n    const canvas = map.getCanvas();\n    const root = createRoot(canvas);\n    root.configure({\n      dpr: window.devicePixelRatio,\n      events: createEvents(),\n      ...renderProps,\n      frameloop: 'never',\n      gl: {\n        context: gl,\n        depth: true,\n        autoClear: false,\n        antialias: true,\n        ...renderProps?.gl,\n      },\n      onCreated: (state) => {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        state.gl.forceContextLoss = () => { };\n      },\n      camera: {\n        matrixAutoUpdate: false,\n        near: 0,\n      },\n      size: {\n        width: canvas.clientWidth,\n        height: canvas.clientHeight,\n        top: 0,\n        left: 0,\n        updateStyle: false,\n        ...renderProps?.size,\n      },\n    });\n\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    const store = _roots.get(canvas)!.store;\n\n    r3mRef.current.map = map;\n    r3mRef.current.root = root;\n    r3mRef.current.state = store.getState();\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    store.setState({ r3m: r3mRef.current } as any);\n\n    if (frameloop === 'demand') {\n      store.setState({\n        frameloop,\n        invalidate: () => {\n          map.triggerRepaint();\n        },\n      })\n    }\n\n    map.on('resize', onResize)\n\n    setTimeout(() => setMounted(true));\n\n  })\n\n  const onResize = useFunction(() => {\n    if (!r3mRef.current.state) return;\n    // because we update size out of zustand, we just want to let it know that something changed\n    r3mRef.current.state.set({});\n  })\n\n  const onRemove = useFunction(() => {\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.unmount();\n    r3mRef.current.root = undefined;\n    if (!r3mRef.current.map) return;\n    r3mRef.current.map.off('resize', onResize)\n  })\n\n  // on unmount\n  useEffect(() => () => onRemove(), [onRemove])\n\n  return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEI,QAAA,GAAG,UAAU,QAAQ;AAEd,eAAA,MAAM,WAAW,IAAI,CAAC;AAAA,EAAA,CAElC;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAO;AAE3B,WAAO,QAAQ,MAAM,IAAI,CAAE,CAAA;AAAA,EAAA,CAC5B;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAM;AACnB,WAAA,QAAQ,KAAK;AACpB,WAAO,QAAQ,OAAO;AAClB,QAAA,CAAC,OAAO,QAAQ;AAAK;AACzB,WAAO,QAAQ,IAAI,IAAI,UAAU,QAAQ;AAAA,EAAA,CAC1C;AAGD,YAAU,MAAM,MAAM,SAAY,GAAA,CAAC,QAAQ,CAAC;AAE5C,SAAO,EAAE,OAAO,UAAU,SAAS,OAAO;AAC5C;"}

package/dist/es/main4.mjs

@@ -7,12 +7,13 @@ import * as THREE from "three";
 import { useCanvas } from "./main8.mjs";
 extend(THREE);
 const fromLngLat = MercatorCoordinate.fromLngLat;
-const Canvas = memo((props) => {
-  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+const Canvas = memo(({ id, beforeId, ...props }) => {
+  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
   return /* @__PURE__ */ jsx(
     Layer,
     {
-      id,
+      id: id || reactId,
+      beforeId,
       type: "custom",
       renderingMode: "3d",
       onAdd,

package/dist/es/main4.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main4.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport * as THREE from \"three\";\nimport { CanvasProps } from \"../api/canvas-props\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>((props) => {\n\n  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\n\n  return <Layer\n    id={id}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})"],"names":[],"mappings":";;;;;;;AAQA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAGzB,MAAA,SAAS,KAAkB,CAAC,UAAU;AAE3C,QAAA,EAAE,IAAI,OAAO,UAAU,OAAA,IAAW,UAAU,EAAE,GAAG,OAAO,WAAA,CAAY;AAEnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}
+{"version":3,"file":"main4.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport * as THREE from \"three\";\nimport { CanvasProps } from \"../api/canvas-props\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>(({id, beforeId, ...props}) => {\n\n  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\n\n  return <Layer\n    id={id || reactId}\n    beforeId={beforeId}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})\n"],"names":[],"mappings":";;;;;;;AAQA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAGzB,MAAA,SAAS,KAAkB,CAAC,EAAC,IAAI,UAAU,GAAG,YAAW;AAEpE,QAAM,EAAE,IAAI,SAAS,OAAO,UAAU,WAAW,UAAU,EAAE,GAAG,OAAO,WAAY,CAAA;AAE5E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN,IAAI,MAAM;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}

package/dist/es/main7.mjs

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { coordsToMatrix } from "./main11.mjs";
+import { coordsToMatrix } from "./main9.mjs";
 function useCoords({ latitude, longitude, altitude, fromLngLat }) {
   const m4 = useMemo(() => coordsToMatrix({
     latitude,

package/dist/es/main8.mjs

@@ -1,6 +1,6 @@
 import { useCoords } from "./main7.mjs";
-import { useCreateRoot } from "./main9.mjs";
-import { useRender } from "./main10.mjs";
+import { useCreateRoot } from "./main10.mjs";
+import { useRender } from "./main11.mjs";
 function useCanvas({
   longitude,
   latitude,

package/dist/es/main8.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main8.mjs","sources":["../../src/core/use-canvas.ts"],"sourcesContent":["import { CanvasProps } from \"../api/canvas-props\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useCoords } from \"./use-coords\";\nimport { useCreateRoot } from \"./use-create-root\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends CanvasProps {\n  fromLngLat: FromLngLat,\n}\n\nexport function useCanvas({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always',\n  fromLngLat,\n  ...renderProps\n}: useCanvasProps) {\n\n  const m4 = useCoords({\n    latitude, longitude, altitude, fromLngLat,\n  });\n\n  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });\n\n  const render = useRender(m4, r3mRef, frameloop);\n\n  return { id, onAdd, onRemove, render }\n}"],"names":[],"mappings":";;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAW;AAAA,EAAU,WAAW;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAmB;AAEjB,QAAM,KAAK,UAAU;AAAA,IACnB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAED,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI,cAAc,EAAE,WAAW,YAAY,GAAG,YAAa,CAAA;AAE/F,QAAM,SAAS,UAAU,IAAI,QAAQ,SAAS;AAE9C,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
+{"version":3,"file":"main8.mjs","sources":["../../src/core/use-canvas.ts"],"sourcesContent":["import { CanvasProps } from \"../api/canvas-props\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useCoords } from \"./use-coords\";\nimport { useCreateRoot } from \"./use-create-root\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends Omit<CanvasProps, 'id'|'beforeId'> {\n  fromLngLat: FromLngLat,\n}\n\nexport function useCanvas({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always',\n  fromLngLat,\n  ...renderProps\n}: useCanvasProps) {\n\n  const m4 = useCoords({\n    latitude, longitude, altitude, fromLngLat,\n  });\n\n  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });\n\n  const render = useRender(m4, r3mRef, frameloop);\n\n  return { id, onAdd, onRemove, render }\n}"],"names":[],"mappings":";;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAW;AAAA,EAAU,WAAW;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAmB;AAEjB,QAAM,KAAK,UAAU;AAAA,IACnB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAED,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI,cAAc,EAAE,WAAW,YAAY,GAAG,YAAa,CAAA;AAE/F,QAAM,SAAS,UAAU,IAAI,QAAQ,SAAS;AAE9C,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}

package/dist/es/main9.mjs

@@ -1,24 +1,18 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useId, useEffect } from "react";
-import { useOnAdd } from "./main12.mjs";
-const useCreateRoot = ({
-  children,
-  frameloop,
-  fromLngLat,
-  ...renderProps
-}) => {
-  const id = useId();
-  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
-  useEffect(() => {
-    if (!mounted)
-      return;
-    if (!r3mRef.current.root)
-      return;
-    r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
-  }, [r3mRef, mounted, children]);
-  return { id, onAdd, onRemove, r3mRef };
-};
+import { Quaternion, Euler, Vector3, Matrix4 } from "three";
+const quat = new Quaternion();
+const euler = new Euler();
+const pos = new Vector3();
+const scale = new Vector3();
+const m4 = new Matrix4();
+function coordsToMatrix({ longitude, latitude, altitude, 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 * 0.5, 0, 0));
+  return m4.compose(pos, quat, scale).toArray();
+}
 export {
-  useCreateRoot
+  coordsToMatrix
 };
 //# sourceMappingURL=main9.mjs.map

package/dist/es/main9.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main9.mjs","sources":["../../src/core/use-create-root.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId } from \"react\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useOnAdd } from \"./use-on-add\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  fromLngLat: FromLngLat\n}\n\nexport const useCreateRoot = (({\n  children, frameloop, fromLngLat, ...renderProps\n}: useCanvasProps) => {\n\n  const id = useId();\n\n  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.render(<>\n      {children}\n    </>);\n  }, [r3mRef, mounted, children])\n\n  return { id, onAdd, onRemove, r3mRef }\n})"],"names":[],"mappings":";;;AAUO,MAAM,gBAAiB,CAAC;AAAA,EAC7B;AAAA,EAAU;AAAA,EAAW;AAAA,EAAY,GAAG;AACtC,MAAsB;AAEpB,QAAM,KAAK;AAEX,QAAM,EAAE,OAAO,UAAU,SAAS,OAAO,IAAI,SAAS,YAAY,EAAE,WAAW,GAAG,YAAa,CAAA;AAE/F,YAAU,MAAM;AACd,QAAI,CAAC;AAAS;AACV,QAAA,CAAC,OAAO,QAAQ;AAAM;AAC1B,WAAO,QAAQ,KAAK,OAAO,oBAAA,UAAA,EACxB,SACH,CAAA,CAAG;AAAA,EACF,GAAA,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
+{"version":3,"file":"main9.mjs","sources":["../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n  return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":[],"mappings":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AACzB,MAAI,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AACzC,QAAM,IAAI,WAAW,CAAC,WAAW,SAAS;AACrC,OAAA,aAAa,MAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC;AAChD,SAAO,GAAG,QAAQ,KAAK,MAAM,KAAK,EAAE;AACtC;"}

package/dist/maplibre/cjs/main.js

@@ -251,21 +251,9 @@ function useOnAdd(fromLngLat2, { frameloop, ...renderProps }) {
     setTimeout(() => setMounted(true));
   });
   const onResize = useFunction(() => {
-    if (!r3mRef.current.map)
-      return;
     if (!r3mRef.current.state)
       return;
-    const canvas = r3mRef.current.map.getCanvas();
-    if (canvas.classList.contains("mapboxgl-canvas")) {
-      r3mRef.current.state.size.width = canvas.clientWidth;
-      r3mRef.current.state.size.height = canvas.clientHeight;
-    } else {
-      r3mRef.current.state.setSize(
-        canvas.clientWidth,
-        canvas.clientHeight,
-        false
-      );
-    }
+    r3mRef.current.state.set({});
   });
   const onRemove = useFunction(() => {
     if (!r3mRef.current.root)
@@ -301,6 +289,8 @@ function useRender(origin, r3mRef, frameloop) {
     const r3m = r3mRef.current;
     if (!r3m.state || !r3m.map)
       return;
+    r3m.state.size.width = r3m.state.gl.domElement.clientWidth;
+    r3m.state.size.height = r3m.state.gl.domElement.clientHeight;
     const camera = r3m.state.camera;
     const gl = r3m.state.gl;
     const advance = r3m.state.advance;
@@ -333,12 +323,13 @@ function useCanvas({
 }
 fiber.extend(THREE__namespace);
 const fromLngLat = maplibreGl.MercatorCoordinate.fromLngLat;
-const Canvas = react.memo((props) => {
-  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+const Canvas = react.memo(({ id, beforeId, ...props }) => {
+  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
   return /* @__PURE__ */ jsxRuntime.jsx(
     maplibre.Layer,
     {
-      id,
+      id: id || reactId,
+      beforeId,
       type: "custom",
       renderingMode: "3d",
       onAdd,

package/dist/maplibre/es/main10.mjs

@@ -1,24 +1,25 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useId, useEffect } from "react";
-import { useOnAdd } from "./main12.mjs";
-const useCreateRoot = ({
-  children,
-  frameloop,
-  fromLngLat,
-  ...renderProps
-}) => {
-  const id = useId();
-  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
-  useEffect(() => {
-    if (!mounted)
+import { syncCamera } from "./main6.mjs";
+import { useFunction } from "./main13.mjs";
+function useRender(origin, r3mRef, frameloop) {
+  const render = useFunction((_gl, mapCamMx) => {
+    const r3m = r3mRef.current;
+    if (!r3m.state || !r3m.map)
       return;
-    if (!r3mRef.current.root)
-      return;
-    r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
-  }, [r3mRef, mounted, children]);
-  return { id, onAdd, onRemove, r3mRef };
-};
+    r3m.state.size.width = r3m.state.gl.domElement.clientWidth;
+    r3m.state.size.height = r3m.state.gl.domElement.clientHeight;
+    const camera = r3m.state.camera;
+    const gl = r3m.state.gl;
+    const advance = r3m.state.advance;
+    r3m.mapCamMx = mapCamMx;
+    syncCamera(camera, origin, mapCamMx);
+    gl.resetState();
+    advance(Date.now() * 1e-3, true);
+    if (frameloop === "always")
+      r3m.map.triggerRepaint();
+  });
+  return render;
+}
 export {
-  useCreateRoot
+  useRender
 };
 //# sourceMappingURL=main10.mjs.map

package/dist/maplibre/es/main10.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main10.mjs","sources":["../../../src/core/use-create-root.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId } from \"react\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useOnAdd } from \"./use-on-add\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  fromLngLat: FromLngLat\n}\n\nexport const useCreateRoot = (({\n  children, frameloop, fromLngLat, ...renderProps\n}: useCanvasProps) => {\n\n  const id = useId();\n\n  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.render(<>\n      {children}\n    </>);\n  }, [r3mRef, mounted, children])\n\n  return { id, onAdd, onRemove, r3mRef }\n})"],"names":[],"mappings":";;;AAUO,MAAM,gBAAiB,CAAC;AAAA,EAC7B;AAAA,EAAU;AAAA,EAAW;AAAA,EAAY,GAAG;AACtC,MAAsB;AAEpB,QAAM,KAAK;AAEX,QAAM,EAAE,OAAO,UAAU,SAAS,OAAO,IAAI,SAAS,YAAY,EAAE,WAAW,GAAG,YAAa,CAAA;AAE/F,YAAU,MAAM;AACd,QAAI,CAAC;AAAS;AACV,QAAA,CAAC,OAAO,QAAQ;AAAM;AAC1B,WAAO,QAAQ,KAAK,OAAO,oBAAA,UAAA,EACxB,SACH,CAAA,CAAG;AAAA,EACF,GAAA,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
+{"version":3,"file":"main10.mjs","sources":["../../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n  origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n  const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n    const r3m = r3mRef.current;\n    if (!r3m.state || !r3m.map) return;\n    r3m.state.size.width = r3m.state.gl.domElement.clientWidth;\n    r3m.state.size.height = r3m.state.gl.domElement.clientHeight;\n    const camera = r3m.state.camera;\n    const gl = r3m.state.gl;\n    const advance = r3m.state.advance;\n    r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n    syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (frameloop === 'always') r3m.map.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":[],"mappings":";;AAMgB,SAAA,UACd,QAAsB,QAAoC,WAC1D;AAEA,QAAM,SAAS,YAAY,CAAC,KAA6B,aAAuB;AAC9E,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAI,SAAS,CAAC,IAAI;AAAK;AAC5B,QAAI,MAAM,KAAK,QAAQ,IAAI,MAAM,GAAG,WAAW;AAC/C,QAAI,MAAM,KAAK,SAAS,IAAI,MAAM,GAAG,WAAW;AAC1C,UAAA,SAAS,IAAI,MAAM;AACnB,UAAA,KAAK,IAAI,MAAM;AACf,UAAA,UAAU,IAAI,MAAM;AAC1B,QAAI,WAAW;AACJ,eAAA,QAA6B,QAAQ,QAAwB;AACxE,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAChC,QAAI,cAAc;AAAU,UAAI,IAAI;EAAe,CACpD;AAEM,SAAA;AAET;"}

package/dist/maplibre/es/main11.mjs

@@ -1,23 +1,18 @@
-import { syncCamera } from "./main6.mjs";
-import { useFunction } from "./main13.mjs";
-function useRender(origin, r3mRef, frameloop) {
-  const render = useFunction((_gl, mapCamMx) => {
-    const r3m = r3mRef.current;
-    if (!r3m.state || !r3m.map)
-      return;
-    const camera = r3m.state.camera;
-    const gl = r3m.state.gl;
-    const advance = r3m.state.advance;
-    r3m.mapCamMx = mapCamMx;
-    syncCamera(camera, origin, mapCamMx);
-    gl.resetState();
-    advance(Date.now() * 1e-3, true);
-    if (frameloop === "always")
-      r3m.map.triggerRepaint();
-  });
-  return render;
+import { Quaternion, Euler, Vector3, Matrix4 } from "three";
+const quat = new Quaternion();
+const euler = new Euler();
+const pos = new Vector3();
+const scale = new Vector3();
+const m4 = new Matrix4();
+function coordsToMatrix({ longitude, latitude, altitude, 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 * 0.5, 0, 0));
+  return m4.compose(pos, quat, scale).toArray();
 }
 export {
-  useRender
+  coordsToMatrix
 };
 //# sourceMappingURL=main11.mjs.map

package/dist/maplibre/es/main11.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main11.mjs","sources":["../../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n  origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n  const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n    const r3m = r3mRef.current;\n    if (!r3m.state || !r3m.map) return;\n    const camera = r3m.state.camera;\n    const gl = r3m.state.gl;\n    const advance = r3m.state.advance;\n    r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n    syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (frameloop === 'always') r3m.map.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":[],"mappings":";;AAMgB,SAAA,UACd,QAAsB,QAAoC,WAC1D;AAEA,QAAM,SAAS,YAAY,CAAC,KAA6B,aAAuB;AAC9E,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAI,SAAS,CAAC,IAAI;AAAK;AACtB,UAAA,SAAS,IAAI,MAAM;AACnB,UAAA,KAAK,IAAI,MAAM;AACf,UAAA,UAAU,IAAI,MAAM;AAC1B,QAAI,WAAW;AACJ,eAAA,QAA6B,QAAQ,QAAwB;AACxE,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAChC,QAAI,cAAc;AAAU,UAAI,IAAI;EAAe,CACpD;AAEM,SAAA;AAET;"}
+{"version":3,"file":"main11.mjs","sources":["../../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n  return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":[],"mappings":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AACzB,MAAI,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AACzC,QAAM,IAAI,WAAW,CAAC,WAAW,SAAS;AACrC,OAAA,aAAa,MAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC;AAChD,SAAO,GAAG,QAAQ,KAAK,MAAM,KAAK,EAAE;AACtC;"}

package/dist/maplibre/es/main12.mjs

@@ -54,21 +54,9 @@ function useOnAdd(fromLngLat, { frameloop, ...renderProps }) {
     setTimeout(() => setMounted(true));
   });
   const onResize = useFunction(() => {
-    if (!r3mRef.current.map)
-      return;
     if (!r3mRef.current.state)
       return;
-    const canvas = r3mRef.current.map.getCanvas();
-    if (canvas.classList.contains("mapboxgl-canvas")) {
-      r3mRef.current.state.size.width = canvas.clientWidth;
-      r3mRef.current.state.size.height = canvas.clientHeight;
-    } else {
-      r3mRef.current.state.setSize(
-        canvas.clientWidth,
-        canvas.clientHeight,
-        false
-      );
-    }
+    r3mRef.current.state.set({});
   });
   const onRemove = useFunction(() => {
     if (!r3mRef.current.root)

package/dist/maplibre/es/main12.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main12.mjs","sources":["../../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n  fromLngLat: FromLngLat,\n  { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n  const [mounted, setMounted] = useState(false);\n\n  const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n  const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n    const canvas = map.getCanvas();\n    const root = createRoot(canvas);\n    root.configure({\n      dpr: window.devicePixelRatio,\n      events: createEvents(),\n      ...renderProps,\n      frameloop: 'never',\n      gl: {\n        context: gl,\n        depth: true,\n        autoClear: false,\n        antialias: true,\n        ...renderProps?.gl,\n      },\n      onCreated: (state) => {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        state.gl.forceContextLoss = () => { };\n      },\n      camera: {\n        matrixAutoUpdate: false,\n        near: 0,\n      },\n      size: {\n        width: canvas.clientWidth,\n        height: canvas.clientHeight,\n        top: 0,\n        left: 0,\n        updateStyle: false,\n        ...renderProps?.size,\n      },\n    });\n\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    const store = _roots.get(canvas)!.store;\n\n    r3mRef.current.map = map;\n    r3mRef.current.root = root;\n    r3mRef.current.state = store.getState();\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    store.setState({ r3m: r3mRef.current } as any);\n\n    if (frameloop === 'demand') {\n      store.setState({\n        frameloop,\n        invalidate: () => {\n          map.triggerRepaint();\n        },\n      })\n    }\n\n    map.on('resize', onResize)\n\n    setTimeout(() => setMounted(true));\n\n  })\n\n  const onResize = useFunction(() => {\n    if (!r3mRef.current.map) return;\n    if (!r3mRef.current.state) return;\n    const canvas = r3mRef.current.map.getCanvas();\n\n    if (canvas.classList.contains('mapboxgl-canvas')) {\n      // if mapbox\n      r3mRef.current.state.size.width = canvas.clientWidth;\n      r3mRef.current.state.size.height = canvas.clientHeight;\n    } else {\n      // if maplibre\n      r3mRef.current.state.setSize(\n        canvas.clientWidth,\n        canvas.clientHeight,\n        false\n      );\n    }\n\n  })\n\n  const onRemove = useFunction(() => {\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.unmount();\n    r3mRef.current.root = undefined;\n    if (!r3mRef.current.map) return;\n    r3mRef.current.map.off('resize', onResize)\n  })\n\n  // on unmount\n  useEffect(() => () => onRemove(), [onRemove])\n\n  return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEI,QAAA,GAAG,UAAU,QAAQ;AAEd,eAAA,MAAM,WAAW,IAAI,CAAC;AAAA,EAAA,CAElC;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAK;AACrB,QAAA,CAAC,OAAO,QAAQ;AAAO;AAC3B,UAAM,SAAS,OAAO,QAAQ,IAAI,UAAU;AAE5C,QAAI,OAAO,UAAU,SAAS,iBAAiB,GAAG;AAEhD,aAAO,QAAQ,MAAM,KAAK,QAAQ,OAAO;AACzC,aAAO,QAAQ,MAAM,KAAK,SAAS,OAAO;AAAA,IAAA,OACrC;AAEL,aAAO,QAAQ,MAAM;AAAA,QACnB,OAAO;AAAA,QACP,OAAO;AAAA,QACP;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA,CAED;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAM;AACnB,WAAA,QAAQ,KAAK;AACpB,WAAO,QAAQ,OAAO;AAClB,QAAA,CAAC,OAAO,QAAQ;AAAK;AACzB,WAAO,QAAQ,IAAI,IAAI,UAAU,QAAQ;AAAA,EAAA,CAC1C;AAGD,YAAU,MAAM,MAAM,SAAY,GAAA,CAAC,QAAQ,CAAC;AAE5C,SAAO,EAAE,OAAO,UAAU,SAAS,OAAO;AAC5C;"}
+{"version":3,"file":"main12.mjs","sources":["../../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n  fromLngLat: FromLngLat,\n  { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n  const [mounted, setMounted] = useState(false);\n\n  const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n  const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n    const canvas = map.getCanvas();\n    const root = createRoot(canvas);\n    root.configure({\n      dpr: window.devicePixelRatio,\n      events: createEvents(),\n      ...renderProps,\n      frameloop: 'never',\n      gl: {\n        context: gl,\n        depth: true,\n        autoClear: false,\n        antialias: true,\n        ...renderProps?.gl,\n      },\n      onCreated: (state) => {\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        state.gl.forceContextLoss = () => { };\n      },\n      camera: {\n        matrixAutoUpdate: false,\n        near: 0,\n      },\n      size: {\n        width: canvas.clientWidth,\n        height: canvas.clientHeight,\n        top: 0,\n        left: 0,\n        updateStyle: false,\n        ...renderProps?.size,\n      },\n    });\n\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    const store = _roots.get(canvas)!.store;\n\n    r3mRef.current.map = map;\n    r3mRef.current.root = root;\n    r3mRef.current.state = store.getState();\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    store.setState({ r3m: r3mRef.current } as any);\n\n    if (frameloop === 'demand') {\n      store.setState({\n        frameloop,\n        invalidate: () => {\n          map.triggerRepaint();\n        },\n      })\n    }\n\n    map.on('resize', onResize)\n\n    setTimeout(() => setMounted(true));\n\n  })\n\n  const onResize = useFunction(() => {\n    if (!r3mRef.current.state) return;\n    // because we update size out of zustand, we just want to let it know that something changed\n    r3mRef.current.state.set({});\n  })\n\n  const onRemove = useFunction(() => {\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.unmount();\n    r3mRef.current.root = undefined;\n    if (!r3mRef.current.map) return;\n    r3mRef.current.map.off('resize', onResize)\n  })\n\n  // on unmount\n  useEffect(() => () => onRemove(), [onRemove])\n\n  return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEI,QAAA,GAAG,UAAU,QAAQ;AAEd,eAAA,MAAM,WAAW,IAAI,CAAC;AAAA,EAAA,CAElC;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAO;AAE3B,WAAO,QAAQ,MAAM,IAAI,CAAE,CAAA;AAAA,EAAA,CAC5B;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAM;AACnB,WAAA,QAAQ,KAAK;AACpB,WAAO,QAAQ,OAAO;AAClB,QAAA,CAAC,OAAO,QAAQ;AAAK;AACzB,WAAO,QAAQ,IAAI,IAAI,UAAU,QAAQ;AAAA,EAAA,CAC1C;AAGD,YAAU,MAAM,MAAM,SAAY,GAAA,CAAC,QAAQ,CAAC;AAE5C,SAAO,EAAE,OAAO,UAAU,SAAS,OAAO;AAC5C;"}

package/dist/maplibre/es/main4.mjs

@@ -7,12 +7,13 @@ import * as THREE from "three";
 import { useCanvas } from "./main8.mjs";
 extend(THREE);
 const fromLngLat = MercatorCoordinate.fromLngLat;
-const Canvas = memo((props) => {
-  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+const Canvas = memo(({ id, beforeId, ...props }) => {
+  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
   return /* @__PURE__ */ jsx(
     Layer,
     {
-      id,
+      id: id || reactId,
+      beforeId,
       type: "custom",
       renderingMode: "3d",
       onAdd,

package/dist/maplibre/es/main4.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main4.mjs","sources":["../../../src/maplibre/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"maplibre-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl/maplibre\";\nimport * as THREE from \"three\";\nimport { useCanvas } from \"../core/use-canvas\";\nimport { CanvasProps } from \"../api/canvas-props\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `MapLibre` */\nexport const Canvas = memo<CanvasProps>((props) => {\n\n  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\n\n  return <Layer\n    id={id}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})"],"names":[],"mappings":";;;;;;;AAQA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAGzB,MAAA,SAAS,KAAkB,CAAC,UAAU;AAE3C,QAAA,EAAE,IAAI,OAAO,UAAU,OAAA,IAAW,UAAU,EAAE,GAAG,OAAO,WAAA,CAAY;AAEnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}
+{"version":3,"file":"main4.mjs","sources":["../../../src/maplibre/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"maplibre-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl/maplibre\";\nimport * as THREE from \"three\";\nimport { useCanvas } from \"../core/use-canvas\";\nimport { CanvasProps } from \"../api/canvas-props\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `MapLibre` */\nexport const Canvas = memo<CanvasProps>(({id, beforeId, ...props}) => {\n\n  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\n\n  return <Layer\n    id={id || reactId}\n    beforeId={beforeId}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})\n"],"names":[],"mappings":";;;;;;;AAQA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAGzB,MAAA,SAAS,KAAkB,CAAC,EAAC,IAAI,UAAU,GAAG,YAAW;AAEpE,QAAM,EAAE,IAAI,SAAS,OAAO,UAAU,WAAW,UAAU,EAAE,GAAG,OAAO,WAAY,CAAA;AAE5E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN,IAAI,MAAM;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}

package/dist/maplibre/es/main7.mjs

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { coordsToMatrix } from "./main9.mjs";
+import { coordsToMatrix } from "./main11.mjs";
 function useCoords({ latitude, longitude, altitude, fromLngLat }) {
   const m4 = useMemo(() => coordsToMatrix({
     latitude,

package/dist/maplibre/es/main8.mjs

@@ -1,6 +1,6 @@
 import { useCoords } from "./main7.mjs";
-import { useCreateRoot } from "./main10.mjs";
-import { useRender } from "./main11.mjs";
+import { useCreateRoot } from "./main9.mjs";
+import { useRender } from "./main10.mjs";
 function useCanvas({
   longitude,
   latitude,

package/dist/maplibre/es/main8.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main8.mjs","sources":["../../../src/core/use-canvas.ts"],"sourcesContent":["import { CanvasProps } from \"../api/canvas-props\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useCoords } from \"./use-coords\";\nimport { useCreateRoot } from \"./use-create-root\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends CanvasProps {\n  fromLngLat: FromLngLat,\n}\n\nexport function useCanvas({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always',\n  fromLngLat,\n  ...renderProps\n}: useCanvasProps) {\n\n  const m4 = useCoords({\n    latitude, longitude, altitude, fromLngLat,\n  });\n\n  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });\n\n  const render = useRender(m4, r3mRef, frameloop);\n\n  return { id, onAdd, onRemove, render }\n}"],"names":[],"mappings":";;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAW;AAAA,EAAU,WAAW;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAmB;AAEjB,QAAM,KAAK,UAAU;AAAA,IACnB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAED,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI,cAAc,EAAE,WAAW,YAAY,GAAG,YAAa,CAAA;AAE/F,QAAM,SAAS,UAAU,IAAI,QAAQ,SAAS;AAE9C,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
+{"version":3,"file":"main8.mjs","sources":["../../../src/core/use-canvas.ts"],"sourcesContent":["import { CanvasProps } from \"../api/canvas-props\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useCoords } from \"./use-coords\";\nimport { useCreateRoot } from \"./use-create-root\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends Omit<CanvasProps, 'id'|'beforeId'> {\n  fromLngLat: FromLngLat,\n}\n\nexport function useCanvas({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always',\n  fromLngLat,\n  ...renderProps\n}: useCanvasProps) {\n\n  const m4 = useCoords({\n    latitude, longitude, altitude, fromLngLat,\n  });\n\n  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });\n\n  const render = useRender(m4, r3mRef, frameloop);\n\n  return { id, onAdd, onRemove, render }\n}"],"names":[],"mappings":";;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAW;AAAA,EAAU,WAAW;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAmB;AAEjB,QAAM,KAAK,UAAU;AAAA,IACnB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAED,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI,cAAc,EAAE,WAAW,YAAY,GAAG,YAAa,CAAA;AAE/F,QAAM,SAAS,UAAU,IAAI,QAAQ,SAAS;AAE9C,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}

package/dist/maplibre/es/main9.mjs

@@ -1,18 +1,24 @@
-import { Quaternion, Euler, Vector3, Matrix4 } from "three";
-const quat = new Quaternion();
-const euler = new Euler();
-const pos = new Vector3();
-const scale = new Vector3();
-const m4 = new Matrix4();
-function coordsToMatrix({ longitude, latitude, altitude, 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 * 0.5, 0, 0));
-  return m4.compose(pos, quat, scale).toArray();
-}
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useId, useEffect } from "react";
+import { useOnAdd } from "./main12.mjs";
+const useCreateRoot = ({
+  children,
+  frameloop,
+  fromLngLat,
+  ...renderProps
+}) => {
+  const id = useId();
+  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
+  useEffect(() => {
+    if (!mounted)
+      return;
+    if (!r3mRef.current.root)
+      return;
+    r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
+  }, [r3mRef, mounted, children]);
+  return { id, onAdd, onRemove, r3mRef };
+};
 export {
-  coordsToMatrix
+  useCreateRoot
 };
 //# sourceMappingURL=main9.mjs.map

package/dist/maplibre/es/main9.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main9.mjs","sources":["../../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n  return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":[],"mappings":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AACzB,MAAI,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AACzC,QAAM,IAAI,WAAW,CAAC,WAAW,SAAS;AACrC,OAAA,aAAa,MAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC;AAChD,SAAO,GAAG,QAAQ,KAAK,MAAM,KAAK,EAAE;AACtC;"}
+{"version":3,"file":"main9.mjs","sources":["../../../src/core/use-create-root.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId } from \"react\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useOnAdd } from \"./use-on-add\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  fromLngLat: FromLngLat\n}\n\nexport const useCreateRoot = (({\n  children, frameloop, fromLngLat, ...renderProps\n}: useCanvasProps) => {\n\n  const id = useId();\n\n  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.render(<>\n      {children}\n    </>);\n  }, [r3mRef, mounted, children])\n\n  return { id, onAdd, onRemove, r3mRef }\n})"],"names":[],"mappings":";;;AAUO,MAAM,gBAAiB,CAAC;AAAA,EAC7B;AAAA,EAAU;AAAA,EAAW;AAAA,EAAY,GAAG;AACtC,MAAsB;AAEpB,QAAM,KAAK;AAEX,QAAM,EAAE,OAAO,UAAU,SAAS,OAAO,IAAI,SAAS,YAAY,EAAE,WAAW,GAAG,YAAa,CAAA;AAE/F,YAAU,MAAM;AACd,QAAI,CAAC;AAAS;AACV,QAAA,CAAC,OAAO,QAAQ;AAAM;AAC1B,WAAO,QAAQ,KAAK,OAAO,oBAAA,UAAA,EACxB,SACH,CAAA,CAAG;AAAA,EACF,GAAA,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}

package/dist/maplibre/types/api/canvas-props.d.ts

@@ -1,6 +1,8 @@
 import { RenderProps } from "@react-three/fiber";
 import { PropsWithChildren } from "react";
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+    id?: string;
+    beforeId?: string;
     longitude: number;
     latitude: number;
     altitude?: number;

package/dist/maplibre/types/core/use-canvas.d.ts

@@ -1,6 +1,6 @@
 import { CanvasProps } from "../api/canvas-props";
 import { FromLngLat } from "./generic-map";
-export interface useCanvasProps extends CanvasProps {
+export interface useCanvasProps extends Omit<CanvasProps, 'id' | 'beforeId'> {
     fromLngLat: FromLngLat;
 }
 export declare function useCanvas({ longitude, latitude, altitude, frameloop, fromLngLat, ...renderProps }: useCanvasProps): {

package/dist/types/api/canvas-props.d.ts

@@ -1,6 +1,8 @@
 import { RenderProps } from "@react-three/fiber";
 import { PropsWithChildren } from "react";
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+    id?: string;
+    beforeId?: string;
     longitude: number;
     latitude: number;
     altitude?: number;

package/dist/types/core/use-canvas.d.ts

@@ -1,6 +1,6 @@
 import { CanvasProps } from "../api/canvas-props";
 import { FromLngLat } from "./generic-map";
-export interface useCanvasProps extends CanvasProps {
+export interface useCanvasProps extends Omit<CanvasProps, 'id' | 'beforeId'> {
     fromLngLat: FromLngLat;
 }
 export declare function useCanvas({ longitude, latitude, altitude, frameloop, fromLngLat, ...renderProps }: useCanvasProps): {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",
@@ -33,12 +33,15 @@
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
     "@ladle/react": "^2.13.0",
-    "@react-three/drei": "^9.74.5",
-    "@react-three/fiber": "^8.13.4",
+    "@react-three/drei": "^9.88.0",
+    "@react-three/fiber": "^8.14.5",
+    "@types/luxon": "^3.3.1",
     "@types/node": "^20.3.1",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
+    "@types/suncalc": "^1.9.0",
     "@types/three": "^0.154.0",
+    "@types/tz-lookup": "^6.1.0",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
     "@vitejs/plugin-react": "^4.0.0",
@@ -49,15 +52,18 @@
     "eslint-plugin-react-refresh": "^0.3.4",
     "happy-dom": "^10.5.2",
     "leva": "^0.9.35",
+    "luxon": "^3.3.0",
     "mapbox-gl": "^2.15.0",
     "maplibre-gl": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.0",
+    "suncalc": "^1.9.0",
     "suspend-react": "^0.1.3",
-    "three": "^0.153.0",
+    "three": "^0.154.0",
     "three-stdlib": "^2.23.8",
     "typescript": "~5.0.2",
+    "tz-lookup": "^6.1.25",
     "vite": "^4.4.4",
     "vitest": "^0.33.0",
     "web-ifc-three": "^0.0.125"

package/stories/package.json

@@ -15,7 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.2",
-    "react-three-map": "^0.4.1",
+    "react-three-map": "^0.6.1",
     "three": "^0.154.0",
     "three-stdlib": "^2.23.13",
     "web-ifc-three": "^0.0.125"

package/stories/yarn.lock

@@ -3473,10 +3473,10 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-three-map@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.4.1.tgz#4849aba8d907f1a0782c269f623f81675d144fbb"
-  integrity sha512-ctVVZwhkDH33yjM2r8zQ2URXxK3OimuJJgwTDJBEmuhRMTwqqseGvPPC/enqXhI2KWeGmUKySSeonpDq2LjB4Q==
+react-three-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.6.1.tgz#566811527242bb8964586c405a5816a84f75cb40"
+  integrity sha512-DSL7fyeR+MqiB1f6fG8FHwMb0NoDhj6Yjyc5T9jU6Yo/dpxQdY9Mfjs++J0j8HofcEDTsgiQz2GXh2r4iSPmhA==
 
 react-use-measure@^2.1.1:
   version "2.1.1"