react-three-map 0.8.0 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # react-three-map
 
+## 0.8.2
+
+### Patch Changes
+
+- 58c42d9: - Improve accuracy at long distances for `coordsToVector3`.
+  - Improve translation accuracy for `NearCoordinates`, but scale is still ignored.
+  - Update `earthRadius` from `6378137` to `6371008.8` to match [Mapbox](https://github.com/maplibre/maplibre-gl-js/blob/8ea76118210dd18fa52fdb83f2cbdd1229807346/src/geo/lng_lat.ts#L8) and [Maplibre](https://github.com/maplibre/maplibre-gl-js/blob/main/src/geo/lng_lat.ts#L8).
+
+## 0.8.1
+
+### Patch Changes
+
+- 9dfe4f6: Remove `turf` dependency.
+- 9dfe4f6: Map to wait for r3f to finish rendering before the next render in overlay mode.
+
 ## 0.8.0
 
 ### Minor Changes

package/README.md

@@ -11,10 +11,10 @@
 
 Until now you had:
 
-| imperative | declarative (react)    |
-| --------------- | ----------------- |
-| Maplibre/Mapbox | react-map-gl      |
-| THREE.js        | react-three-fiber |
+| imperative      | declarative (react) |
+| --------------- | ------------------- |
+| Maplibre/Mapbox | react-map-gl        |
+| THREE.js        | react-three-fiber   |
 
 Now with `react-three-map`, you can use them together :fist_right::star::fist_left:.
 
@@ -22,6 +22,22 @@ Now with `react-three-map`, you can use them together :fist_right::star::fist_le
 npm install react-three-map
 ```
 
+- [React Three Map](#react-three-map)
+  - [:book: Examples](#book-examples)
+  - [:mag: What does it look like?](#mag-what-does-it-look-like)
+  - [:thinking: Why we build this?](#thinking-why-we-build-this)
+  - [:gear: API](#gear-api)
+    - [Canvas](#canvas)
+      - [Render Props](#render-props)
+      - [Render Props removed from `@react-three/fiber`](#render-props-removed-from-react-threefiber)
+    - [Coordinates](#coordinates)
+    - [NearCoordinates](#nearcoordinates)
+    - [useMap](#usemap)
+    - [coordsToVector3](#coordstovector3)
+    - [vector3ToCoords](#vector3tocoords)
+  - [:tada: Made with `react-three-map`](#tada-made-with-react-three-map)
+
+
 ## :book: Examples
 
 Check out our examples [here](https://rodrigohamuy.github.io/react-three-map) (powered by [Ladle](https://ladle.dev/)).
@@ -120,13 +136,13 @@ It shares most of the props from R3F `<Canvas>`, so you can check them directly
 
 #### Render Props
 
-| Prop       | Description                                      | Default    |
-| ---------  | ------------------------------------------------ | ---------- |
-| latitude   | The latitude coordinate where to add the scene.  |            |
-| longitude  | The longitude coordinate where to add the scene. |            |
-| altitude   | The altitude coordinate where to add the scene.  | `0`        |
-| frameloop  | Render mode: `"always"`, `"demand"`.             | `"always"` |
-| overlay    | Render on a separated canvas.                    | `false`    |
+| Prop      | Description                                      | Default    |
+| --------- | ------------------------------------------------ | ---------- |
+| latitude  | The latitude coordinate where to add the scene.  |            |
+| longitude | The longitude coordinate where to add the scene. |            |
+| altitude  | The altitude coordinate where to add the scene.  | `0`        |
+| frameloop | Render mode: `"always"`, `"demand"`.             | `"always"` |
+| overlay   | Render on a separated canvas.                    | `false`    |
 
 **About `overlay`**
 
@@ -172,21 +188,21 @@ import { Canvas, Coordinates } from 'react-three-map'
 </Canvas>
 ```
 
-| Props       | Description                                      | Default    |
-| ---------  | ------------------------------------------------ | ---------- |
-| latitude   | The latitude coordinate where to add the scene.  |            |
-| longitude  | The longitude coordinate where to add the scene. |            |
-| altitude   | The altitude coordinate where to add the scene.  | `0`        |
+| Props     | Description                                      | Default |
+| --------- | ------------------------------------------------ | ------- |
+| latitude  | The latitude coordinate where to add the scene.  |         |
+| longitude | The longitude coordinate where to add the scene. |         |
+| altitude  | The altitude coordinate where to add the scene.  | `0`     |
 
 ### NearCoordinates
 
 [![](https://img.shields.io/badge/-demo-%23ff69b4)](https://rodrigohamuy.github.io/react-three-map/?story=multi-coordinates--default)
 
-Same as `Coordinates`, but with an error margin that increases the further you are from the origin.
+Same as `Coordinates`, but scale is ignored in exchange of being able to be rendered under the same scene.
 
-Recommended to use at city level distances, but margin errors will be noticeable at country level distances.
+Works well at city level distances, but since scale remains unchanged, is not recommended at country level distances.
 
-Check the story to see the difference between the two.
+Check the story to see the difference between the two or check #102 for more info.
 
 ### useMap
 
@@ -208,12 +224,35 @@ const Component = () => {
 
 This utility function converts geographic coordinates into a `Vector3Tuple`, which represents a 3D vector in meters.
 
-Similar to `NearCoordinates` it has a relatively good precision at city distances, but is not recommended if your distances are too big.
+Similar to `NearCoordinates`, remember that this only updates positions (translation) but that scale is not taken into account, which has an important factor at very long distances (country level).
 
 
-| Parameter      | Description                                                       |
-| -------------- | ----------------------------------------------------------------- |
+| Parameter        | Description                                                     |
+| ---------------- | --------------------------------------------------------------- |
 | `point: Coords`  | The geographic coordinates of the point to convert.             |
 | `origin: Coords` | The geographic coordinates used as the origin for calculations. |
 
-Returns a `Vector3Tuple` representing the 3D position of the point relative to the origin.
+Returns a `Vector3Tuple` representing the 3D position of the point relative to the origin.
+
+### vector3ToCoords
+
+[![](https://img.shields.io/badge/-demo-%23ff69b4)](https://rodrigohamuy.github.io/react-three-map/?story=pivot-controls--default)
+
+This utility function converts a `Vector3Tuple`, which represents a 3D vector in meters, back into geographic coordinates.
+
+It is the inverse of `coordsToVector3` but it does not have a good level of precision at long distances since we haven't reverse engineered #102 fix yet.
+
+Recommended to use at city level distances, but margin errors will be noticeable at country level distances.
+
+| Parameter                | Description                                                     |
+| ------------------------ | --------------------------------------------------------------- |
+| `position: Vector3Tuple` | The 3D vector to convert back into geographic coordinates.      |
+| `origin: Coords`         | The geographic coordinates used as the origin for calculations. |
+
+Returns a `Coords` object representing the geographic coordinates of the point relative to the origin.
+
+## :tada: Made with `react-three-map`
+
+[![studio carto](./made-with/studio-carto-urban-project.webp)](https://x.com/lonjon_thomas/status/1767151007983685979?s=20)
+
+[![post](https://img.shields.io/badge/post-black?style=for-the-badge&logo=x)](https://x.com/lonjon_thomas/status/1767151007983685979?s=20) [![page](https://img.shields.io/badge/page-black?style=for-the-badge)](https://studio-carto-urban-project.netlify.app/)

package/dist/cjs/main.js

@@ -7,7 +7,6 @@ const react = require("react");
 const reactMapGl = require("react-map-gl");
 const THREE = require("three");
 const reactDom = require("react-dom");
-const turf = require("@turf/turf");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -148,6 +147,35 @@ function RenderAtCoords({ r3m, origin }) {
   }, [set, r3m]);
   return /* @__PURE__ */ jsxRuntime.jsx("perspectiveCamera", { ref: cameraRef });
 }
+const earthRadius = 63710088e-1;
+const mercatorScaleLookup = {};
+function getMercatorScale(lat) {
+  const index = Math.round(lat * 1e3);
+  if (mercatorScaleLookup[index] === void 0) {
+    mercatorScaleLookup[index] = 1 / Math.cos(lat * THREE.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) * THREE.MathUtils.DEG2RAD;
+  const longitudeDiff = (point.longitude - origin.longitude) * THREE.MathUtils.DEG2RAD;
+  const altitudeDiff = (point.altitude || 0) - (origin.altitude || 0);
+  const x = longitudeDiff * earthRadius * Math.cos(origin.latitude * THREE.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];
+}
 function useCoords() {
   const coords = fiber.useThree((s) => s.coords);
   return coords;
@@ -172,18 +200,6 @@ function useSetRootCoords(store, {
 function setCoords(store, coords) {
   store.setState({ coords });
 }
-function coordsToVector3(point, origin) {
-  const originCoords = [origin.longitude, origin.latitude, origin.altitude || 0];
-  const pointCoords = [point.longitude, point.latitude, point.altitude || 0];
-  const dist = turf.distance(originCoords, pointCoords, { units: "meters" });
-  const angle = turf.bearing(originCoords, pointCoords);
-  const adjustedAngle = angle - 90;
-  const x = dist * Math.cos(adjustedAngle * THREE.MathUtils.DEG2RAD);
-  const y = (point.altitude || 0) - (origin.altitude || 0);
-  const z = dist * Math.sin(adjustedAngle * THREE.MathUtils.DEG2RAD);
-  const v3 = [x, y, z];
-  return v3;
-}
 const NearCoordinates = react.memo(({ children, ...coords }) => {
   const { latitude, longitude, altitude } = useCoords();
   const pos2 = react.useMemo(() => coordsToVector3(coords, { latitude, longitude, altitude }), [
@@ -198,6 +214,14 @@ const NearCoordinates = react.memo(({ children, ...coords }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("object3D", { position: pos2, children });
 });
 NearCoordinates.displayName = "NearCoordinates";
+function vector3ToCoords(position, origin) {
+  const [x, y, z] = position;
+  const latitude = origin.latitude + -z / earthRadius * THREE.MathUtils.RAD2DEG;
+  const longitude = origin.longitude + x / earthRadius * THREE.MathUtils.RAD2DEG / Math.cos(origin.latitude * THREE.MathUtils.DEG2RAD);
+  const altitude = (origin.altitude || 0) + y;
+  const coords = { latitude, longitude, altitude };
+  return coords;
+}
 const useFunction = (callback) => {
   const callbackRef = react.useRef(callback);
   callbackRef.current = callback;
@@ -370,8 +394,9 @@ const SyncCameraFC = react.memo(({
   setOnRender,
   manualRender,
   onReady,
-  mapCanvas
+  map
 }) => {
+  const mapCanvas = map.getCanvas();
   const r3m = useR3M();
   const camRef = react.useRef(null);
   const camera = fiber.useThree((s) => s.camera);
@@ -383,13 +408,23 @@ const SyncCameraFC = react.memo(({
   const set = fiber.useThree((s) => s.set);
   const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: r3m.fromLngLat });
   const ready = react.useRef(false);
+  const triggerRepaint = react.useMemo(() => map.triggerRepaint, [map]);
+  const mapPaintRequests = react.useRef(0);
+  const triggerRepaintOff = useFunction(() => {
+    mapPaintRequests.current++;
+  });
   fiber.useFrame(() => {
     syncCamera(camera, origin, r3m.viewProjMx);
-    if (!manualRender)
-      return;
-    gl.render(scene, camera);
+    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,
@@ -470,7 +505,7 @@ const CanvasPortal = react.memo(({
             altitude,
             setOnRender,
             onReady,
-            mapCanvas
+            map
           }
         ),
         ready && children
@@ -541,5 +576,7 @@ const useMap = useMap$1;
 exports.Canvas = Canvas;
 exports.Coordinates = Coordinates;
 exports.NearCoordinates = NearCoordinates;
+exports.averageMercatorScale = averageMercatorScale;
 exports.coordsToVector3 = coordsToVector3;
 exports.useMap = useMap;
+exports.vector3ToCoords = vector3ToCoords;

package/dist/es/main.mjs

@@ -1,14 +1,17 @@
 import { useMap as useMap$1 } from "./main2.mjs";
 import { Canvas } from "./main3.mjs";
 import { Coordinates } from "./main4.mjs";
-import { NearCoordinates } from "./main5.mjs";
-import { coordsToVector3 } from "./main6.mjs";
+import { averageMercatorScale, coordsToVector3 } from "./main5.mjs";
+import { NearCoordinates } from "./main6.mjs";
+import { vector3ToCoords } from "./main7.mjs";
 const useMap = useMap$1;
 export {
   Canvas,
   Coordinates,
   NearCoordinates,
+  averageMercatorScale,
   coordsToVector3,
-  useMap
+  useMap,
+  vector3ToCoords
 };
 //# sourceMappingURL=main.mjs.map

package/dist/es/main.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main.mjs","sources":["../../src/mapbox.index.ts"],"sourcesContent":["import type { Map } from 'mapbox-gl';\nimport { useMap as useMapGeneric } from './api/use-map';\n\nexport * from './api';\nexport * from './mapbox/canvas';\n\nexport const useMap = useMapGeneric<Map>;\n"],"names":["useMapGeneric"],"mappings":";;;;;AAMO,MAAM,SAASA;"}
+{"version":3,"file":"main.mjs","sources":["../../src/mapbox.index.ts"],"sourcesContent":["import type { Map } from 'mapbox-gl';\nimport { useMap as useMapGeneric } from './api/use-map';\n\nexport * from './api';\nexport * from './mapbox/canvas';\n\nexport const useMap = useMapGeneric<Map>;\n"],"names":["useMapGeneric"],"mappings":";;;;;;AAMO,MAAM,SAASA;"}

package/dist/es/main10.mjs

@@ -1,37 +1,12 @@
-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);
+import { useRef, useCallback } from "react";
+const useFunction = (callback) => {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
 };
-function calculateFar(c, d, near) {
-  const numerator = d * (c - 1);
-  const denominator = c * near + near;
-  const far = numerator / denominator;
-  return far;
-}
 export {
-  syncCamera
+  useFunction
 };
 //# sourceMappingURL=main10.mjs.map

package/dist/es/main10.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main10.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":"main10.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;"}

package/dist/es/main11.mjs

@@ -1,15 +1,37 @@
-import { useMemo } from "react";
-import { coordsToMatrix } from "./main17.mjs";
-function useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat }) {
-  const m4 = useMemo(() => coordsToMatrix({
-    latitude,
-    longitude,
-    altitude,
-    fromLngLat
-  }), [latitude, longitude, altitude, fromLngLat]);
-  return m4;
+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;
 }
 export {
-  useCoordsToMatrix
+  syncCamera
 };
 //# sourceMappingURL=main11.mjs.map

package/dist/es/main11.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main11.mjs","sources":["../../src/core/use-coords-to-matrix.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { coordsToMatrix } from \"./coords-to-matrix\";\n\ntype Props = Parameters<typeof coordsToMatrix>[0];\n\n/** calculate matrix from coordinates */\nexport function useCoordsToMatrix({latitude, longitude, altitude, fromLngLat}: Props) {\n  const m4 = useMemo(() => coordsToMatrix({\n    latitude, longitude, altitude, fromLngLat,\n  }), [latitude, longitude, altitude, fromLngLat]);\n\n  return m4;\n}"],"names":[],"mappings":";;AAMO,SAAS,kBAAkB,EAAC,UAAU,WAAW,UAAU,cAAoB;AAC9E,QAAA,KAAK,QAAQ,MAAM,eAAe;AAAA,IACtC;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC,GAAG,CAAC,UAAU,WAAW,UAAU,UAAU,CAAC;AAExC,SAAA;AACT;"}
+{"version":3,"file":"main11.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;"}

package/dist/es/main12.mjs

@@ -1,26 +1,15 @@
-import { useThree, _roots } from "@react-three/fiber";
-import { useState } from "react";
-import { Matrix4 } from "three";
-function useR3M() {
-  const r3m = useThree((s) => s.r3m);
-  return r3m;
-}
-function useInitR3M(props) {
-  const canvas = useThree((s) => s.gl.domElement);
-  useState(() => {
-    const store = _roots.get(canvas).store;
-    initR3M({ ...props, store });
-  });
-}
-function initR3M({ store, ...props }) {
-  const viewProjMx = new Matrix4().identity().toArray();
-  const r3m = { ...props, viewProjMx };
-  store.setState({ r3m });
-  return r3m;
+import { useMemo } from "react";
+import { coordsToMatrix } from "./main19.mjs";
+function useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat }) {
+  const m4 = useMemo(() => coordsToMatrix({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat
+  }), [latitude, longitude, altitude, fromLngLat]);
+  return m4;
 }
 export {
-  initR3M,
-  useInitR3M,
-  useR3M
+  useCoordsToMatrix
 };
 //# sourceMappingURL=main12.mjs.map

package/dist/es/main12.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main12.mjs","sources":["../../src/core/use-r3m.ts"],"sourcesContent":["import { RootState, _roots, useThree } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { Matrix4, Matrix4Tuple } from \"three\";\nimport { UseBoundStore } from 'zustand';\nimport { FromLngLat, MapInstance } from \"./generic-map\";\n\nexport interface R3M<T extends MapInstance = MapInstance> {\n  /** Map provider */\n  map: T,\n  /** view projection matrix coming from the map provider */\n  viewProjMx: Matrix4Tuple,\n  fromLngLat: FromLngLat,\n}\n\nexport function useR3M<T extends MapInstance> () {\n  const r3m = useThree(s=>(s as any).r3m) as R3M<T>; // eslint-disable-line @typescript-eslint/no-explicit-any\n  return r3m;\n}\n\n/** init `useR3M` hook */\nexport function useInitR3M<T extends MapInstance>(props: {\n  map: T; fromLngLat: FromLngLat;\n}) {\n  const canvas = useThree(s => s.gl.domElement);\n  // to run only once\n  useState(()=>{\n    const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    initR3M({...props, store})\n  })\n}\n\nexport function initR3M<T extends MapInstance>({store, ...props}: {\n  map: T;\n  fromLngLat: FromLngLat;\n  store: UseBoundStore<RootState>;\n}) {\n  const viewProjMx = new Matrix4().identity().toArray();\n  const r3m : R3M<T> = { ...props, viewProjMx };\n  store.setState({r3m} as any); // eslint-disable-line @typescript-eslint/no-explicit-any\n  return r3m;\n}"],"names":[],"mappings":";;;AAcO,SAAS,SAAiC;AAC/C,QAAM,MAAM,SAAS,CAAI,MAAA,EAAU,GAAG;AAC/B,SAAA;AACT;AAGO,SAAS,WAAkC,OAE/C;AACD,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AAE5C,WAAS,MAAI;AACX,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAClC,YAAQ,EAAC,GAAG,OAAO,MAAM,CAAA;AAAA,EAAA,CAC1B;AACH;AAEO,SAAS,QAA+B,EAAC,OAAO,GAAG,SAIvD;AACD,QAAM,aAAa,IAAI,QAAA,EAAU,WAAW,QAAQ;AACpD,QAAM,MAAe,EAAE,GAAG,OAAO,WAAW;AACtC,QAAA,SAAS,EAAC,IAAA,CAAW;AACpB,SAAA;AACT;"}
+{"version":3,"file":"main12.mjs","sources":["../../src/core/use-coords-to-matrix.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { coordsToMatrix } from \"./coords-to-matrix\";\n\ntype Props = Parameters<typeof coordsToMatrix>[0];\n\n/** calculate matrix from coordinates */\nexport function useCoordsToMatrix({latitude, longitude, altitude, fromLngLat}: Props) {\n  const m4 = useMemo(() => coordsToMatrix({\n    latitude, longitude, altitude, fromLngLat,\n  }), [latitude, longitude, altitude, fromLngLat]);\n\n  return m4;\n}"],"names":[],"mappings":";;AAMO,SAAS,kBAAkB,EAAC,UAAU,WAAW,UAAU,cAAoB;AAC9E,QAAA,KAAK,QAAQ,MAAM,eAAe;AAAA,IACtC;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC,GAAG,CAAC,UAAU,WAAW,UAAU,UAAU,CAAC;AAExC,SAAA;AACT;"}

package/dist/es/main13.mjs

@@ -1,33 +1,26 @@
 import { useThree, _roots } from "@react-three/fiber";
-import { useMemo } from "react";
-function useCoords() {
-  const coords = useThree((s) => s.coords);
-  return coords;
+import { useState } from "react";
+import { Matrix4 } from "three";
+function useR3M() {
+  const r3m = useThree((s) => s.r3m);
+  return r3m;
 }
-function useSetCoords({ longitude, latitude, altitude }) {
+function useInitR3M(props) {
   const canvas = useThree((s) => s.gl.domElement);
-  useMemo(() => {
+  useState(() => {
     const store = _roots.get(canvas).store;
-    const coords = { longitude, latitude, altitude };
-    setCoords(store, coords);
-  }, [longitude, latitude, altitude]);
+    initR3M({ ...props, store });
+  });
 }
-function useSetRootCoords(store, {
-  longitude,
-  latitude,
-  altitude
-}) {
-  useMemo(() => {
-    setCoords(store, { longitude, latitude, altitude });
-  }, [longitude, latitude, altitude]);
-}
-function setCoords(store, coords) {
-  store.setState({ coords });
+function initR3M({ store, ...props }) {
+  const viewProjMx = new Matrix4().identity().toArray();
+  const r3m = { ...props, viewProjMx };
+  store.setState({ r3m });
+  return r3m;
 }
 export {
-  setCoords,
-  useCoords,
-  useSetCoords,
-  useSetRootCoords
+  initR3M,
+  useInitR3M,
+  useR3M
 };
 //# sourceMappingURL=main13.mjs.map

package/dist/es/main13.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main13.mjs","sources":["../../src/core/use-coords.tsx"],"sourcesContent":["import { RootState, _roots, useThree } from \"@react-three/fiber\";\nimport { useMemo } from \"react\";\nimport { UseBoundStore } from 'zustand';\nimport { Coords } from \"../api/coords\";\n\nexport function useCoords() {\n  const coords = useThree(s=>(s as any).coords) as Coords; // eslint-disable-line @typescript-eslint/no-explicit-any\n  return coords;\n}\n\nexport function useSetCoords({longitude, latitude, altitude}: Coords) {\n  \n  const canvas = useThree(s => s.gl.domElement);\n  useMemo(()=>{\n    const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    const coords : Coords = { longitude, latitude, altitude };\n    setCoords(store, coords);\n  }, [longitude, latitude, altitude]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nexport function useSetRootCoords(store:UseBoundStore<RootState>, {\n  longitude, latitude, altitude\n}: Coords) {\n  useMemo(()=>{\n    setCoords(store, {longitude, latitude, altitude});\n  }, [longitude, latitude, altitude]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nexport function setCoords(store:UseBoundStore<RootState>, coords: Coords) {\n  store.setState({coords} as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n}"],"names":[],"mappings":";;AAKO,SAAS,YAAY;AAC1B,QAAM,SAAS,SAAS,CAAI,MAAA,EAAU,MAAM;AACrC,SAAA;AACT;AAEO,SAAS,aAAa,EAAC,WAAW,UAAU,YAAmB;AAEpE,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AAC5C,UAAQ,MAAI;AACV,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAClC,UAAM,SAAkB,EAAE,WAAW,UAAU,SAAS;AACxD,cAAU,OAAO,MAAM;AAAA,EACtB,GAAA,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;AAEO,SAAS,iBAAiB,OAAgC;AAAA,EAC/D;AAAA,EAAW;AAAA,EAAU;AACvB,GAAW;AACT,UAAQ,MAAI;AACV,cAAU,OAAO,EAAC,WAAW,UAAU,SAAS,CAAA;AAAA,EAC/C,GAAA,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;AAEgB,SAAA,UAAU,OAAgC,QAAgB;AAClE,QAAA,SAAS,EAAC,OAAA,CAAc;AAChC;"}
+{"version":3,"file":"main13.mjs","sources":["../../src/core/use-r3m.ts"],"sourcesContent":["import { RootState, _roots, useThree } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { Matrix4, Matrix4Tuple } from \"three\";\nimport { UseBoundStore } from 'zustand';\nimport { FromLngLat, MapInstance } from \"./generic-map\";\n\nexport interface R3M<T extends MapInstance = MapInstance> {\n  /** Map provider */\n  map: T,\n  /** view projection matrix coming from the map provider */\n  viewProjMx: Matrix4Tuple,\n  fromLngLat: FromLngLat,\n}\n\nexport function useR3M<T extends MapInstance> () {\n  const r3m = useThree(s=>(s as any).r3m) as R3M<T>; // eslint-disable-line @typescript-eslint/no-explicit-any\n  return r3m;\n}\n\n/** init `useR3M` hook */\nexport function useInitR3M<T extends MapInstance>(props: {\n  map: T; fromLngLat: FromLngLat;\n}) {\n  const canvas = useThree(s => s.gl.domElement);\n  // to run only once\n  useState(()=>{\n    const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    initR3M({...props, store})\n  })\n}\n\nexport function initR3M<T extends MapInstance>({store, ...props}: {\n  map: T;\n  fromLngLat: FromLngLat;\n  store: UseBoundStore<RootState>;\n}) {\n  const viewProjMx = new Matrix4().identity().toArray();\n  const r3m : R3M<T> = { ...props, viewProjMx };\n  store.setState({r3m} as any); // eslint-disable-line @typescript-eslint/no-explicit-any\n  return r3m;\n}"],"names":[],"mappings":";;;AAcO,SAAS,SAAiC;AAC/C,QAAM,MAAM,SAAS,CAAI,MAAA,EAAU,GAAG;AAC/B,SAAA;AACT;AAGO,SAAS,WAAkC,OAE/C;AACD,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AAE5C,WAAS,MAAI;AACX,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAClC,YAAQ,EAAC,GAAG,OAAO,MAAM,CAAA;AAAA,EAAA,CAC1B;AACH;AAEO,SAAS,QAA+B,EAAC,OAAO,GAAG,SAIvD;AACD,QAAM,aAAa,IAAI,QAAA,EAAU,WAAW,QAAQ;AACpD,QAAM,MAAe,EAAE,GAAG,OAAO,WAAW;AACtC,QAAA,SAAS,EAAC,IAAA,CAAW;AACpB,SAAA;AACT;"}

package/dist/es/main14.mjs

@@ -1,26 +1,5 @@
-import { syncCamera } from "./main10.mjs";
-import { useFunction } from "./main9.mjs";
-function useRender({
-  map,
-  origin,
-  useThree,
-  frameloop,
-  r3m
-}) {
-  const render = useFunction((_gl, projViewMx) => {
-    r3m.viewProjMx.splice(0, 16, ...projViewMx);
-    const state = useThree.getState();
-    const camera = state.camera;
-    const { gl, advance } = state;
-    syncCamera(camera, origin, projViewMx);
-    gl.resetState();
-    advance(Date.now() * 1e-3, true);
-    if (!frameloop || frameloop === "always")
-      map.triggerRepaint();
-  });
-  return render;
-}
+const earthRadius = 63710088e-1;
 export {
-  useRender
+  earthRadius
 };
 //# sourceMappingURL=main14.mjs.map

package/dist/es/main14.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main14.mjs","sources":["../../src/core/canvas-in-layer/use-render.ts"],"sourcesContent":["import { RootState } from \"@react-three/fiber\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { UseBoundStore } from \"zustand\";\nimport { MapInstance } from \"../generic-map\";\nimport { syncCamera } from \"../sync-camera\";\nimport { useFunction } from \"../use-function\";\nimport { R3M } from \"../use-r3m\";\n\nexport function useRender({\n  map, origin, useThree, frameloop, r3m,\n} :{\n  map: MapInstance,\n  origin: Matrix4Tuple,\n  useThree: UseBoundStore<RootState>,\n  frameloop?: 'always' | 'demand',\n  r3m: R3M\n}) {\n  const render = useFunction((_gl: WebGL2RenderingContext, projViewMx: number[]) => {\n    r3m.viewProjMx.splice(0, 16, ...projViewMx)\n    const state = useThree.getState();\n    const camera = state.camera as PerspectiveCamera;\n    const {gl, advance} = state;\n    syncCamera(camera as PerspectiveCamera, origin, projViewMx as Matrix4Tuple);\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (!frameloop || frameloop === 'always') map.triggerRepaint();\n  })\n  return render;\n}"],"names":[],"mappings":";;AAQO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAK;AAAA,EAAQ;AAAA,EAAU;AAAA,EAAW;AACpC,GAMG;AACD,QAAM,SAAS,YAAY,CAAC,KAA6B,eAAyB;AAChF,QAAI,WAAW,OAAO,GAAG,IAAI,GAAG,UAAU;AACpC,UAAA,QAAQ,SAAS;AACvB,UAAM,SAAS,MAAM;AACf,UAAA,EAAC,IAAI,QAAW,IAAA;AACX,eAAA,QAA6B,QAAQ,UAA0B;AAC1E,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAC5B,QAAA,CAAC,aAAa,cAAc;AAAU,UAAI,eAAe;AAAA,EAAA,CAC9D;AACM,SAAA;AACT;"}
+{"version":3,"file":"main14.mjs","sources":["../../src/core/earth-radius.ts"],"sourcesContent":["export const earthRadius = 6371008.8;\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;"}