react-three-map 0.8.1 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

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,7 +224,7 @@ 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                                                     |
@@ -224,7 +240,9 @@ Returns a `Vector3Tuple` representing the 3D position of the point relative to t
 
 This utility function converts a `Vector3Tuple`, which represents a 3D vector in meters, back into geographic coordinates.
 
-It is the inverse of `coordsToVector3` and maintains the same level of precision. It is not recommended for use with very large distances.
+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                                                     |
 | ------------------------ | --------------------------------------------------------------- |
@@ -232,3 +250,9 @@ It is the inverse of `coordsToVector3` and maintains the same level of precision
 | `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

@@ -147,14 +147,33 @@ function RenderAtCoords({ r3m, origin }) {
   }, [set, r3m]);
   return /* @__PURE__ */ jsxRuntime.jsx("perspectiveCamera", { ref: cameraRef });
 }
-const earthRadius = 6378137;
+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 z = -latitudeDiff * earthRadius;
+  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() {
@@ -557,6 +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,7 +1,7 @@
 import { useMap as useMap$1 } from "./main2.mjs";
 import { Canvas } from "./main3.mjs";
 import { Coordinates } from "./main4.mjs";
-import { coordsToVector3 } from "./main5.mjs";
+import { averageMercatorScale, coordsToVector3 } from "./main5.mjs";
 import { NearCoordinates } from "./main6.mjs";
 import { vector3ToCoords } from "./main7.mjs";
 const useMap = useMap$1;
@@ -9,6 +9,7 @@ export {
   Canvas,
   Coordinates,
   NearCoordinates,
+  averageMercatorScale,
   coordsToVector3,
   useMap,
   vector3ToCoords

package/dist/es/main14.mjs

@@ -1,4 +1,4 @@
-const earthRadius = 6378137;
+const earthRadius = 63710088e-1;
 export {
   earthRadius
 };

package/dist/es/main14.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main14.mjs","sources":["../../src/core/earth-radius.ts"],"sourcesContent":["export const earthRadius = 6378137;\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;"}
+{"version":3,"file":"main14.mjs","sources":["../../src/core/earth-radius.ts"],"sourcesContent":["export const earthRadius = 6371008.8;\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;"}

package/dist/es/main5.mjs

@@ -1,15 +1,35 @@
 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 z = -latitudeDiff * earthRadius;
+  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 {
+  averageMercatorScale,
   coordsToVector3
 };
 //# sourceMappingURL=main5.mjs.map

package/dist/es/main5.mjs.map

@@ -1 +1 @@
-{"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;"}
+{"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/cjs/main.js

@@ -147,14 +147,33 @@ function RenderAtCoords({ r3m, origin }) {
   }, [set, r3m]);
   return /* @__PURE__ */ jsxRuntime.jsx("perspectiveCamera", { ref: cameraRef });
 }
-const earthRadius = 6378137;
+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 z = -latitudeDiff * earthRadius;
+  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() {
@@ -557,6 +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/maplibre/es/main.mjs

@@ -1,7 +1,7 @@
 import { useMap as useMap$1 } from "./main2.mjs";
 import { Canvas } from "./main3.mjs";
 import { Coordinates } from "./main4.mjs";
-import { coordsToVector3 } from "./main5.mjs";
+import { averageMercatorScale, coordsToVector3 } from "./main5.mjs";
 import { NearCoordinates } from "./main6.mjs";
 import { vector3ToCoords } from "./main7.mjs";
 const useMap = useMap$1;
@@ -9,6 +9,7 @@ export {
   Canvas,
   Coordinates,
   NearCoordinates,
+  averageMercatorScale,
   coordsToVector3,
   useMap,
   vector3ToCoords

package/dist/maplibre/es/main14.mjs

@@ -1,4 +1,4 @@
-const earthRadius = 6378137;
+const earthRadius = 63710088e-1;
 export {
   earthRadius
 };

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

@@ -1 +1 @@
-{"version":3,"file":"main14.mjs","sources":["../../../src/core/earth-radius.ts"],"sourcesContent":["export const earthRadius = 6378137;\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;"}
+{"version":3,"file":"main14.mjs","sources":["../../../src/core/earth-radius.ts"],"sourcesContent":["export const earthRadius = 6371008.8;\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;"}

package/dist/maplibre/es/main5.mjs

@@ -1,15 +1,35 @@
 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 z = -latitudeDiff * earthRadius;
+  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 {
+  averageMercatorScale,
   coordsToVector3
 };
 //# sourceMappingURL=main5.mjs.map

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

@@ -1 +1 @@
-{"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;"}
+{"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/types/api/coords-to-vector-3.d.ts

@@ -1,3 +1,4 @@
 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/core/earth-radius.d.ts

@@ -1 +1 @@
-export declare const earthRadius = 6378137;
+export declare const earthRadius = 6371008.8;

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

@@ -1,3 +1,4 @@
 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/core/earth-radius.d.ts

@@ -1 +1 @@
-export declare const earthRadius = 6378137;
+export declare const earthRadius = 6371008.8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",

package/stories/package.json

@@ -20,7 +20,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7",
-    "react-three-map": "^0.6.1",
+    "react-three-map": "^0.8.1",
     "suncalc": "^1.9.0",
     "three": "^0.159.0",
     "three-stdlib": "^2.28.7",

package/stories/yarn.lock

@@ -4199,10 +4199,10 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-three-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.6.1.tgz#566811527242bb8964586c405a5816a84f75cb40"
-  integrity sha512-DSL7fyeR+MqiB1f6fG8FHwMb0NoDhj6Yjyc5T9jU6Yo/dpxQdY9Mfjs++J0j8HofcEDTsgiQz2GXh2r4iSPmhA==
+react-three-map@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.8.1.tgz#0312e9a2cb1a19f67127ad11526f1e4e1f091852"
+  integrity sha512-QkOJzaUPs7ZjtsP9sA8Xdy/FGhh0Q+eR89yUJPM6zlNEdzr1pe1F+prQlgd3jmffzE3Drfg90DMzqh3yJZcLJQ==
 
 react-use-measure@^2.1.1:
   version "2.1.1"