react-three-map 0.8.0 → 0.8.2

package/dist/maplibre/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/maplibre/es/main3.mjs

@@ -4,9 +4,9 @@ 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 "./main7.mjs";
-import { InitCanvasFC } from "./main8.mjs";
-import { useFunction } from "./main9.mjs";
+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 }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"main3.mjs","sources":["../../../src/mapbox/canvas.tsx"],"sourcesContent":["import { 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  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    <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":";;;;;;;;;AAaA,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;AACnD,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,SACE,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;"}
+{"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/maplibre/es/main4.mjs

@@ -2,9 +2,9 @@ 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 "./main10.mjs";
-import { useCoordsToMatrix } from "./main11.mjs";
-import { useR3M } from "./main12.mjs";
+import { syncCamera } from "./main11.mjs";
+import { useCoordsToMatrix } from "./main12.mjs";
+import { useR3M } from "./main13.mjs";
 const Coordinates = memo(({
   latitude,
   longitude,

package/dist/maplibre/es/main5.mjs

@@ -1,22 +1,35 @@
-import { jsx } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
-import { useCoords } from "./main13.mjs";
-import { coordsToVector3 } from "./main6.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";
+import { MathUtils } from "three";
+import { earthRadius } from "./main14.mjs";
+const mercatorScaleLookup = {};
+function getMercatorScale(lat) {
+  const index = Math.round(lat * 1e3);
+  if (mercatorScaleLookup[index] === void 0) {
+    mercatorScaleLookup[index] = 1 / Math.cos(lat * MathUtils.DEG2RAD);
+  }
+  return mercatorScaleLookup[index];
+}
+function averageMercatorScale(originLat, pointLat, steps = 10) {
+  let totalScale = 0;
+  const latStep = (pointLat - originLat) / steps;
+  for (let i = 0; i <= steps; i++) {
+    const lat = originLat + latStep * i;
+    totalScale += getMercatorScale(lat);
+  }
+  return totalScale / (steps + 1);
+}
+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 steps = Math.ceil(Math.abs(point.latitude - origin.latitude)) * 100 + 1;
+  const avgScale = averageMercatorScale(origin.latitude, point.latitude, steps);
+  const z = -latitudeDiff * earthRadius / getMercatorScale(origin.latitude) * avgScale;
+  return [x, y, z];
+}
 export {
-  NearCoordinates
+  averageMercatorScale,
+  coordsToVector3
 };
 //# sourceMappingURL=main5.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main5.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;"}
+{"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\n\nconst mercatorScaleLookup: { [key: number]: number } = {};\n\nfunction getMercatorScale(lat: number): number {\n  const index = Math.round(lat * 1000);\n  if (mercatorScaleLookup[index] === undefined) {\n    mercatorScaleLookup[index] = 1 / Math.cos(lat * MathUtils.DEG2RAD);\n  }\n  return mercatorScaleLookup[index];\n}\n\nexport function averageMercatorScale(originLat: number, pointLat: number, steps = 10): number {\n  let totalScale = 0;\n  const latStep = (pointLat - originLat) / steps;\n  for (let i = 0; i <= steps; i++) {\n    const lat = originLat + latStep * i;\n    totalScale += getMercatorScale(lat);\n  }\n  return totalScale / (steps + 1);\n}\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\n  // dynamic step size based on latitude difference. calculate the mercator unit scale at origin\n  // and the scale average along the line to the point for better accuracy far from origin\n  const steps = Math.ceil(Math.abs(point.latitude - origin.latitude)) * 100 + 1;\n  const avgScale = averageMercatorScale(origin.latitude, point.latitude, steps);\n\n  const z = ((-latitudeDiff * earthRadius) / getMercatorScale(origin.latitude)) * avgScale;\n  return [x, y, z] as Vector3Tuple;\n}"],"names":[],"mappings":";;AAKA,MAAM,sBAAiD,CAAA;AAEvD,SAAS,iBAAiB,KAAqB;AAC7C,QAAM,QAAQ,KAAK,MAAM,MAAM,GAAI;AAC/B,MAAA,oBAAoB,KAAK,MAAM,QAAW;AAC5C,wBAAoB,KAAK,IAAI,IAAI,KAAK,IAAI,MAAM,UAAU,OAAO;AAAA,EACnE;AACA,SAAO,oBAAoB,KAAK;AAClC;AAEO,SAAS,qBAAqB,WAAmB,UAAkB,QAAQ,IAAY;AAC5F,MAAI,aAAa;AACX,QAAA,WAAW,WAAW,aAAa;AACzC,WAAS,IAAI,GAAG,KAAK,OAAO,KAAK;AACzB,UAAA,MAAM,YAAY,UAAU;AAClC,kBAAc,iBAAiB,GAAG;AAAA,EACpC;AACA,SAAO,cAAc,QAAQ;AAC/B;AAEgB,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;AAIJ,QAAA,QAAQ,KAAK,KAAK,KAAK,IAAI,MAAM,WAAW,OAAO,QAAQ,CAAC,IAAI,MAAM;AAC5E,QAAM,WAAW,qBAAqB,OAAO,UAAU,MAAM,UAAU,KAAK;AAE5E,QAAM,IAAM,CAAC,eAAe,cAAe,iBAAiB,OAAO,QAAQ,IAAK;AACzE,SAAA,CAAC,GAAG,GAAG,CAAC;AACjB;"}

package/dist/maplibre/es/main6.mjs

@@ -1,18 +1,22 @@
-import { distance, bearing } from "@turf/turf";
-import { MathUtils } from "three";
-function coordsToVector3(point, origin) {
-  const originCoords = [origin.longitude, origin.latitude, origin.altitude || 0];
-  const pointCoords = [point.longitude, point.latitude, point.altitude || 0];
-  const dist = distance(originCoords, pointCoords, { units: "meters" });
-  const angle = bearing(originCoords, pointCoords);
-  const adjustedAngle = angle - 90;
-  const x = dist * Math.cos(adjustedAngle * MathUtils.DEG2RAD);
-  const y = (point.altitude || 0) - (origin.altitude || 0);
-  const z = dist * Math.sin(adjustedAngle * MathUtils.DEG2RAD);
-  const v3 = [x, y, z];
-  return v3;
-}
+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 {
-  coordsToVector3
+  NearCoordinates
 };
 //# sourceMappingURL=main6.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main6.mjs","sources":["../../../src/api/coords-to-vector-3.ts"],"sourcesContent":["import { bearing, distance } from \"@turf/turf\";\nimport { MathUtils, Vector3Tuple } from \"three\";\nimport { Coords } from \"./coords\";\n\n/** converts geo coordinates `point` to a `Vector3Tuple` (represented in meters) using `origin` as the origin. */\nexport function coordsToVector3(point: Coords, origin: Coords) {\n  const originCoords: Vector3Tuple = [origin.longitude, origin.latitude, origin.altitude || 0];\n  const pointCoords: Vector3Tuple = [point.longitude, point.latitude, point.altitude || 0];\n\n  // Calculate distance in meters\n  const dist = distance(originCoords, pointCoords, { units: \"meters\" });\n\n  // Calculate bearing angle\n  const angle = bearing(originCoords, pointCoords);\n\n  // Adjust the bearing to match the coordinate system\n  // (e.g., if the positive X-axis corresponds to East and positive Z-axis to North)\n  const adjustedAngle = angle - 90; \n\n  // Convert angle and distance to 3D position\n  const x = dist * Math.cos(adjustedAngle * MathUtils.DEG2RAD);\n  const y = (point.altitude || 0) - (origin.altitude||0);\n  const z = dist * Math.sin(adjustedAngle * MathUtils.DEG2RAD);\n\n  const v3 : Vector3Tuple = [x, y, z];\n\n  return v3;\n}"],"names":[],"mappings":";;AAKgB,SAAA,gBAAgB,OAAe,QAAgB;AACvD,QAAA,eAA6B,CAAC,OAAO,WAAW,OAAO,UAAU,OAAO,YAAY,CAAC;AACrF,QAAA,cAA4B,CAAC,MAAM,WAAW,MAAM,UAAU,MAAM,YAAY,CAAC;AAGvF,QAAM,OAAO,SAAS,cAAc,aAAa,EAAE,OAAO,UAAU;AAG9D,QAAA,QAAQ,QAAQ,cAAc,WAAW;AAI/C,QAAM,gBAAgB,QAAQ;AAG9B,QAAM,IAAI,OAAO,KAAK,IAAI,gBAAgB,UAAU,OAAO;AAC3D,QAAM,KAAK,MAAM,YAAY,MAAM,OAAO,YAAU;AACpD,QAAM,IAAI,OAAO,KAAK,IAAI,gBAAgB,UAAU,OAAO;AAE3D,QAAM,KAAoB,CAAC,GAAG,GAAG,CAAC;AAE3B,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/maplibre/es/main7.mjs

@@ -1,26 +1,14 @@
-import { useCoordsToMatrix } from "./main11.mjs";
-import { useRender } from "./main14.mjs";
-import { useRoot } from "./main15.mjs";
-function useCanvasInLayer(props, fromLngLat, map) {
-  const { latitude, longitude, altitude, frameloop } = props;
-  const origin = useCoordsToMatrix({
-    latitude,
-    longitude,
-    altitude,
-    fromLngLat
-  });
-  const { onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);
-  const render = useRender({ origin, frameloop, useThree, map, r3m });
-  return {
-    id: props.id,
-    beforeId: props.beforeId,
-    onRemove,
-    render,
-    type: "custom",
-    renderingMode: "3d"
-  };
+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 {
-  useCanvasInLayer
+  vector3ToCoords
 };
 //# sourceMappingURL=main7.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main7.mjs","sources":["../../../src/core/canvas-in-layer/use-canvas-in-layer.tsx"],"sourcesContent":["import { CanvasProps } from \"../../api/canvas-props\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { useCoordsToMatrix } from \"../use-coords-to-matrix\";\nimport { useRender } from \"./use-render\";\nimport { useRoot } from \"./use-root\";\n\n/** get all the properties that you need to render as a map `<Layer>` */\nexport function useCanvasInLayer(props: CanvasProps,fromLngLat: FromLngLat, map: MapInstance) {\n\n  const {latitude, longitude, altitude, frameloop } = props;\n\n    const origin = useCoordsToMatrix({\n      latitude, longitude, altitude, fromLngLat,\n    });\n\n    const { onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);\n  \n    const render = useRender({origin, frameloop, useThree, map, r3m});\n  \n    return {\n      id: props.id,\n      beforeId: props.beforeId,\n      onRemove,\n      render,\n      type: 'custom',\n      renderingMode: '3d'\n    } as const\n\n}"],"names":[],"mappings":";;;AAOgB,SAAA,iBAAiB,OAAmB,YAAwB,KAAkB;AAE5F,QAAM,EAAC,UAAU,WAAW,UAAU,cAAc;AAElD,QAAM,SAAS,kBAAkB;AAAA,IAC/B;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAEK,QAAA,EAAE,UAAU,UAAU,IAAA,IAAQ,QAAQ,YAAY,KAAK,KAAK;AAE5D,QAAA,SAAS,UAAU,EAAC,QAAQ,WAAW,UAAU,KAAK,KAAI;AAEzD,SAAA;AAAA,IACL,IAAI,MAAM;AAAA,IACV,UAAU,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,eAAe;AAAA,EAAA;AAGrB;"}
+{"version":3,"file":"main7.mjs","sources":["../../../src/api/vector-3-to-coords.ts"],"sourcesContent":["import { MathUtils, Vector3Tuple } from \"three\";\nimport { Coords } from \"./coords\";\nimport { earthRadius } from \"../core/earth-radius\";\n\nexport function vector3ToCoords(position: Vector3Tuple, origin: Coords): Coords {\n  const [x, y, z] = position;\n  const latitude = origin.latitude + (-z / earthRadius) * MathUtils.RAD2DEG;\n  const longitude = origin.longitude + (x / earthRadius) * MathUtils.RAD2DEG / Math.cos(origin.latitude * MathUtils.DEG2RAD);\n  const altitude = (origin.altitude || 0) + y;\n  const coords: Coords = { latitude, longitude, altitude };\n  return coords;\n}"],"names":[],"mappings":";;AAIgB,SAAA,gBAAgB,UAAwB,QAAwB;AAC9E,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI;AAClB,QAAM,WAAW,OAAO,WAAY,CAAC,IAAI,cAAe,UAAU;AAClE,QAAM,YAAY,OAAO,YAAa,IAAI,cAAe,UAAU,UAAU,KAAK,IAAI,OAAO,WAAW,UAAU,OAAO;AACnH,QAAA,YAAY,OAAO,YAAY,KAAK;AAC1C,QAAM,SAAiB,EAAE,UAAU,WAAW,SAAS;AAChD,SAAA;AACT;"}

package/dist/maplibre/es/main8.mjs

@@ -1,30 +1,26 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { memo, useState, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { CanvasPortal } from "./main16.mjs";
-const InitCanvasFC = memo((props) => {
-  const canvas = props.map.getCanvas();
-  const [el] = useState(() => {
-    const el2 = document.createElement("div");
-    el2.style.position = "absolute";
-    el2.style.top = "0";
-    el2.style.bottom = "0";
-    el2.style.left = "0";
-    el2.style.right = "0";
-    el2.style.pointerEvents = "none";
-    return el2;
+import { useCoordsToMatrix } from "./main12.mjs";
+import { useRender } from "./main16.mjs";
+import { useRoot } from "./main17.mjs";
+function useCanvasInLayer(props, fromLngLat, map) {
+  const { latitude, longitude, altitude, frameloop } = props;
+  const origin = useCoordsToMatrix({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat
   });
-  useEffect(() => {
-    const parent = canvas.parentElement;
-    parent.appendChild(el);
-    return () => {
-      parent.removeChild(el);
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(/* @__PURE__ */ jsx(CanvasPortal, { ...props }), el) });
-});
-InitCanvasFC.displayName = "InitCanvasFC";
+  const { onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);
+  const render = useRender({ origin, frameloop, useThree, map, r3m });
+  return {
+    id: props.id,
+    beforeId: props.beforeId,
+    onRemove,
+    render,
+    type: "custom",
+    renderingMode: "3d"
+  };
+}
 export {
-  InitCanvasFC
+  useCanvasInLayer
 };
 //# sourceMappingURL=main8.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main8.mjs","sources":["../../../src/core/canvas-overlay/init-canvas-fc.tsx"],"sourcesContent":["import { memo, useEffect, useState } from \"react\";\nimport { createPortal } from 'react-dom';\nimport { Matrix4Tuple } from \"three\";\nimport { CanvasProps } from \"../../api/canvas-props\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { CanvasPortal } from \"./canvas-portal\";\n\ninterface InitCanvasFCProps extends CanvasProps {\n  map: MapInstance,\n  setOnRender: (callback: () => (mx: Matrix4Tuple) => void) => void,\n  frameloop?: 'always' | 'demand',\n  fromLngLat: FromLngLat,\n}\nexport const InitCanvasFC = memo<InitCanvasFCProps>((props) => {\n  const canvas = props.map.getCanvas() // eslint-disable-line @typescript-eslint/no-non-null-assertion\n\n  const [el] = useState(() => {\n    const el = document.createElement('div');\n    el.style.position = 'absolute';\n    el.style.top = '0';\n    el.style.bottom = '0';\n    el.style.left = '0';\n    el.style.right = '0';\n    el.style.pointerEvents = 'none';\n    return el\n  })\n\n  useEffect(() => {\n    const parent = canvas.parentElement!; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    parent.appendChild(el);\n    return () => {\n      parent.removeChild(el);\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n  return <>\n    {createPortal((\n      <CanvasPortal {...props} />\n    ), el)}\n  </>\n})\nInitCanvasFC.displayName = 'InitCanvasFC';\n"],"names":["el"],"mappings":";;;;AAaa,MAAA,eAAe,KAAwB,CAAC,UAAU;AACvD,QAAA,SAAS,MAAM,IAAI,UAAU;AAEnC,QAAM,CAAC,EAAE,IAAI,SAAS,MAAM;AACpBA,UAAAA,MAAK,SAAS,cAAc,KAAK;AACvCA,QAAG,MAAM,WAAW;AACpBA,QAAG,MAAM,MAAM;AACfA,QAAG,MAAM,SAAS;AAClBA,QAAG,MAAM,OAAO;AAChBA,QAAG,MAAM,QAAQ;AACjBA,QAAG,MAAM,gBAAgB;AAClBA,WAAAA;AAAAA,EAAA,CACR;AAED,YAAU,MAAM;AACd,UAAM,SAAS,OAAO;AACtB,WAAO,YAAY,EAAE;AACrB,WAAO,MAAM;AACX,aAAO,YAAY,EAAE;AAAA,IAAA;AAAA,EAEzB,GAAG,CAAE,CAAA;AACE,SAAA,oBAAA,UAAA,EACJ,uBACE,oBAAA,cAAA,EAAc,GAAG,MAAO,CAAA,GACxB,EAAE,EACP,CAAA;AACF,CAAC;AACD,aAAa,cAAc;"}
+{"version":3,"file":"main8.mjs","sources":["../../../src/core/canvas-in-layer/use-canvas-in-layer.tsx"],"sourcesContent":["import { CanvasProps } from \"../../api/canvas-props\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { useCoordsToMatrix } from \"../use-coords-to-matrix\";\nimport { useRender } from \"./use-render\";\nimport { useRoot } from \"./use-root\";\n\n/** get all the properties that you need to render as a map `<Layer>` */\nexport function useCanvasInLayer(props: CanvasProps,fromLngLat: FromLngLat, map: MapInstance) {\n\n  const {latitude, longitude, altitude, frameloop } = props;\n\n    const origin = useCoordsToMatrix({\n      latitude, longitude, altitude, fromLngLat,\n    });\n\n    const { onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);\n  \n    const render = useRender({origin, frameloop, useThree, map, r3m});\n  \n    return {\n      id: props.id,\n      beforeId: props.beforeId,\n      onRemove,\n      render,\n      type: 'custom',\n      renderingMode: '3d'\n    } as const\n\n}"],"names":[],"mappings":";;;AAOgB,SAAA,iBAAiB,OAAmB,YAAwB,KAAkB;AAE5F,QAAM,EAAC,UAAU,WAAW,UAAU,cAAc;AAElD,QAAM,SAAS,kBAAkB;AAAA,IAC/B;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAEK,QAAA,EAAE,UAAU,UAAU,IAAA,IAAQ,QAAQ,YAAY,KAAK,KAAK;AAE5D,QAAA,SAAS,UAAU,EAAC,QAAQ,WAAW,UAAU,KAAK,KAAI;AAEzD,SAAA;AAAA,IACL,IAAI,MAAM;AAAA,IACV,UAAU,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,eAAe;AAAA,EAAA;AAGrB;"}

package/dist/maplibre/es/main9.mjs

@@ -1,12 +1,30 @@
-import { useRef, useCallback } from "react";
-const useFunction = (callback) => {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-  return useCallback((...args) => {
-    return callbackRef.current(...args);
+import { jsx, Fragment } from "react/jsx-runtime";
+import { memo, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { CanvasPortal } from "./main18.mjs";
+const InitCanvasFC = memo((props) => {
+  const canvas = props.map.getCanvas();
+  const [el] = useState(() => {
+    const el2 = document.createElement("div");
+    el2.style.position = "absolute";
+    el2.style.top = "0";
+    el2.style.bottom = "0";
+    el2.style.left = "0";
+    el2.style.right = "0";
+    el2.style.pointerEvents = "none";
+    return el2;
+  });
+  useEffect(() => {
+    const parent = canvas.parentElement;
+    parent.appendChild(el);
+    return () => {
+      parent.removeChild(el);
+    };
   }, []);
-};
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(/* @__PURE__ */ jsx(CanvasPortal, { ...props }), el) });
+});
+InitCanvasFC.displayName = "InitCanvasFC";
 export {
-  useFunction
+  InitCanvasFC
 };
 //# sourceMappingURL=main9.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main9.mjs","sources":["../../../src/core/use-function.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const useFunction = <T extends (...args: any[]) => any>(callback: T): T => {\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n  return useCallback((...args: any[]) => {\n    return callbackRef.current(...args);\n  }, []) as T;\n};\n"],"names":[],"mappings":";AAGa,MAAA,cAAc,CAAoC,aAAmB;AAC1E,QAAA,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AACf,SAAA,YAAY,IAAI,SAAgB;AAC9B,WAAA,YAAY,QAAQ,GAAG,IAAI;AAAA,EACpC,GAAG,CAAE,CAAA;AACP;"}
+{"version":3,"file":"main9.mjs","sources":["../../../src/core/canvas-overlay/init-canvas-fc.tsx"],"sourcesContent":["import { memo, useEffect, useState } from \"react\";\nimport { createPortal } from 'react-dom';\nimport { Matrix4Tuple } from \"three\";\nimport { CanvasProps } from \"../../api/canvas-props\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { CanvasPortal } from \"./canvas-portal\";\n\ninterface InitCanvasFCProps extends CanvasProps {\n  map: MapInstance,\n  setOnRender: (callback: () => (mx: Matrix4Tuple) => void) => void,\n  frameloop?: 'always' | 'demand',\n  fromLngLat: FromLngLat,\n}\nexport const InitCanvasFC = memo<InitCanvasFCProps>((props) => {\n  const canvas = props.map.getCanvas() // eslint-disable-line @typescript-eslint/no-non-null-assertion\n\n  const [el] = useState(() => {\n    const el = document.createElement('div');\n    el.style.position = 'absolute';\n    el.style.top = '0';\n    el.style.bottom = '0';\n    el.style.left = '0';\n    el.style.right = '0';\n    el.style.pointerEvents = 'none';\n    return el\n  })\n\n  useEffect(() => {\n    const parent = canvas.parentElement!; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    parent.appendChild(el);\n    return () => {\n      parent.removeChild(el);\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n  return <>\n    {createPortal((\n      <CanvasPortal {...props} />\n    ), el)}\n  </>\n})\nInitCanvasFC.displayName = 'InitCanvasFC';\n"],"names":["el"],"mappings":";;;;AAaa,MAAA,eAAe,KAAwB,CAAC,UAAU;AACvD,QAAA,SAAS,MAAM,IAAI,UAAU;AAEnC,QAAM,CAAC,EAAE,IAAI,SAAS,MAAM;AACpBA,UAAAA,MAAK,SAAS,cAAc,KAAK;AACvCA,QAAG,MAAM,WAAW;AACpBA,QAAG,MAAM,MAAM;AACfA,QAAG,MAAM,SAAS;AAClBA,QAAG,MAAM,OAAO;AAChBA,QAAG,MAAM,QAAQ;AACjBA,QAAG,MAAM,gBAAgB;AAClBA,WAAAA;AAAAA,EAAA,CACR;AAED,YAAU,MAAM;AACd,UAAM,SAAS,OAAO;AACtB,WAAO,YAAY,EAAE;AACrB,WAAO,MAAM;AACX,aAAO,YAAY,EAAE;AAAA,IAAA;AAAA,EAEzB,GAAG,CAAE,CAAA;AACE,SAAA,oBAAA,UAAA,EACJ,uBACE,oBAAA,cAAA,EAAc,GAAG,MAAO,CAAA,GACxB,EAAE,EACP,CAAA;AACF,CAAC;AACD,aAAa,cAAc;"}

package/dist/maplibre/types/api/coords-to-vector-3.d.ts

@@ -1,4 +1,4 @@
-import { Vector3Tuple } from "three";
-import { Coords } from "./coords";
-/** converts geo coordinates `point` to a `Vector3Tuple` (represented in meters) using `origin` as the origin. */
+import { Vector3Tuple } from 'three';
+import { Coords } from './coords';
+export declare function averageMercatorScale(originLat: number, pointLat: number, steps?: number): number;
 export declare function coordsToVector3(point: Coords, origin: Coords): Vector3Tuple;

package/dist/maplibre/types/api/index.d.ts

@@ -1,5 +1,6 @@
 export * from './canvas-props';
 export * from './coordinates';
-export * from './near-coordinates';
 export * from './coords';
 export * from './coords-to-vector-3';
+export * from './near-coordinates';
+export * from './vector-3-to-coords';

package/dist/maplibre/types/api/vector-3-to-coords.d.ts

@@ -0,0 +1,3 @@
+import { Vector3Tuple } from "three";
+import { Coords } from "./coords";
+export declare function vector3ToCoords(position: Vector3Tuple, origin: Coords): Coords;

package/dist/maplibre/types/core/canvas-overlay/sync-camera-fc.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { Matrix4Tuple } from "three";
 import { Coords } from "../../api/coords";
+import { MapInstance } from "../generic-map";
 interface SyncCameraFCProps extends Coords {
     setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void;
     /** on `useFrame` it will manually render (used by `<Coordinates>`) */
     manualRender?: boolean;
     onReady?: () => void;
-    mapCanvas: HTMLCanvasElement;
+    map: MapInstance;
 }
 /** React Component (FC) to sync the Three camera with the map provider */
 export declare const SyncCameraFC: import("react").NamedExoticComponent<SyncCameraFCProps>;

package/dist/maplibre/types/core/earth-radius.d.ts

@@ -0,0 +1 @@
+export declare const earthRadius = 6371008.8;

package/dist/types/api/coords-to-vector-3.d.ts

@@ -1,4 +1,4 @@
-import { Vector3Tuple } from "three";
-import { Coords } from "./coords";
-/** converts geo coordinates `point` to a `Vector3Tuple` (represented in meters) using `origin` as the origin. */
+import { Vector3Tuple } from 'three';
+import { Coords } from './coords';
+export declare function averageMercatorScale(originLat: number, pointLat: number, steps?: number): number;
 export declare function coordsToVector3(point: Coords, origin: Coords): Vector3Tuple;

package/dist/types/api/index.d.ts

@@ -1,5 +1,6 @@
 export * from './canvas-props';
 export * from './coordinates';
-export * from './near-coordinates';
 export * from './coords';
 export * from './coords-to-vector-3';
+export * from './near-coordinates';
+export * from './vector-3-to-coords';

package/dist/types/api/vector-3-to-coords.d.ts

@@ -0,0 +1,3 @@
+import { Vector3Tuple } from "three";
+import { Coords } from "./coords";
+export declare function vector3ToCoords(position: Vector3Tuple, origin: Coords): Coords;

package/dist/types/core/canvas-overlay/sync-camera-fc.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { Matrix4Tuple } from "three";
 import { Coords } from "../../api/coords";
+import { MapInstance } from "../generic-map";
 interface SyncCameraFCProps extends Coords {
     setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void;
     /** on `useFrame` it will manually render (used by `<Coordinates>`) */
     manualRender?: boolean;
     onReady?: () => void;
-    mapCanvas: HTMLCanvasElement;
+    map: MapInstance;
 }
 /** React Component (FC) to sync the Three camera with the map provider */
 export declare const SyncCameraFC: import("react").NamedExoticComponent<SyncCameraFCProps>;

package/dist/types/core/earth-radius.d.ts

@@ -0,0 +1 @@
+export declare const earthRadius = 6371008.8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",
@@ -29,13 +29,11 @@
     "build:stories": "yarn ladle build",
     "test": "yarn vitest"
   },
-  "dependencies": {
-    "@turf/turf": "^7.0.0-alpha.2"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
-    "@ladle/react": "^2.13.0",
-    "@react-three/drei": "^9.92.3",
+    "@ladle/react": "^4.0.2",
+    "@react-three/drei": "^9.97.6",
     "@react-three/fiber": "^8.15.12",
     "@react-three/postprocessing": "^2.15.11",
     "@types/luxon": "^3.3.1",
@@ -48,7 +46,6 @@
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
     "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-v8": "^0.33.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -56,11 +53,11 @@
     "happy-dom": "^10.5.2",
     "leva": "^0.9.35",
     "luxon": "^3.3.0",
-    "mapbox-gl": "^2.15.0",
+    "mapbox-gl": "^3.1.2",
     "maplibre-gl": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.0",
+    "react-map-gl": "^7.1.7",
     "suncalc": "^1.9.0",
     "suspend-react": "^0.1.3",
     "three": "^0.159.0",

package/stories/package.json

@@ -6,8 +6,8 @@
     "dev": "yarn ladle serve"
   },
   "dependencies": {
-    "@ladle/react": "^2.16.0",
-    "@react-three/drei": "^9.92.3",
+    "@ladle/react": "^4.0.2",
+    "@react-three/drei": "^9.97.6",
     "@react-three/fiber": "^8.15.12",
     "@react-three/postprocessing": "^2.15.11",
     "@types/luxon": "^3.3.7",
@@ -15,12 +15,12 @@
     "@types/tz-lookup": "^6.1.2",
     "leva": "^0.9.35",
     "luxon": "^3.4.4",
-    "mapbox-gl": "^2.15.0",
+    "mapbox-gl": "^3.1.2",
     "maplibre-gl": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.2",
-    "react-three-map": "^0.6.1",
+    "react-map-gl": "^7.1.7",
+    "react-three-map": "^0.8.1",
     "suncalc": "^1.9.0",
     "three": "^0.159.0",
     "three-stdlib": "^2.28.7",