react-three-map 0.7.2 → 0.8.1

package/dist/es/main18.mjs

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Canvas } from "@react-three/fiber";
+import { memo, useState } from "react";
+import { events } from "./main20.mjs";
+import { useFunction } from "./main10.mjs";
+import { InitR3M } from "./main21.mjs";
+import { SyncCameraFC } from "./main22.mjs";
+const CanvasPortal = memo(({
+  children,
+  latitude,
+  longitude,
+  altitude,
+  setOnRender,
+  map,
+  fromLngLat,
+  ...props
+}) => {
+  const mapCanvas = map.getCanvas();
+  const eventSource = mapCanvas.parentElement;
+  const [ready, setReady] = useState(false);
+  const onReady = useFunction(() => {
+    setReady(true);
+  });
+  return /* @__PURE__ */ jsxs(
+    Canvas,
+    {
+      camera: {
+        matrixAutoUpdate: false,
+        matrixWorldAutoUpdate: false
+      },
+      events,
+      eventSource,
+      ...props,
+      gl: { autoClear: false, ...props.gl },
+      children: [
+        /* @__PURE__ */ jsx(
+          InitR3M,
+          {
+            map,
+            fromLngLat,
+            latitude,
+            longitude,
+            altitude
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SyncCameraFC,
+          {
+            latitude,
+            longitude,
+            altitude,
+            setOnRender,
+            onReady,
+            map
+          }
+        ),
+        ready && children
+      ]
+    }
+  );
+});
+CanvasPortal.displayName = "CanvasPortal";
+export {
+  CanvasPortal
+};
+//# sourceMappingURL=main18.mjs.map

package/dist/es/main18.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main18.mjs","sources":["../../src/core/canvas-overlay/canvas-portal.tsx"],"sourcesContent":["import { Canvas } from \"@react-three/fiber\";\nimport { memo, useState } from \"react\";\nimport { Matrix4Tuple } from \"three\";\nimport { CanvasProps } from \"../../api/canvas-props\";\nimport { events } from \"../events\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { useFunction } from \"../use-function\";\nimport { InitR3M } from \"./init-r3m\";\nimport { SyncCameraFC } from \"./sync-camera-fc\";\n\ninterface CanvasPortalProps extends CanvasProps {\n  setOnRender: (callback: () => (mx: Matrix4Tuple) => void) => void,\n  map: MapInstance,\n  fromLngLat: FromLngLat,\n}\n\nexport const CanvasPortal = memo<CanvasPortalProps>(({\n  children, latitude, longitude, altitude,\n  setOnRender, map, fromLngLat, ...props\n}) => {\n\n  const mapCanvas = map.getCanvas();\n  const eventSource = mapCanvas.parentElement!; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n\n  const [ready, setReady] = useState(false);\n\n  const onReady = useFunction(() => {\n    setReady(true);\n  })\n\n  return <Canvas\n    camera={{\n      matrixAutoUpdate: false,\n      matrixWorldAutoUpdate: false,\n    }}\n    events={events}\n    eventSource={eventSource}\n    {...props}\n    gl={{ autoClear: false, ...props.gl }}\n  >\n    <InitR3M\n      map={map}\n      fromLngLat={fromLngLat}\n      latitude={latitude}\n      longitude={longitude}\n      altitude={altitude}\n    />\n    <SyncCameraFC\n      latitude={latitude}\n      longitude={longitude}\n      altitude={altitude}\n      setOnRender={setOnRender}\n      onReady={onReady}\n      map={map}\n    />\n    {ready && children}\n  </Canvas>\n})\nCanvasPortal.displayName = 'CanvasPortal';\n"],"names":[],"mappings":";;;;;;;AAgBa,MAAA,eAAe,KAAwB,CAAC;AAAA,EACnD;AAAA,EAAU;AAAA,EAAU;AAAA,EAAW;AAAA,EAC/B;AAAA,EAAa;AAAA,EAAK;AAAA,EAAY,GAAG;AACnC,MAAM;AAEE,QAAA,YAAY,IAAI;AACtB,QAAM,cAAc,UAAU;AAE9B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAElC,QAAA,UAAU,YAAY,MAAM;AAChC,aAAS,IAAI;AAAA,EAAA,CACd;AAEM,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,uBAAuB;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,IAAI,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG;AAAA,MAEpC,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACC,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAEd,CAAC;AACD,aAAa,cAAc;"}

package/dist/es/main19.mjs

@@ -0,0 +1,23 @@
+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 {
+  coordsToMatrix
+};
+//# sourceMappingURL=main19.mjs.map

package/dist/es/main19.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main19.mjs","sources":["../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\nimport { Coords } from \"../api/coords\";\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({\n  longitude, latitude, altitude, fromLngLat\n}: Coords & { fromLngLat: FromLngLat }) {\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":";AAIA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe;AAAA,EAC7B;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU;AACjC,GAAwC;AACtC,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/es/main2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main2.mjs","sources":["../../src/api/use-map.ts"],"sourcesContent":["import { useThree } from \"@react-three/fiber\";\nimport { MapInstance } from \"../core/generic-map\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const useMap = <T extends MapInstance = MapInstance>(): T | undefined => useThree((s) => (s as any as { r3m?: {map: T}}).r3m?.map);"],"names":[],"mappings":";AAIO,MAAM,SAAS,MAA0D,SAAS,CAAC,MAAO;;AAAA,iBAA+B,QAA/B,mBAAoC;AAAA,CAAG;"}
+{"version":3,"file":"main2.mjs","sources":["../../src/api/use-map.ts"],"sourcesContent":["import { useThree } from \"@react-three/fiber\";\nimport { MapInstance } from \"../core/generic-map\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const useMap = <T extends MapInstance = MapInstance>(): T => useThree((s: any) => {\n  return s.r3m?.map;\n});"],"names":[],"mappings":";AAIO,MAAM,SAAS,MAA8C,SAAS,CAAC,MAAW;;AACvF,UAAO,OAAE,QAAF,mBAAO;AAChB,CAAC;"}

package/dist/es/main20.mjs

@@ -0,0 +1,27 @@
+import { events as events$1 } from "@react-three/fiber";
+import { Matrix4 } from "three";
+const projViewInv = new Matrix4();
+const events = (store) => {
+  const originalEvents = events$1(store);
+  return {
+    ...originalEvents,
+    connect: (target) => {
+      if (!originalEvents.connect)
+        return;
+      originalEvents.connect(target.parentElement);
+    },
+    compute: (event, state) => {
+      state.pointer.x = event.offsetX / state.size.width * 2 - 1;
+      state.pointer.y = 1 - event.offsetY / state.size.height * 2;
+      if (state.camera.userData.projByViewInv)
+        projViewInv.fromArray(state.camera.userData.projByViewInv);
+      state.raycaster.camera = state.camera;
+      state.raycaster.ray.origin.setScalar(0).applyMatrix4(projViewInv);
+      state.raycaster.ray.direction.set(state.pointer.x, state.pointer.y, 1).applyMatrix4(projViewInv).sub(state.raycaster.ray.origin).normalize();
+    }
+  };
+};
+export {
+  events
+};
+//# sourceMappingURL=main20.mjs.map

package/dist/es/main20.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main20.mjs","sources":["../../src/core/events.ts"],"sourcesContent":["import { Canvas, events as fiberEvents } from \"@react-three/fiber\";\nimport { Matrix4 } from \"three\";\n\n/** projection * view matrix inverted */\nconst projViewInv = new Matrix4()\n\ntype Events = Parameters<typeof Canvas>[0]['events'];\n\nexport const events: Events = (store) => {\n  const originalEvents = fiberEvents(store);\n  return {\n    ...originalEvents,\n    connect: target => {\n      if (!originalEvents.connect) return;\n      originalEvents.connect(target.parentElement!);  // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    },\n    compute: (event, state) => {\n\n      state.pointer.x = (event.offsetX / state.size.width) * 2 - 1;\n      state.pointer.y = 1 - (event.offsetY / state.size.height) * 2;\n\n      if (state.camera.userData.projByViewInv) projViewInv.fromArray(state.camera.userData.projByViewInv);\n\n      state.raycaster.camera = state.camera;\n      state.raycaster.ray.origin.setScalar(0).applyMatrix4(projViewInv);\n      state.raycaster.ray.direction\n        .set(state.pointer.x, state.pointer.y, 1)\n        .applyMatrix4(projViewInv)\n        .sub(state.raycaster.ray.origin)\n        .normalize();\n\n    },\n  };\n};"],"names":["fiberEvents"],"mappings":";;AAIA,MAAM,cAAc,IAAI;AAIX,MAAA,SAAiB,CAAC,UAAU;AACjC,QAAA,iBAAiBA,SAAY,KAAK;AACjC,SAAA;AAAA,IACL,GAAG;AAAA,IACH,SAAS,CAAU,WAAA;AACjB,UAAI,CAAC,eAAe;AAAS;AACd,qBAAA,QAAQ,OAAO,aAAc;AAAA,IAC9C;AAAA,IACA,SAAS,CAAC,OAAO,UAAU;AAEzB,YAAM,QAAQ,IAAK,MAAM,UAAU,MAAM,KAAK,QAAS,IAAI;AAC3D,YAAM,QAAQ,IAAI,IAAK,MAAM,UAAU,MAAM,KAAK,SAAU;AAExD,UAAA,MAAM,OAAO,SAAS;AAAe,oBAAY,UAAU,MAAM,OAAO,SAAS,aAAa;AAE5F,YAAA,UAAU,SAAS,MAAM;AAC/B,YAAM,UAAU,IAAI,OAAO,UAAU,CAAC,EAAE,aAAa,WAAW;AAC1D,YAAA,UAAU,IAAI,UACjB,IAAI,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG,CAAC,EACvC,aAAa,WAAW,EACxB,IAAI,MAAM,UAAU,IAAI,MAAM,EAC9B;IAEL;AAAA,EAAA;AAEJ;"}

package/dist/es/main21.mjs

@@ -0,0 +1,19 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { memo } from "react";
+import { useInitR3M } from "./main13.mjs";
+import { useSetCoords } from "./main15.mjs";
+const InitR3M = memo(({
+  longitude,
+  latitude,
+  altitude,
+  ...props
+}) => {
+  useInitR3M(props);
+  useSetCoords({ longitude, latitude, altitude });
+  return /* @__PURE__ */ jsx(Fragment, {});
+});
+InitR3M.displayName = "InitR3M";
+export {
+  InitR3M
+};
+//# sourceMappingURL=main21.mjs.map

package/dist/es/main21.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main21.mjs","sources":["../../src/core/canvas-overlay/init-r3m.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { useInitR3M } from \"../use-r3m\";\nimport { useSetCoords } from \"../use-coords\";\nimport { Coords } from \"../../api/coords\";\n\ninterface InitR3MProps extends Coords {\n  map: MapInstance,\n  fromLngLat: FromLngLat,\n}\n\n/** Initialises the `R3M` hook */\nexport const InitR3M = memo<InitR3MProps>(({\n  longitude, latitude, altitude, ...props\n}) => {\n  useInitR3M(props);\n  useSetCoords({longitude, latitude, altitude});\n  return <></>\n})\nInitR3M.displayName = 'InitR3M';"],"names":[],"mappings":";;;;AAYa,MAAA,UAAU,KAAmB,CAAC;AAAA,EACzC;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU,GAAG;AACpC,MAAM;AACJ,aAAW,KAAK;AAChB,eAAa,EAAC,WAAW,UAAU,SAAS,CAAA;AAC5C,SAAS,oBAAA,UAAA,CAAA,CAAA;AACX,CAAC;AACD,QAAQ,cAAc;"}

package/dist/es/main22.mjs

@@ -0,0 +1,83 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useThree, useFrame } from "@react-three/fiber";
+import { memo, useRef, useMemo, useEffect, useLayoutEffect } from "react";
+import { syncCamera } from "./main11.mjs";
+import { useCoordsToMatrix } from "./main12.mjs";
+import { useFunction } from "./main10.mjs";
+import { useR3M } from "./main13.mjs";
+const SyncCameraFC = memo(({
+  latitude,
+  longitude,
+  altitude = 0,
+  setOnRender,
+  manualRender,
+  onReady,
+  map
+}) => {
+  const mapCanvas = map.getCanvas();
+  const r3m = useR3M();
+  const camRef = useRef(null);
+  const camera = useThree((s) => s.camera);
+  const gl = useThree((s) => s.gl);
+  const threeCanvas = useThree((s) => s.gl.domElement);
+  const scene = useThree((s) => s.scene);
+  const advance = useThree((s) => s.advance);
+  const setSize = useThree((s) => s.setSize);
+  const set = useThree((s) => s.set);
+  const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: r3m.fromLngLat });
+  const ready = useRef(false);
+  const triggerRepaint = useMemo(() => map.triggerRepaint, [map]);
+  const mapPaintRequests = useRef(0);
+  const triggerRepaintOff = useFunction(() => {
+    mapPaintRequests.current++;
+  });
+  useFrame(() => {
+    syncCamera(camera, origin, r3m.viewProjMx);
+    if (manualRender)
+      gl.render(scene, camera);
+    map.triggerRepaint = triggerRepaint;
+    if (mapPaintRequests.current > 0) {
+      mapPaintRequests.current = 0;
+      map.triggerRepaint();
+    }
+  }, -Infinity);
+  const onRender = useFunction((viewProjMx) => {
+    map.triggerRepaint = triggerRepaintOff;
+    if (threeCanvas.width !== mapCanvas.width || threeCanvas.height !== mapCanvas.height) {
+      setSize(
+        mapCanvas.clientWidth,
+        mapCanvas.clientHeight,
+        true,
+        mapCanvas.offsetTop,
+        mapCanvas.offsetLeft
+      );
+    }
+    r3m.viewProjMx = viewProjMx;
+    if (!ready.current && onReady) {
+      ready.current = true;
+      onReady();
+    }
+    advance(Date.now() * 1e-3, true);
+  });
+  useEffect(() => {
+    setOnRender && setOnRender(() => onRender);
+  }, [setOnRender, onRender]);
+  useLayoutEffect(() => {
+    if (!manualRender)
+      return;
+    set({ camera: camRef.current });
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children: manualRender && /* @__PURE__ */ jsx(
+    "perspectiveCamera",
+    {
+      ref: camRef,
+      matrixAutoUpdate: false,
+      matrixWorldAutoUpdate: false
+    }
+  ) });
+});
+SyncCameraFC.displayName = "SyncCameraFC";
+export {
+  SyncCameraFC
+};
+//# sourceMappingURL=main22.mjs.map

package/dist/es/main22.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main22.mjs","sources":["../../src/core/canvas-overlay/sync-camera-fc.tsx"],"sourcesContent":["import { useFrame, useThree } from \"@react-three/fiber\";\nimport { memo, useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { Coords } from \"../../api/coords\";\nimport { MapInstance } from \"../generic-map\";\nimport { syncCamera } from \"../sync-camera\";\nimport { useCoordsToMatrix } from \"../use-coords-to-matrix\";\nimport { useFunction } from \"../use-function\";\nimport { useR3M } from \"../use-r3m\";\n\ninterface SyncCameraFCProps extends Coords {\n  setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void,\n  /** on `useFrame` it will manually render (used by `<Coordinates>`) */\n  manualRender?: boolean,\n  onReady?: () => void,\n  map: MapInstance,\n}\n\n/** React Component (FC) to sync the Three camera with the map provider */\nexport const SyncCameraFC = memo<SyncCameraFCProps>(({\n  latitude, longitude, altitude = 0, setOnRender, manualRender, onReady, map\n}) => {\n\n  const mapCanvas = map.getCanvas();\n\n  const r3m = useR3M();\n\n  const camRef = useRef<PerspectiveCamera>(null);\n\n  const camera = useThree(s => s.camera) as PerspectiveCamera;\n  const gl = useThree(s => s.gl);\n  const threeCanvas = useThree(s => s.gl.domElement);\n  const scene = useThree(s => s.scene);\n  const advance = useThree(s => s.advance);\n  const setSize = useThree(s => s.setSize);\n  const set = useThree(s => s.set);\n\n  const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: r3m.fromLngLat });\n\n  const ready = useRef(false);\n\n  const triggerRepaint = useMemo(() => map.triggerRepaint, [map]);\n  const mapPaintRequests = useRef(0);\n  const triggerRepaintOff = useFunction(() => {\n    mapPaintRequests.current++;\n  })\n\n  useFrame(() => {\n    syncCamera(camera, origin, r3m.viewProjMx)\n\n    if (manualRender) gl.render(scene, camera);\n\n    map.triggerRepaint = triggerRepaint;\n    if (mapPaintRequests.current > 0) {\n      mapPaintRequests.current = 0;\n      map.triggerRepaint();\n    }\n  }, -Infinity)\n\n  const onRender = useFunction((viewProjMx: Matrix4Tuple) => {\n    map.triggerRepaint = triggerRepaintOff;\n\n    if (threeCanvas.width !== mapCanvas.width || threeCanvas.height !== mapCanvas.height) {\n      setSize(\n        mapCanvas.clientWidth,\n        mapCanvas.clientHeight,\n        true,\n        mapCanvas.offsetTop,\n        mapCanvas.offsetLeft,\n      );\n    }\n\n    r3m.viewProjMx = viewProjMx;\n    if (!ready.current && onReady) {\n      ready.current = true;\n      onReady();\n    }\n    advance(Date.now() * .001, true);\n  })\n\n  useEffect(() => {\n    setOnRender && setOnRender(() => onRender)\n  }, [setOnRender, onRender])\n\n  useLayoutEffect(() => {\n    if (!manualRender) return;\n    set({ camera: camRef.current! }); // eslint-disable-line @typescript-eslint/no-non-null-assertion\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return <>\n    {manualRender && <perspectiveCamera\n      ref={camRef}\n      matrixAutoUpdate={false}\n      matrixWorldAutoUpdate={false}\n    />}\n  </>\n})\n\nSyncCameraFC.displayName = 'SyncCameraFC';"],"names":[],"mappings":";;;;;;;AAmBa,MAAA,eAAe,KAAwB,CAAC;AAAA,EACnD;AAAA,EAAU;AAAA,EAAW,WAAW;AAAA,EAAG;AAAA,EAAa;AAAA,EAAc;AAAA,EAAS;AACzE,MAAM;AAEE,QAAA,YAAY,IAAI;AAEtB,QAAM,MAAM;AAEN,QAAA,SAAS,OAA0B,IAAI;AAE7C,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,MAAM;AACrC,QAAM,KAAK,SAAS,CAAK,MAAA,EAAE,EAAE;AAC7B,QAAM,cAAc,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AACjD,QAAM,QAAQ,SAAS,CAAK,MAAA,EAAE,KAAK;AACnC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,MAAM,SAAS,CAAK,MAAA,EAAE,GAAG;AAEzB,QAAA,SAAS,kBAAkB,EAAE,UAAU,WAAW,UAAU,YAAY,IAAI,WAAA,CAAY;AAExF,QAAA,QAAQ,OAAO,KAAK;AAE1B,QAAM,iBAAiB,QAAQ,MAAM,IAAI,gBAAgB,CAAC,GAAG,CAAC;AACxD,QAAA,mBAAmB,OAAO,CAAC;AAC3B,QAAA,oBAAoB,YAAY,MAAM;AACzB,qBAAA;AAAA,EAAA,CAClB;AAED,WAAS,MAAM;AACF,eAAA,QAAQ,QAAQ,IAAI,UAAU;AAErC,QAAA;AAAiB,SAAA,OAAO,OAAO,MAAM;AAEzC,QAAI,iBAAiB;AACjB,QAAA,iBAAiB,UAAU,GAAG;AAChC,uBAAiB,UAAU;AAC3B,UAAI,eAAe;AAAA,IACrB;AAAA,EAAA,GACC,SAAS;AAEN,QAAA,WAAW,YAAY,CAAC,eAA6B;AACzD,QAAI,iBAAiB;AAErB,QAAI,YAAY,UAAU,UAAU,SAAS,YAAY,WAAW,UAAU,QAAQ;AACpF;AAAA,QACE,UAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,MAAA;AAAA,IAEd;AAEA,QAAI,aAAa;AACb,QAAA,CAAC,MAAM,WAAW,SAAS;AAC7B,YAAM,UAAU;AACR;IACV;AACA,YAAQ,KAAK,IAAQ,IAAA,MAAM,IAAI;AAAA,EAAA,CAChC;AAED,YAAU,MAAM;AACC,mBAAA,YAAY,MAAM,QAAQ;AAAA,EAAA,GACxC,CAAC,aAAa,QAAQ,CAAC;AAE1B,kBAAgB,MAAM;AACpB,QAAI,CAAC;AAAc;AACnB,QAAI,EAAE,QAAQ,OAAO,QAAU,CAAA;AAAA,EACjC,GAAG,CAAE,CAAA;AAEL,yCACG,UAAgB,gBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAChB,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,uBAAuB;AAAA,IAAA;AAAA,EAE3B,EAAA,CAAA;AACF,CAAC;AAED,aAAa,cAAc;"}

package/dist/es/main3.mjs

@@ -1,56 +1,49 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { createPortal, useThree, useFrame } from "@react-three/fiber";
-import { memo, useState, useRef, useLayoutEffect } from "react";
-import { Scene } from "three";
-import { useR3M } from "./main5.mjs";
-import { syncCamera } from "./main6.mjs";
-import { useCoords } from "./main7.mjs";
-const Coordinates = memo(({
-  latitude,
-  longitude,
-  altitude = 0,
-  children
-}) => {
-  const [scene] = useState(() => new Scene());
-  const r3m = useR3M();
-  const origin = useCoords({
-    latitude,
-    longitude,
-    altitude,
-    fromLngLat: r3m.fromLngLat
-  });
-  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(RenderAtCoords, { r3m, origin }),
-    children
-  ] }), scene, { events: { priority: 2 } }) });
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { extend } from "@react-three/fiber";
+import { MercatorCoordinate } from "mapbox-gl";
+import { memo, useState } from "react";
+import { useMap, Layer } from "react-map-gl";
+import * as THREE from "three";
+import { useCanvasInLayer } from "./main8.mjs";
+import { InitCanvasFC } from "./main9.mjs";
+import { useFunction } from "./main10.mjs";
+extend(THREE);
+const fromLngLat = MercatorCoordinate.fromLngLat;
+const Canvas = memo(({ overlay, ...props }) => {
+  const map = useMap().current.getMap();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    overlay && /* @__PURE__ */ jsx(CanvasOverlay, { map, ...props }),
+    !overlay && /* @__PURE__ */ jsx(CanvasInLayer, { map, ...props })
+  ] });
 });
-Coordinates.displayName = "Coordinates";
-function RenderAtCoords({ r3m, origin }) {
-  const { gl, scene, set } = useThree();
-  const cameraRef = useRef(null);
-  useFrame(() => {
-    if (!r3m.mapCamMx)
-      return;
-    if (!cameraRef.current)
+Canvas.displayName = "Canvas";
+const CanvasInLayer = memo(({ map, ...props }) => {
+  const layerProps = useCanvasInLayer(props, fromLngLat, map);
+  return /* @__PURE__ */ jsx(Layer, { ...layerProps });
+});
+CanvasInLayer.displayName = "CanvasInLayer";
+const CanvasOverlay = memo(({ map, id, beforeId, ...props }) => {
+  const [onRender, setOnRender] = useState();
+  const render = useFunction((_gl, mx) => {
+    if (!onRender)
       return;
-    syncCamera(cameraRef.current, origin, r3m.mapCamMx);
-    gl.render(scene, cameraRef.current);
+    onRender(mx);
   });
-  useLayoutEffect(() => {
-    if (!cameraRef.current)
-      return;
-    set({
-      invalidate: () => {
-        if (!r3m.map)
-          return;
-        r3m.map.triggerRepaint();
-      },
-      camera: cameraRef.current
-    });
-  }, [set, r3m]);
-  return /* @__PURE__ */ jsx("perspectiveCamera", { ref: cameraRef });
-}
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Layer, { id, beforeId, type: "custom", render }),
+    /* @__PURE__ */ jsx(
+      InitCanvasFC,
+      {
+        ...props,
+        setOnRender,
+        map,
+        fromLngLat
+      }
+    )
+  ] });
+});
+CanvasInLayer.displayName = "CanvasInLayer";
 export {
-  Coordinates
+  Canvas
 };
 //# sourceMappingURL=main3.mjs.map

package/dist/es/main3.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main3.mjs","sources":["../../src/api/coordinates.tsx"],"sourcesContent":["import { createPortal, useFrame, useThree } from \"@react-three/fiber\";\nimport { PropsWithChildren, memo, useLayoutEffect, useRef, useState } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera, Scene } from \"three\";\nimport { R3mStore, useR3M } from \"../core/store\";\nimport { syncCamera } from \"../core/sync-camera\";\nimport { useCoords } from \"../core/use-coords\";\n\nexport interface CoordinatesProps extends PropsWithChildren {\n  longitude: number,\n  latitude: number,\n  altitude?: number,\n}\n\nexport const Coordinates = memo<CoordinatesProps>(({\n  latitude, longitude, altitude = 0, children\n}) => {\n\n  const [scene] = useState(() => new Scene())\n\n  const r3m = useR3M();\n\n  const origin = useCoords({\n    latitude, longitude, altitude, fromLngLat: r3m.fromLngLat,\n  });\n\n\n  return <>{createPortal(<>\n    <RenderAtCoords r3m={r3m} origin={origin} />\n    {children}\n  </>, scene, { events: { priority: 2 } })}</>\n})\n\nCoordinates.displayName = 'Coordinates';\n\ninterface RenderAtCoordsProps {\n  r3m: R3mStore,\n  origin: Matrix4Tuple\n}\n\nfunction RenderAtCoords({ r3m, origin }: RenderAtCoordsProps) {\n\n  const { gl, scene, set } = useThree()\n\n  const cameraRef = useRef<PerspectiveCamera>(null)\n\n  useFrame(() => {\n    if (!r3m.mapCamMx) return;\n    if (!cameraRef.current) return;\n    syncCamera(cameraRef.current, origin, r3m.mapCamMx);\n    gl.render(scene, cameraRef.current);\n  })\n\n  useLayoutEffect(() => {\n    if (!cameraRef.current) return;\n    set({\n      invalidate: () => {\n        if (!r3m.map) return;\n        r3m.map.triggerRepaint();\n      },\n      camera: cameraRef.current,\n    });\n  }, [set, r3m])\n\n  return <perspectiveCamera ref={cameraRef} />\n}"],"names":[],"mappings":";;;;;;;AAaa,MAAA,cAAc,KAAuB,CAAC;AAAA,EACjD;AAAA,EAAU;AAAA,EAAW,WAAW;AAAA,EAAG;AACrC,MAAM;AAEJ,QAAM,CAAC,KAAK,IAAI,SAAS,MAAM,IAAI,MAAO,CAAA;AAE1C,QAAM,MAAM;AAEZ,QAAM,SAAS,UAAU;AAAA,IACvB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU,YAAY,IAAI;AAAA,EAAA,CAChD;AAGM,SAAA,oBAAA,UAAA,EAAG,uBACR,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,gBAAA,EAAe,KAAU,OAAgB,CAAA;AAAA,IACzC;AAAA,EAAA,GACH,GAAK,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAA,GAAK,EAAE,CAAA;AAC3C,CAAC;AAED,YAAY,cAAc;AAO1B,SAAS,eAAe,EAAE,KAAK,UAA+B;AAE5D,QAAM,EAAE,IAAI,OAAO,QAAQ,SAAS;AAE9B,QAAA,YAAY,OAA0B,IAAI;AAEhD,WAAS,MAAM;AACb,QAAI,CAAC,IAAI;AAAU;AACnB,QAAI,CAAC,UAAU;AAAS;AACxB,eAAW,UAAU,SAAS,QAAQ,IAAI,QAAQ;AAC/C,OAAA,OAAO,OAAO,UAAU,OAAO;AAAA,EAAA,CACnC;AAED,kBAAgB,MAAM;AACpB,QAAI,CAAC,UAAU;AAAS;AACpB,QAAA;AAAA,MACF,YAAY,MAAM;AAChB,YAAI,CAAC,IAAI;AAAK;AACd,YAAI,IAAI;MACV;AAAA,MACA,QAAQ,UAAU;AAAA,IAAA,CACnB;AAAA,EAAA,GACA,CAAC,KAAK,GAAG,CAAC;AAEN,SAAA,oBAAC,qBAAkB,EAAA,KAAK,UAAW,CAAA;AAC5C;"}
+{"version":3,"file":"main3.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\nimport { memo, useState } from \"react\";\nimport { Layer, useMap } from \"react-map-gl\";\nimport * as THREE from \"three\";\nimport { Matrix4Tuple } from \"three\";\nimport { CanvasProps } from \"../api/canvas-props\";\nimport { useCanvasInLayer } from \"../core/canvas-in-layer/use-canvas-in-layer\";\nimport { InitCanvasFC } from \"../core/canvas-overlay/init-canvas-fc\";\nimport { Render } from \"../core/canvas-overlay/render\";\nimport { MapInstance } from \"../core/generic-map\";\nimport { useFunction } from \"../core/use-function\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>(({ overlay, ...props }) => {\n\n  const map = useMap().current!.getMap(); // eslint-disable-line @typescript-eslint/no-non-null-assertion\n\n  return <>\n    {overlay && <CanvasOverlay map={map} {...props} />}\n    {!overlay && <CanvasInLayer map={map} {...props} />}\n  </>\n})\nCanvas.displayName = 'Canvas'\n\ninterface CanvasPropsAndMap extends CanvasProps {\n  map: MapInstance;\n}\n\nconst CanvasInLayer = memo<CanvasPropsAndMap>(({ map, ...props }) => {\n  const layerProps = useCanvasInLayer(props, fromLngLat, map);\n  /* @ts-ignore */ // eslint-disable-line @typescript-eslint/ban-ts-comment\n  return <Layer {...layerProps} />\n})\nCanvasInLayer.displayName = 'CanvasInLayer';\n\nconst CanvasOverlay = memo<CanvasPropsAndMap>(({ map, id, beforeId, ...props }) => {\n  const [onRender, setOnRender] = useState<(mx: Matrix4Tuple) => void>();\n\n  const render = useFunction<Render>((_gl, mx) => {\n    if (!onRender) return;\n    onRender(mx as Matrix4Tuple);\n  })\n\n  return <>\n    {/* @ts-ignore  */}\n    <Layer id={id} beforeId={beforeId} type=\"custom\" render={render} />\n    <InitCanvasFC {...props}\n      setOnRender={setOnRender}\n      map={map}\n      fromLngLat={fromLngLat}\n    />\n  </>\n})\nCanvasInLayer.displayName = 'CanvasInLayer';"],"names":[],"mappings":";;;;;;;;;AAcA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAG/B,MAAM,SAAS,KAAkB,CAAC,EAAE,SAAS,GAAG,YAAY;AAEjE,QAAM,MAAM,OAAA,EAAS,QAAS,OAAO;AAErC,SACG,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,WAAY,oBAAA,eAAA,EAAc,KAAW,GAAG,MAAO,CAAA;AAAA,IAC/C,CAAC,WAAW,oBAAC,eAAc,EAAA,KAAW,GAAG,OAAO;AAAA,EACnD,EAAA,CAAA;AACF,CAAC;AACD,OAAO,cAAc;AAMrB,MAAM,gBAAgB,KAAwB,CAAC,EAAE,KAAK,GAAG,YAAY;AACnE,QAAM,aAAa,iBAAiB,OAAO,YAAY,GAAG;AAEnD,SAAA,oBAAC,OAAO,EAAA,GAAG,WAAY,CAAA;AAChC,CAAC;AACD,cAAc,cAAc;AAE5B,MAAM,gBAAgB,KAAwB,CAAC,EAAE,KAAK,IAAI,UAAU,GAAG,YAAY;AACjF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAqC;AAErE,QAAM,SAAS,YAAoB,CAAC,KAAK,OAAO;AAC9C,QAAI,CAAC;AAAU;AACf,aAAS,EAAkB;AAAA,EAAA,CAC5B;AAED,SAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,OAAM,EAAA,IAAQ,UAAoB,MAAK,UAAS,QAAgB;AAAA,IACjE;AAAA,MAAC;AAAA,MAAA;AAAA,QAAc,GAAG;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AACF,CAAC;AACD,cAAc,cAAc;"}

package/dist/es/main4.mjs

@@ -1,28 +1,54 @@
-import { jsx } from "react/jsx-runtime";
-import { extend } from "@react-three/fiber";
-import { MercatorCoordinate } from "mapbox-gl";
-import { memo } from "react";
-import { Layer } from "react-map-gl";
-import * as THREE from "three";
-import { useCanvas } from "./main8.mjs";
-extend(THREE);
-const fromLngLat = MercatorCoordinate.fromLngLat;
-const Canvas = memo(({ id, beforeId, ...props }) => {
-  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
-  return /* @__PURE__ */ jsx(
-    Layer,
-    {
-      id: id || reactId,
-      beforeId,
-      type: "custom",
-      renderingMode: "3d",
-      onAdd,
-      onRemove,
-      render
-    }
-  );
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { createPortal, useThree, useFrame } from "@react-three/fiber";
+import { memo, useState, useRef, useLayoutEffect } from "react";
+import { Scene } from "three";
+import { syncCamera } from "./main11.mjs";
+import { useCoordsToMatrix } from "./main12.mjs";
+import { useR3M } from "./main13.mjs";
+const Coordinates = memo(({
+  latitude,
+  longitude,
+  altitude = 0,
+  children
+}) => {
+  const [scene] = useState(() => new Scene());
+  const r3m = useR3M();
+  const origin = useCoordsToMatrix({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat: r3m.fromLngLat
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RenderAtCoords, { r3m, origin }),
+    children
+  ] }), scene, { events: { priority: 2 } }) });
 });
+Coordinates.displayName = "Coordinates";
+function RenderAtCoords({ r3m, origin }) {
+  const { gl, scene, set } = useThree();
+  const cameraRef = useRef(null);
+  useFrame(() => {
+    if (!cameraRef.current)
+      return;
+    syncCamera(cameraRef.current, origin, r3m.viewProjMx);
+    gl.render(scene, cameraRef.current);
+  });
+  useLayoutEffect(() => {
+    if (!cameraRef.current)
+      return;
+    set({
+      invalidate: () => {
+        if (!r3m.map)
+          return;
+        r3m.map.triggerRepaint();
+      },
+      camera: cameraRef.current
+    });
+  }, [set, r3m]);
+  return /* @__PURE__ */ jsx("perspectiveCamera", { ref: cameraRef });
+}
 export {
-  Canvas
+  Coordinates
 };
 //# sourceMappingURL=main4.mjs.map

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>(({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;"}
+{"version":3,"file":"main4.mjs","sources":["../../src/api/coordinates.tsx"],"sourcesContent":["import { createPortal, useFrame, useThree } from \"@react-three/fiber\";\nimport { PropsWithChildren, memo, useLayoutEffect, useRef, useState } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera, Scene } from \"three\";\nimport { syncCamera } from \"../core/sync-camera\";\nimport { useCoordsToMatrix } from \"../core/use-coords-to-matrix\";\nimport { R3M, useR3M } from \"../core/use-r3m\";\n\nexport interface CoordinatesProps extends PropsWithChildren {\n  longitude: number,\n  latitude: number,\n  altitude?: number,\n}\n\nexport const Coordinates = memo<CoordinatesProps>(({\n  latitude, longitude, altitude = 0, children\n}) => {\n\n  const [scene] = useState(() => new Scene())\n\n  const r3m = useR3M();\n\n  const origin = useCoordsToMatrix({\n    latitude, longitude, altitude, fromLngLat: r3m.fromLngLat,\n  });\n\n\n  return <>{createPortal(<>\n    <RenderAtCoords r3m={r3m} origin={origin} />\n    {children}\n  </>, scene, { events: { priority: 2 } })}</>\n})\n\nCoordinates.displayName = 'Coordinates';\n\ninterface RenderAtCoordsProps {\n  r3m: R3M,\n  origin: Matrix4Tuple\n}\n\nfunction RenderAtCoords({ r3m, origin }: RenderAtCoordsProps) {\n\n  const { gl, scene, set } = useThree()\n\n  const cameraRef = useRef<PerspectiveCamera>(null)\n\n  useFrame(() => {\n    if (!cameraRef.current) return;\n    syncCamera(cameraRef.current, origin, r3m.viewProjMx);\n    gl.render(scene, cameraRef.current);\n  })\n\n  useLayoutEffect(() => {\n    if (!cameraRef.current) return;\n    set({\n      invalidate: () => {\n        if (!r3m.map) return;\n        r3m.map.triggerRepaint();\n      },\n      camera: cameraRef.current,\n    });\n  }, [set, r3m])\n\n  return <perspectiveCamera ref={cameraRef} />\n}"],"names":[],"mappings":";;;;;;;AAaa,MAAA,cAAc,KAAuB,CAAC;AAAA,EACjD;AAAA,EAAU;AAAA,EAAW,WAAW;AAAA,EAAG;AACrC,MAAM;AAEJ,QAAM,CAAC,KAAK,IAAI,SAAS,MAAM,IAAI,MAAO,CAAA;AAE1C,QAAM,MAAM;AAEZ,QAAM,SAAS,kBAAkB;AAAA,IAC/B;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU,YAAY,IAAI;AAAA,EAAA,CAChD;AAGM,SAAA,oBAAA,UAAA,EAAG,uBACR,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,gBAAA,EAAe,KAAU,OAAgB,CAAA;AAAA,IACzC;AAAA,EAAA,GACH,GAAK,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAA,GAAK,EAAE,CAAA;AAC3C,CAAC;AAED,YAAY,cAAc;AAO1B,SAAS,eAAe,EAAE,KAAK,UAA+B;AAE5D,QAAM,EAAE,IAAI,OAAO,QAAQ,SAAS;AAE9B,QAAA,YAAY,OAA0B,IAAI;AAEhD,WAAS,MAAM;AACb,QAAI,CAAC,UAAU;AAAS;AACxB,eAAW,UAAU,SAAS,QAAQ,IAAI,UAAU;AACjD,OAAA,OAAO,OAAO,UAAU,OAAO;AAAA,EAAA,CACnC;AAED,kBAAgB,MAAM;AACpB,QAAI,CAAC,UAAU;AAAS;AACpB,QAAA;AAAA,MACF,YAAY,MAAM;AAChB,YAAI,CAAC,IAAI;AAAK;AACd,YAAI,IAAI;MACV;AAAA,MACA,QAAQ,UAAU;AAAA,IAAA,CACnB;AAAA,EAAA,GACA,CAAC,KAAK,GAAG,CAAC;AAEN,SAAA,oBAAC,qBAAkB,EAAA,KAAK,UAAW,CAAA;AAC5C;"}

package/dist/es/main5.mjs

@@ -1,6 +1,15 @@
-import { useThree } from "@react-three/fiber";
-const useR3M = () => useThree((s) => s.r3m);
+import { MathUtils } from "three";
+import { earthRadius } from "./main14.mjs";
+function coordsToVector3(point, origin) {
+  const latitudeDiff = (point.latitude - origin.latitude) * MathUtils.DEG2RAD;
+  const longitudeDiff = (point.longitude - origin.longitude) * MathUtils.DEG2RAD;
+  const altitudeDiff = (point.altitude || 0) - (origin.altitude || 0);
+  const x = longitudeDiff * earthRadius * Math.cos(origin.latitude * MathUtils.DEG2RAD);
+  const y = altitudeDiff;
+  const z = -latitudeDiff * earthRadius;
+  return [x, y, z];
+}
 export {
-  useR3M
+  coordsToVector3
 };
 //# sourceMappingURL=main5.mjs.map

package/dist/es/main5.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main5.mjs","sources":["../../src/core/store.ts"],"sourcesContent":["import { ReconcilerRoot, RootState, useThree } from \"@react-three/fiber\";\nimport { Matrix4Tuple } from \"three\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\n\n/** react-three-map store */\nexport interface R3mStore {\n  fromLngLat: FromLngLat,\n  map?: MapInstance;\n  mapCamMx?: Matrix4Tuple;\n  state?: RootState\n  root?: ReconcilerRoot<HTMLCanvasElement>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const useR3M = (): R3mStore => useThree((s: any) => s.r3m);"],"names":[],"mappings":";AAcO,MAAM,SAAS,MAAgB,SAAS,CAAC,MAAW,EAAE,GAAG;"}
+{"version":3,"file":"main5.mjs","sources":["../../src/api/coords-to-vector-3.ts"],"sourcesContent":["import { MathUtils, Vector3Tuple } from 'three';\nimport { Coords } from './coords';\nimport { earthRadius } from \"../core/earth-radius\";\n\nexport function coordsToVector3(point: Coords, origin: Coords): Vector3Tuple {\n  const latitudeDiff = (point.latitude - origin.latitude) * MathUtils.DEG2RAD;\n  const longitudeDiff = (point.longitude - origin.longitude) * MathUtils.DEG2RAD;\n  const altitudeDiff = (point.altitude || 0) - (origin.altitude || 0);\n\n  const x = longitudeDiff * earthRadius * Math.cos(origin.latitude * MathUtils.DEG2RAD);\n  const y = altitudeDiff;\n  const z = -latitudeDiff * earthRadius;\n\n  return [x, y, z] as Vector3Tuple;\n}\n"],"names":[],"mappings":";;AAIgB,SAAA,gBAAgB,OAAe,QAA8B;AAC3E,QAAM,gBAAgB,MAAM,WAAW,OAAO,YAAY,UAAU;AACpE,QAAM,iBAAiB,MAAM,YAAY,OAAO,aAAa,UAAU;AACvE,QAAM,gBAAgB,MAAM,YAAY,MAAM,OAAO,YAAY;AAE3D,QAAA,IAAI,gBAAgB,cAAc,KAAK,IAAI,OAAO,WAAW,UAAU,OAAO;AACpF,QAAM,IAAI;AACJ,QAAA,IAAI,CAAC,eAAe;AAEnB,SAAA,CAAC,GAAG,GAAG,CAAC;AACjB;"}

package/dist/es/main6.mjs

@@ -1,37 +1,22 @@
-import { Matrix4, Vector3 } from "three";
-const originMx = new Matrix4();
-const projByView = new Matrix4();
-const projByViewInv = new Matrix4();
-const fwd = new Vector3();
-function syncCamera(camera, origin, mapCamMx) {
-  projByView.fromArray(mapCamMx).multiply(originMx.fromArray(origin));
-  projByViewInv.copy(projByView).invert();
-  updateCamera(camera, projByViewInv);
-  camera.updateMatrix();
-  camera.updateMatrixWorld(true);
-  camera.projectionMatrix.copy(camera.matrix).premultiply(projByView);
-  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
-  camera.far = calculateFar(
-    camera.matrix.elements[10],
-    camera.matrix.elements[14],
-    camera.near
-  );
-  camera.userData.projByView = projByView.toArray();
-  camera.userData.projByViewInv = projByViewInv.toArray();
-}
-const updateCamera = (target, projByViewInv2) => {
-  target.position.setScalar(0).applyMatrix4(projByViewInv2);
-  target.up.set(0, -1, 0).applyMatrix4(projByViewInv2).negate().add(target.position).normalize();
-  fwd.set(0, 0, 1).applyMatrix4(projByViewInv2);
-  target.lookAt(fwd);
-};
-function calculateFar(c, d, near) {
-  const numerator = d * (c - 1);
-  const denominator = c * near + near;
-  const far = numerator / denominator;
-  return far;
-}
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { useCoords } from "./main15.mjs";
+import { coordsToVector3 } from "./main5.mjs";
+const NearCoordinates = memo(({ children, ...coords }) => {
+  const { latitude, longitude, altitude } = useCoords();
+  const pos = useMemo(() => coordsToVector3(coords, { latitude, longitude, altitude }), [
+    // eslint-disable-line react-hooks/exhaustive-deps
+    latitude,
+    longitude,
+    altitude,
+    coords.latitude,
+    coords.longitude,
+    coords.altitude
+  ]);
+  return /* @__PURE__ */ jsx("object3D", { position: pos, children });
+});
+NearCoordinates.displayName = "NearCoordinates";
 export {
-  syncCamera
+  NearCoordinates
 };
 //# sourceMappingURL=main6.mjs.map

package/dist/es/main6.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main6.mjs","sources":["../../src/core/sync-camera.ts"],"sourcesContent":["import { Matrix4, Matrix4Tuple, Object3D, PerspectiveCamera, Vector3 } from \"three\";\n\nconst originMx = new Matrix4();\n\n/** projection * view matrix  */\nconst projByView = new Matrix4();\n/** projection * view matrix inverted */\nconst projByViewInv = new Matrix4();\n\n/** forward */\nconst fwd = new Vector3();\n\n\nexport function syncCamera(camera: PerspectiveCamera, origin: Matrix4Tuple, mapCamMx: Matrix4Tuple) {\n\n  projByView\n    .fromArray(mapCamMx)\n    .multiply(originMx.fromArray(origin));\n  projByViewInv\n    .copy(projByView)\n    .invert();\n\n  updateCamera(camera, projByViewInv);\n  camera.updateMatrix();\n  camera.updateMatrixWorld(true);  \n\n  camera.projectionMatrix.copy(camera.matrix).premultiply(projByView);\n  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n\n  camera.far = calculateFar(\n    camera.matrix.elements[10], camera.matrix.elements[14], camera.near\n  )\n\n  camera.userData.projByView = projByView.toArray();\n  camera.userData.projByViewInv = projByViewInv.toArray();\n\n}\n\nconst updateCamera = (target: Object3D, projByViewInv: Matrix4) => {\n\n  target.position\n    .setScalar(0)\n    .applyMatrix4(projByViewInv)\n\n  target.up\n    .set(0, -1, 0)\n    .applyMatrix4(projByViewInv)\n    .negate()\n    .add(target.position)\n    .normalize()\n\n  fwd\n    .set(0, 0, 1)\n    .applyMatrix4(projByViewInv)\n\n  target.lookAt(fwd);\n\n}\n\nfunction calculateFar(c: number, d: number, near: number): number {\n  const numerator = d * (c - 1);\n  const denominator = c * near + near;\n  const far = numerator / denominator;\n  return far;\n}"],"names":["projByViewInv"],"mappings":";AAEA,MAAM,WAAW,IAAI;AAGrB,MAAM,aAAa,IAAI;AAEvB,MAAM,gBAAgB,IAAI;AAG1B,MAAM,MAAM,IAAI;AAGA,SAAA,WAAW,QAA2B,QAAsB,UAAwB;AAElG,aACG,UAAU,QAAQ,EAClB,SAAS,SAAS,UAAU,MAAM,CAAC;AAEnC,gBAAA,KAAK,UAAU,EACf,OAAO;AAEV,eAAa,QAAQ,aAAa;AAClC,SAAO,aAAa;AACpB,SAAO,kBAAkB,IAAI;AAE7B,SAAO,iBAAiB,KAAK,OAAO,MAAM,EAAE,YAAY,UAAU;AAClE,SAAO,wBAAwB,KAAK,OAAO,gBAAgB,EAAE;AAE7D,SAAO,MAAM;AAAA,IACX,OAAO,OAAO,SAAS,EAAE;AAAA,IAAG,OAAO,OAAO,SAAS,EAAE;AAAA,IAAG,OAAO;AAAA,EAAA;AAG1D,SAAA,SAAS,aAAa,WAAW,QAAQ;AACzC,SAAA,SAAS,gBAAgB,cAAc,QAAQ;AAExD;AAEA,MAAM,eAAe,CAAC,QAAkBA,mBAA2B;AAEjE,SAAO,SACJ,UAAU,CAAC,EACX,aAAaA,cAAa;AAE7B,SAAO,GACJ,IAAI,GAAG,IAAI,CAAC,EACZ,aAAaA,cAAa,EAC1B,SACA,IAAI,OAAO,QAAQ,EACnB;AAEH,MACG,IAAI,GAAG,GAAG,CAAC,EACX,aAAaA,cAAa;AAE7B,SAAO,OAAO,GAAG;AAEnB;AAEA,SAAS,aAAa,GAAW,GAAW,MAAsB;AAC1D,QAAA,YAAY,KAAK,IAAI;AACrB,QAAA,cAAc,IAAI,OAAO;AAC/B,QAAM,MAAM,YAAY;AACjB,SAAA;AACT;"}
+{"version":3,"file":"main6.mjs","sources":["../../src/api/near-coordinates.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { useCoords } from \"../core/use-coords\";\nimport { CoordinatesProps } from \"./coordinates\";\nimport { coordsToVector3 } from \"./coords-to-vector-3\";\n\nexport const NearCoordinates = memo<CoordinatesProps>(({children, ...coords})=>{\n  const {latitude, longitude, altitude} = useCoords();\n  const pos = useMemo(()=>coordsToVector3(coords, {latitude, longitude, altitude}), [ // eslint-disable-line react-hooks/exhaustive-deps\n    latitude, longitude, altitude, coords.latitude, coords.longitude, coords.altitude\n  ]);\n  return <object3D position={pos}>{children}</object3D>\n})\nNearCoordinates.displayName = 'NearCoordinates';"],"names":[],"mappings":";;;;AAKO,MAAM,kBAAkB,KAAuB,CAAC,EAAC,UAAU,GAAG,aAAU;AAC7E,QAAM,EAAC,UAAU,WAAW,aAAY,UAAU;AAC5C,QAAA,MAAM,QAAQ,MAAI,gBAAgB,QAAQ,EAAC,UAAU,WAAW,SAAQ,CAAC,GAAG;AAAA;AAAA,IAChF;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU,OAAO;AAAA,IAAU,OAAO;AAAA,IAAW,OAAO;AAAA,EAAA,CAC1E;AACD,SAAQ,oBAAA,YAAA,EAAS,UAAU,KAAM,SAAS,CAAA;AAC5C,CAAC;AACD,gBAAgB,cAAc;"}

package/dist/es/main7.mjs

@@ -1,15 +1,14 @@
-import { useMemo } from "react";
-import { coordsToMatrix } from "./main9.mjs";
-function useCoords({ latitude, longitude, altitude, fromLngLat }) {
-  const m4 = useMemo(() => coordsToMatrix({
-    latitude,
-    longitude,
-    altitude,
-    fromLngLat
-  }), [latitude, longitude, altitude, fromLngLat]);
-  return m4;
+import { MathUtils } from "three";
+import { earthRadius } from "./main14.mjs";
+function vector3ToCoords(position, origin) {
+  const [x, y, z] = position;
+  const latitude = origin.latitude + -z / earthRadius * MathUtils.RAD2DEG;
+  const longitude = origin.longitude + x / earthRadius * MathUtils.RAD2DEG / Math.cos(origin.latitude * MathUtils.DEG2RAD);
+  const altitude = (origin.altitude || 0) + y;
+  const coords = { latitude, longitude, altitude };
+  return coords;
 }
 export {
-  useCoords
+  vector3ToCoords
 };
 //# sourceMappingURL=main7.mjs.map