react-three-map 0.8.1 → 1.0.0-next.0

package/dist/es/main9.mjs.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"main9.mjs","sources":["../../node_modules/@vis.gl/react-mapbox/dist/components/marker.js"],"sourcesContent":["/* global document */\nimport * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo } from 'react';\nimport { applyReactStyle } from \"../utils/apply-react-style.js\";\nimport { MapContext } from \"./map.js\";\nimport { arePointsEqual } from \"../utils/deep-equal.js\";\n/* eslint-disable complexity,max-statements */\nexport const Marker = memo(forwardRef((props, ref) => {\n    const { map, mapLib } = useContext(MapContext);\n    const thisRef = useRef({ props });\n    thisRef.current.props = props;\n    const marker = useMemo(() => {\n        let hasChildren = false;\n        React.Children.forEach(props.children, el => {\n            if (el) {\n                hasChildren = true;\n            }\n        });\n        const options = {\n            ...props,\n            element: hasChildren ? document.createElement('div') : null\n        };\n        const mk = new mapLib.Marker(options);\n        mk.setLngLat([props.longitude, props.latitude]);\n        mk.getElement().addEventListener('click', (e) => {\n            thisRef.current.props.onClick?.({\n                type: 'click',\n                target: mk,\n                originalEvent: e\n            });\n        });\n        mk.on('dragstart', e => {\n            const evt = e;\n            evt.lngLat = marker.getLngLat();\n            thisRef.current.props.onDragStart?.(evt);\n        });\n        mk.on('drag', e => {\n            const evt = e;\n            evt.lngLat = marker.getLngLat();\n            thisRef.current.props.onDrag?.(evt);\n        });\n        mk.on('dragend', e => {\n            const evt = e;\n            evt.lngLat = marker.getLngLat();\n            thisRef.current.props.onDragEnd?.(evt);\n        });\n        return mk;\n    }, []);\n    useEffect(() => {\n        marker.addTo(map.getMap());\n        return () => {\n            marker.remove();\n        };\n    }, []);\n    const { longitude, latitude, offset, style, draggable = false, popup = null, rotation = 0, rotationAlignment = 'auto', pitchAlignment = 'auto' } = props;\n    useEffect(() => {\n        applyReactStyle(marker.getElement(), style);\n    }, [style]);\n    useImperativeHandle(ref, () => marker, []);\n    if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {\n        marker.setLngLat([longitude, latitude]);\n    }\n    if (offset && !arePointsEqual(marker.getOffset(), offset)) {\n        marker.setOffset(offset);\n    }\n    if (marker.isDraggable() !== draggable) {\n        marker.setDraggable(draggable);\n    }\n    if (marker.getRotation() !== rotation) {\n        marker.setRotation(rotation);\n    }\n    if (marker.getRotationAlignment() !== rotationAlignment) {\n        marker.setRotationAlignment(rotationAlignment);\n    }\n    if (marker.getPitchAlignment() !== pitchAlignment) {\n        marker.setPitchAlignment(pitchAlignment);\n    }\n    if (marker.getPopup() !== popup) {\n        marker.setPopup(popup);\n    }\n    return createPortal(props.children, marker.getElement());\n}));\n//# sourceMappingURL=marker.js.map"],"names":[],"mappings":";;;;;;AAQsB,KAAK,WAAW,CAAC,OAAO,QAAQ;AAClD,QAAM,EAAE,KAAK,OAAQ,IAAG,WAAW,UAAU;AAC7C,QAAM,UAAU,OAAO,EAAE,MAAO,CAAA;AAChC,UAAQ,QAAQ,QAAQ;AACxB,QAAM,SAAS,QAAQ,MAAM;AACzB,QAAI,cAAc;AAClB,UAAM,SAAS,QAAQ,MAAM,UAAU,QAAM;AACzC,UAAI,IAAI;AACJ,sBAAc;AAAA,MACjB;AAAA,IACb,CAAS;AACD,UAAM,UAAU;AAAA,MACZ,GAAG;AAAA,MACH,SAAS,cAAc,SAAS,cAAc,KAAK,IAAI;AAAA,IACnE;AACQ,UAAM,KAAK,IAAI,OAAO,OAAO,OAAO;AACpC,OAAG,UAAU,CAAC,MAAM,WAAW,MAAM,QAAQ,CAAC;AAC9C,OAAG,WAAY,EAAC,iBAAiB,SAAS,CAAC,MAAM;;AAC7C,0BAAQ,QAAQ,OAAM,YAAtB,4BAAgC;AAAA,QAC5B,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,eAAe;AAAA,MAC/B;AAAA,IACA,CAAS;AACD,OAAG,GAAG,aAAa,OAAK;;AACpB,YAAM,MAAM;AACZ,UAAI,SAAS,OAAO;AACpB,0BAAQ,QAAQ,OAAM,gBAAtB,4BAAoC;AAAA,IAChD,CAAS;AACD,OAAG,GAAG,QAAQ,OAAK;;AACf,YAAM,MAAM;AACZ,UAAI,SAAS,OAAO;AACpB,0BAAQ,QAAQ,OAAM,WAAtB,4BAA+B;AAAA,IAC3C,CAAS;AACD,OAAG,GAAG,WAAW,OAAK;;AAClB,YAAM,MAAM;AACZ,UAAI,SAAS,OAAO;AACpB,0BAAQ,QAAQ,OAAM,cAAtB,4BAAkC;AAAA,IAC9C,CAAS;AACD,WAAO;AAAA,EACV,GAAE,CAAE,CAAA;AACL,YAAU,MAAM;AACZ,WAAO,MAAM,IAAI,OAAQ,CAAA;AACzB,WAAO,MAAM;AACT,aAAO,OAAM;AAAA,IACzB;AAAA,EACK,GAAE,CAAE,CAAA;AACL,QAAM,EAAE,WAAW,UAAU,QAAQ,OAAO,YAAY,OAAO,QAAQ,MAAM,WAAW,GAAG,oBAAoB,QAAQ,iBAAiB,OAAQ,IAAG;AACnJ,YAAU,MAAM;AACZ,oBAAgB,OAAO,WAAY,GAAE,KAAK;AAAA,EAClD,GAAO,CAAC,KAAK,CAAC;AACV,sBAAoB,KAAK,MAAM,QAAQ,CAAE,CAAA;AACzC,MAAI,OAAO,UAAW,EAAC,QAAQ,aAAa,OAAO,UAAS,EAAG,QAAQ,UAAU;AAC7E,WAAO,UAAU,CAAC,WAAW,QAAQ,CAAC;AAAA,EACzC;AACD,MAAI,UAAU,CAAC,eAAe,OAAO,UAAS,GAAI,MAAM,GAAG;AACvD,WAAO,UAAU,MAAM;AAAA,EAC1B;AACD,MAAI,OAAO,YAAa,MAAK,WAAW;AACpC,WAAO,aAAa,SAAS;AAAA,EAChC;AACD,MAAI,OAAO,YAAa,MAAK,UAAU;AACnC,WAAO,YAAY,QAAQ;AAAA,EAC9B;AACD,MAAI,OAAO,qBAAsB,MAAK,mBAAmB;AACrD,WAAO,qBAAqB,iBAAiB;AAAA,EAChD;AACD,MAAI,OAAO,kBAAmB,MAAK,gBAAgB;AAC/C,WAAO,kBAAkB,cAAc;AAAA,EAC1C;AACD,MAAI,OAAO,SAAU,MAAK,OAAO;AAC7B,WAAO,SAAS,KAAK;AAAA,EACxB;AACD,SAAO,aAAa,MAAM,UAAU,OAAO,WAAY,CAAA;AAC3D,CAAC,CAAC;","x_google_ignoreList":[0]}

package/dist/maplibre/cjs/main.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fiber = require("@react-three/fiber");
 const jsxRuntime = require("react/jsx-runtime");
-const mapboxGl = require("mapbox-gl");
+const maplibreGl = require("maplibre-gl");
 const react = require("react");
-const reactMapGl = require("react-map-gl");
+const maplibre = require("react-map-gl/maplibre");
 const THREE = require("three");
 const reactDom = require("react-dom");
 function _interopNamespaceDefault(e) {
@@ -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() {
@@ -218,7 +237,8 @@ function useRender({
   r3m
 }) {
   const render = useFunction((_gl, projViewMx) => {
-    r3m.viewProjMx.splice(0, 16, ...projViewMx);
+    const pVMx = "defaultProjectionData" in projViewMx ? Object.values(projViewMx.defaultProjectionData.mainMatrix) : projViewMx;
+    r3m.viewProjMx.splice(0, 16, ...pVMx);
     const state = useThree.getState();
     const camera = state.camera;
     const { gl, advance } = state;
@@ -518,9 +538,9 @@ const InitCanvasFC = react.memo((props) => {
 });
 InitCanvasFC.displayName = "InitCanvasFC";
 fiber.extend(THREE__namespace);
-const fromLngLat = mapboxGl.MercatorCoordinate.fromLngLat;
+const fromLngLat = maplibreGl.MercatorCoordinate.fromLngLat;
 const Canvas = react.memo(({ overlay, ...props }) => {
-  const map = reactMapGl.useMap().current.getMap();
+  const map = maplibre.useMap().current.getMap();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     overlay && /* @__PURE__ */ jsxRuntime.jsx(CanvasOverlay, { map, ...props }),
     !overlay && /* @__PURE__ */ jsxRuntime.jsx(CanvasInLayer, { map, ...props })
@@ -529,7 +549,7 @@ const Canvas = react.memo(({ overlay, ...props }) => {
 Canvas.displayName = "Canvas";
 const CanvasInLayer = react.memo(({ map, ...props }) => {
   const layerProps = useCanvasInLayer(props, fromLngLat, map);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactMapGl.Layer, { ...layerProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(maplibre.Layer, { ...layerProps });
 });
 CanvasInLayer.displayName = "CanvasInLayer";
 const CanvasOverlay = react.memo(({ map, id, beforeId, ...props }) => {
@@ -540,7 +560,7 @@ const CanvasOverlay = react.memo(({ map, id, beforeId, ...props }) => {
     onRender(mx);
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactMapGl.Layer, { id, beforeId, type: "custom", render }),
+    /* @__PURE__ */ jsxRuntime.jsx(maplibre.Layer, { id, beforeId, type: "custom", render }),
     /* @__PURE__ */ jsxRuntime.jsx(
       InitCanvasFC,
       {
@@ -557,6 +577,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/main.mjs.map

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

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/main16.mjs

@@ -8,7 +8,8 @@ function useRender({
   r3m
 }) {
   const render = useFunction((_gl, projViewMx) => {
-    r3m.viewProjMx.splice(0, 16, ...projViewMx);
+    const pVMx = "defaultProjectionData" in projViewMx ? Object.values(projViewMx.defaultProjectionData.mainMatrix) : projViewMx;
+    r3m.viewProjMx.splice(0, 16, ...pVMx);
     const state = useThree.getState();
     const camera = state.camera;
     const { gl, advance } = state;

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

@@ -1 +1 @@
-{"version":3,"file":"main16.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":"main16.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[] | {defaultProjectionData: {mainMatrix: Record<string, number>}}) => {\n    const pVMx = 'defaultProjectionData' in projViewMx ? Object.values(projViewMx.defaultProjectionData.mainMatrix) : projViewMx;\n    r3m.viewProjMx.splice(0, 16, ...pVMx)\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,eAAyF;AAC1I,UAAA,OAAO,2BAA2B,aAAa,OAAO,OAAO,WAAW,sBAAsB,UAAU,IAAI;AAClH,QAAI,WAAW,OAAO,GAAG,IAAI,GAAG,IAAI;AAC9B,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;"}

package/dist/maplibre/es/main3.mjs

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { extend } from "@react-three/fiber";
-import { MercatorCoordinate } from "mapbox-gl";
+import { MercatorCoordinate } from "maplibre-gl";
 import { memo, useState } from "react";
-import { useMap, Layer } from "react-map-gl";
+import { useMap, Layer } from "react-map-gl/maplibre";
 import * as THREE from "three";
 import { useCanvasInLayer } from "./main8.mjs";
 import { InitCanvasFC } from "./main9.mjs";

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

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"main3.mjs","sources":["../../../src/maplibre/canvas.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"maplibre-gl\";\nimport { memo, useState } from \"react\";\nimport { Layer, useMap } from \"react-map-gl/maplibre\";\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 `MapLibre` */\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/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/canvas-in-layer/use-canvas-in-layer.d.ts

@@ -5,7 +5,11 @@ export declare function useCanvasInLayer(props: CanvasProps, fromLngLat: FromLng
     readonly id: string | undefined;
     readonly beforeId: string | undefined;
     readonly onRemove: () => void;
-    readonly render: (_gl: WebGL2RenderingContext, projViewMx: number[]) => void;
+    readonly render: (_gl: WebGL2RenderingContext, projViewMx: number[] | {
+        defaultProjectionData: {
+            mainMatrix: Record<string, number>;
+        };
+    }) => void;
     readonly type: "custom";
     readonly renderingMode: "3d";
 };

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

@@ -9,4 +9,8 @@ export declare function useRender({ map, origin, useThree, frameloop, r3m, }: {
     useThree: UseBoundStore<RootState>;
     frameloop?: 'always' | 'demand';
     r3m: R3M;
-}): (_gl: WebGL2RenderingContext, projViewMx: number[]) => void;
+}): (_gl: WebGL2RenderingContext, projViewMx: number[] | {
+    defaultProjectionData: {
+        mainMatrix: Record<string, number>;
+    };
+}) => void;

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

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

package/dist/maplibre/types/core/generic-map.d.ts

@@ -34,8 +34,8 @@ export interface MapInstance {
     /** MapLibre only */
     getPixelRatio?: () => number;
     triggerRepaint(): void;
-    on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
-    off<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
+    on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): void;
+    off<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): void;
 }
 /** Generic interface of Mapbox/Maplibre `MapEventType` */
 export type MapEventType = {

package/dist/maplibre/types/{mapbox → maplibre}/canvas.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CanvasProps } from "../api/canvas-props";
-/** react`-three-fiber` canvas inside `Mapbox` */
+/** `react-three-fiber` canvas inside `MapLibre` */
 export declare const Canvas: import("react").NamedExoticComponent<CanvasProps>;

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

@@ -1,4 +1,4 @@
 import type { Map } from 'maplibre-gl';
 export * from './api';
-export * from './mapbox/canvas';
+export * from './maplibre/canvas';
 export declare const useMap: () => Map;

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/canvas-in-layer/use-canvas-in-layer.d.ts

@@ -5,7 +5,11 @@ export declare function useCanvasInLayer(props: CanvasProps, fromLngLat: FromLng
     readonly id: string | undefined;
     readonly beforeId: string | undefined;
     readonly onRemove: () => void;
-    readonly render: (_gl: WebGL2RenderingContext, projViewMx: number[]) => void;
+    readonly render: (_gl: WebGL2RenderingContext, projViewMx: number[] | {
+        defaultProjectionData: {
+            mainMatrix: Record<string, number>;
+        };
+    }) => void;
     readonly type: "custom";
     readonly renderingMode: "3d";
 };

package/dist/types/core/canvas-in-layer/use-render.d.ts

@@ -9,4 +9,8 @@ export declare function useRender({ map, origin, useThree, frameloop, r3m, }: {
     useThree: UseBoundStore<RootState>;
     frameloop?: 'always' | 'demand';
     r3m: R3M;
-}): (_gl: WebGL2RenderingContext, projViewMx: number[]) => void;
+}): (_gl: WebGL2RenderingContext, projViewMx: number[] | {
+    defaultProjectionData: {
+        mainMatrix: Record<string, number>;
+    };
+}) => void;

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

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

package/dist/types/core/generic-map.d.ts

@@ -34,8 +34,8 @@ export interface MapInstance {
     /** MapLibre only */
     getPixelRatio?: () => number;
     triggerRepaint(): void;
-    on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
-    off<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
+    on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): void;
+    off<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): void;
 }
 /** Generic interface of Mapbox/Maplibre `MapEventType` */
 export type MapEventType = {

package/dist/types/mapbox/canvas.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CanvasProps } from "../api/canvas-props";
-/** react`-three-fiber` canvas inside `Mapbox` */
+/** `react-three-fiber` canvas inside `Mapbox` */
 export declare const Canvas: import("react").NamedExoticComponent<CanvasProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "0.8.1",
+  "version": "1.0.0-next.0",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",
@@ -53,11 +53,11 @@
     "happy-dom": "^10.5.2",
     "leva": "^0.9.35",
     "luxon": "^3.3.0",
-    "mapbox-gl": "^3.1.2",
-    "maplibre-gl": "^3.2.0",
+    "mapbox-gl": "^3.9.4",
+    "maplibre-gl": "4.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.7",
+    "react-map-gl": "^8.0.1",
     "suncalc": "^1.9.0",
     "suspend-react": "^0.1.3",
     "three": "^0.159.0",
@@ -70,10 +70,10 @@
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.13",
-    "mapbox-gl": ">=2.15",
-    "maplibre-gl": ">=3.2",
+    "mapbox-gl": ">=3.5.0",
+    "maplibre-gl": ">=4.0.0",
     "react": ">=18.0",
-    "react-map-gl": ">=7.1",
+    "react-map-gl": ">=8.0.0",
     "three": ">=0.133"
   },
   "peerDependenciesMeta": {

package/stories/package.json

@@ -15,12 +15,12 @@
     "@types/tz-lookup": "^6.1.2",
     "leva": "^0.9.35",
     "luxon": "^3.4.4",
-    "mapbox-gl": "^3.1.2",
-    "maplibre-gl": "^3.2.0",
+    "mapbox-gl": "^3.9.4",
+    "maplibre-gl": "^5.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.7",
-    "react-three-map": "^0.6.1",
+    "react-map-gl": "^8.0.1",
+    "react-three-map": "^0.8.1",
     "suncalc": "^1.9.0",
     "three": "^0.159.0",
     "three-stdlib": "^2.28.7",