react-three-map 0.8.2 → 1.0.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # react-three-map
 
+## 1.0.0-next.1
+
+### Patch Changes
+
+- e5e937a: Remove `react-map-gl/mapbox` from the build.
+
+## 1.0.0-next.0
+
+### Major Changes
+
+- 9be6c41: Updated to work with `react-map-gl >= 8.0.0`.
+
+  This has the cascade effect of requiring also to upgrade either of the map providers you are using:
+
+  - `mapbox-gl >= 3.5.0`
+  - `maplibre-gl >= 4.0.0`
+
 ## 0.8.2
 
 ### Patch Changes

package/README.md

@@ -35,7 +35,6 @@ npm install react-three-map
     - [useMap](#usemap)
     - [coordsToVector3](#coordstovector3)
     - [vector3ToCoords](#vector3tocoords)
-  - [:tada: Made with `react-three-map`](#tada-made-with-react-three-map)
 
 
 ## :book: Examples
@@ -48,9 +47,9 @@ Check out our examples [here](https://rodrigohamuy.github.io/react-three-map) (p
 <table>
   <tbody>
     <tr>
-      <td>Let's build the same <code>react-three-fiber</code> basic example, but now it can be inside a map. (<a href="https://codesandbox.io/p/sandbox/vigorous-snyder-2n9vpl?file=%2Fsrc%2FApp.tsx%3A48%2C45">live demo</a>).</td>
+      <td>Let's build the same <code>react-three-fiber</code> basic example, but now it can be inside a map. (<a href="https://codesandbox.io/p/sandbox/react-three-map-gettings-started-dhw34w">live demo</a>).</td>
       <td>
-        <a href="https://codesandbox.io/p/sandbox/vigorous-snyder-2n9vpl?file=%2Fsrc%2FApp.tsx%3A48%2C45">
+        <a href="https://codesandbox.io/p/sandbox/react-three-map-gettings-started-dhw34w">
           <img src="docs/basic-app.gif" />
         </a>
       </td>
@@ -249,10 +248,4 @@ Recommended to use at city level distances, but margin errors will be noticeable
 | `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/)
+Returns a `Coords` object representing the geographic coordinates of the point relative to the origin.

package/dist/cjs/main.js

@@ -4,7 +4,7 @@ const fiber = require("@react-three/fiber");
 const jsxRuntime = require("react/jsx-runtime");
 const mapboxGl = require("mapbox-gl");
 const react = require("react");
-const reactMapGl = require("react-map-gl");
+const mapbox = require("react-map-gl/mapbox");
 const THREE = require("three");
 const reactDom = require("react-dom");
 function _interopNamespaceDefault(e) {
@@ -237,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;
@@ -539,7 +540,7 @@ InitCanvasFC.displayName = "InitCanvasFC";
 fiber.extend(THREE__namespace);
 const fromLngLat = mapboxGl.MercatorCoordinate.fromLngLat;
 const Canvas = react.memo(({ overlay, ...props }) => {
-  const map = reactMapGl.useMap().current.getMap();
+  const map = mapbox.useMap().current.getMap();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     overlay && /* @__PURE__ */ jsxRuntime.jsx(CanvasOverlay, { map, ...props }),
     !overlay && /* @__PURE__ */ jsxRuntime.jsx(CanvasInLayer, { map, ...props })
@@ -548,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(mapbox.Layer, { ...layerProps });
 });
 CanvasInLayer.displayName = "CanvasInLayer";
 const CanvasOverlay = react.memo(({ map, id, beforeId, ...props }) => {
@@ -559,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(mapbox.Layer, { id, beforeId, type: "custom", render }),
     /* @__PURE__ */ jsxRuntime.jsx(
       InitCanvasFC,
       {

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

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

package/dist/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/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/mapbox\";\nimport * as THREE from \"three\";\nimport { Matrix4Tuple } from \"three\";\nimport { CanvasProps } from \"../api/canvas-props\";\nimport { useCanvasInLayer } from \"../core/canvas-in-layer/use-canvas-in-layer\";\nimport { InitCanvasFC } from \"../core/canvas-overlay/init-canvas-fc\";\nimport { Render } from \"../core/canvas-overlay/render\";\nimport { MapInstance } from \"../core/generic-map\";\nimport { useFunction } from \"../core/use-function\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** `react-three-fiber` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>(({ overlay, ...props }) => {\n\n  const map = useMap().current!.getMap(); // eslint-disable-line @typescript-eslint/no-non-null-assertion\n\n  return <>\n    {overlay && <CanvasOverlay map={map} {...props} />}\n    {!overlay && <CanvasInLayer map={map} {...props} />}\n  </>\n})\nCanvas.displayName = 'Canvas'\n\ninterface CanvasPropsAndMap extends CanvasProps {\n  map: MapInstance;\n}\n\nconst CanvasInLayer = memo<CanvasPropsAndMap>(({ map, ...props }) => {\n  const layerProps = useCanvasInLayer(props, fromLngLat, map);\n  /* @ts-ignore */ // eslint-disable-line @typescript-eslint/ban-ts-comment\n  return <Layer {...layerProps} />\n})\nCanvasInLayer.displayName = 'CanvasInLayer';\n\nconst CanvasOverlay = memo<CanvasPropsAndMap>(({ map, id, beforeId, ...props }) => {\n  const [onRender, setOnRender] = useState<(mx: Matrix4Tuple) => void>();\n\n  const render = useFunction<Render>((_gl, mx) => {\n    if (!onRender) return;\n    onRender(mx as Matrix4Tuple);\n  })\n\n  return <>\n    {/* @ts-ignore  */}\n    <Layer id={id} beforeId={beforeId} type=\"custom\" render={render} />\n    <InitCanvasFC {...props}\n      setOnRender={setOnRender}\n      map={map}\n      fromLngLat={fromLngLat}\n    />\n  </>\n})\nCanvasInLayer.displayName = 'CanvasInLayer';"],"names":[],"mappings":";;;;;;;;;AAcA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAG/B,MAAM,SAAS,KAAkB,CAAC,EAAE,SAAS,GAAG,YAAY;AAEjE,QAAM,MAAM,OAAA,EAAS,QAAS,OAAO;AAErC,SACG,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,WAAY,oBAAA,eAAA,EAAc,KAAW,GAAG,MAAO,CAAA;AAAA,IAC/C,CAAC,WAAW,oBAAC,eAAc,EAAA,KAAW,GAAG,OAAO;AAAA,EACnD,EAAA,CAAA;AACF,CAAC;AACD,OAAO,cAAc;AAMrB,MAAM,gBAAgB,KAAwB,CAAC,EAAE,KAAK,GAAG,YAAY;AACnE,QAAM,aAAa,iBAAiB,OAAO,YAAY,GAAG;AAEnD,SAAA,oBAAC,OAAO,EAAA,GAAG,WAAY,CAAA;AAChC,CAAC;AACD,cAAc,cAAc;AAE5B,MAAM,gBAAgB,KAAwB,CAAC,EAAE,KAAK,IAAI,UAAU,GAAG,YAAY;AACjF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAqC;AAErE,QAAM,SAAS,YAAoB,CAAC,KAAK,OAAO;AAC9C,QAAI,CAAC;AAAU;AACf,aAAS,EAAkB;AAAA,EAAA,CAC5B;AAED,SAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,OAAM,EAAA,IAAQ,UAAoB,MAAK,UAAS,QAAgB;AAAA,IACjE;AAAA,MAAC;AAAA,MAAA;AAAA,QAAc,GAAG;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AACF,CAAC;AACD,cAAc,cAAc;"}

package/dist/maplibre/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) {
@@ -237,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;
@@ -537,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 })
@@ -548,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 }) => {
@@ -559,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,
       {

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/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/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/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/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/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.2",
+  "version": "1.0.0-next.1",
   "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,11 +15,11 @@
     "@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": "^4.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.7",
+    "react-map-gl": "^8.0.1",
     "react-three-map": "^0.8.1",
     "suncalc": "^1.9.0",
     "three": "^0.159.0",

package/stories/yarn.lock

@@ -777,10 +777,10 @@
   resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234"
   integrity sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==
 
-"@mapbox/mapbox-gl-supported@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz#c15367178d8bfe4765e6b47b542fe821ce259c7b"
-  integrity sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==
+"@mapbox/mapbox-gl-supported@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-3.0.0.tgz#bebd3d5da3c1fd988011bb79718a39f63f5e16ac"
+  integrity sha512-2XghOwu16ZwPJLOFVuIOaLbN0iKMn867evzXFyf0P22dqugezfJwLmdanAgU25ITvz1TvOfVP4jsDImlDJzcWg==
 
 "@mapbox/point-geometry@0.1.0", "@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0":
   version "0.1.0"
@@ -821,6 +821,19 @@
     rw "^1.3.3"
     sort-object "^3.0.3"
 
+"@maplibre/maplibre-gl-style-spec@^20.3.1":
+  version "20.4.0"
+  resolved "https://registry.yarnpkg.com/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.4.0.tgz#408339e051fb51e022b40af2235e0beb037937ea"
+  integrity sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==
+  dependencies:
+    "@mapbox/jsonlint-lines-primitives" "~2.0.2"
+    "@mapbox/unitbezier" "^0.0.1"
+    json-stringify-pretty-compact "^4.0.0"
+    minimist "^1.2.8"
+    quickselect "^2.0.0"
+    rw "^1.3.3"
+    tinyqueue "^3.0.0"
+
 "@mdx-js/mdx@^3.0.0":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-3.0.1.tgz#617bd2629ae561fdca1bb88e3badd947f5a82191"
@@ -1427,11 +1440,23 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
-"@types/geojson@*", "@types/geojson@^7946.0.10":
+"@types/geojson-vt@3.2.5", "@types/geojson-vt@^3.2.5":
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/@types/geojson-vt/-/geojson-vt-3.2.5.tgz#b6c356874991d9ab4207533476dfbcdb21e38408"
+  integrity sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==
+  dependencies:
+    "@types/geojson" "*"
+
+"@types/geojson@*":
   version "7946.0.10"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
   integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
 
+"@types/geojson@^7946.0.14", "@types/geojson@^7946.0.15":
+  version "7946.0.16"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.16.tgz#8ebe53d69efada7044454e3305c19017d97ced2a"
+  integrity sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==
+
 "@types/hast@^3.0.0":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa"
@@ -1444,22 +1469,20 @@
   resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.3.7.tgz#043d413b6492a012de47503907bdf3ec4f827933"
   integrity sha512-gKc9P2d4g5uYwmy4s/MO/yOVPmvHyvzka1YH6i5dM03UrFofHSmgc0D0ymbDRStFWHusk6cwwF6nhLm/ckBbbQ==
 
-"@types/mapbox-gl@>=1.0.0":
-  version "2.7.11"
-  resolved "https://registry.yarnpkg.com/@types/mapbox-gl/-/mapbox-gl-2.7.11.tgz#c9b9ed2ed24970aeef947609fdfcfcf826a3aa49"
-  integrity sha512-4vSwPSTQIawZTFRiTY2R74aZwAiM9gE6KGj871xdyAPpa+DmEObXxQQXqL2PsMH31/rP9nxJ2Kv0boeTVJMXVw==
-  dependencies:
-    "@types/geojson" "*"
-
-"@types/mapbox__point-geometry@*", "@types/mapbox__point-geometry@^0.1.2":
+"@types/mapbox__point-geometry@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.2.tgz#488a9b76e8457d6792ea2504cdd4ecdd9860a27e"
   integrity sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA==
 
-"@types/mapbox__vector-tile@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.0.tgz#8fa1379dbaead1e1b639b8d96cfd174404c379d6"
-  integrity sha512-kDwVreQO5V4c8yAxzZVQLE5tyWF+IPToAanloQaSnwfXmIcJ7cyOrv8z4Ft4y7PsLYmhWXmON8MBV8RX0Rgr8g==
+"@types/mapbox__point-geometry@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz#0ef017b75eedce02ff6243b4189210e2e6d5e56d"
+  integrity sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==
+
+"@types/mapbox__vector-tile@^1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz#ad757441ef1d34628d9e098afd9c91423c1f8734"
+  integrity sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==
   dependencies:
     "@types/geojson" "*"
     "@types/mapbox__point-geometry" "*"
@@ -1501,11 +1524,16 @@
   resolved "https://registry.yarnpkg.com/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz#e4a932069db47bb3eabeb0b305502d01586fa90d"
   integrity sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==
 
-"@types/pbf@*", "@types/pbf@^3.0.2":
+"@types/pbf@*":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@types/pbf/-/pbf-3.0.2.tgz#8d291ad68b4b8c533e96c174a2e3e6399a59ed61"
   integrity sha512-EDrLIPaPXOZqDjrkzxxbX7UlJSeQVgah3i0aA4pOSzmK9zq3BIh7/MZIQxED7slJByvKM4Gc6Hypyu2lJzh3SQ==
 
+"@types/pbf@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/pbf/-/pbf-3.0.5.tgz#a9495a58d8c75be4ffe9a0bd749a307715c07404"
+  integrity sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==
+
 "@types/prismjs@^1.26.0":
   version "1.26.0"
   resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
@@ -1566,6 +1594,13 @@
   resolved "https://registry.yarnpkg.com/@types/suncalc/-/suncalc-1.9.2.tgz#207810e705572c29c3f5519c29004d88a0c3b2b3"
   integrity sha512-ATAGBHHfA1TlE2tjfidLyTcysjoT2JHHEAmWRULh73SU9UTn++j5fqHEW16X6Y/2Li87jEQXzgu4R/OOdlDqzw==
 
+"@types/supercluster@^7.1.3":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@types/supercluster/-/supercluster-7.1.3.tgz#1a1bc2401b09174d9c9e44124931ec7874a72b27"
+  integrity sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/three@^0.159.0":
   version "0.159.0"
   resolved "https://registry.yarnpkg.com/@types/three/-/three-0.159.0.tgz#e1c9d2a84543c2febee5244cc5cf7d657d13aa45"
@@ -1623,6 +1658,18 @@
   dependencies:
     "@use-gesture/core" "10.2.27"
 
+"@vis.gl/react-mapbox@8.0.1":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@vis.gl/react-mapbox/-/react-mapbox-8.0.1.tgz#4781d6fbd3c323ec1d021dd456ade3e92e9263af"
+  integrity sha512-s/OokvgK1T43Ev2/4hj21C0DKrf79nIigBCdYPtAkEX88qGLRQ5t5zCRqg5Zl+44xXfVxcVpX2/vWUKd9oYGKQ==
+
+"@vis.gl/react-maplibre@8.0.1":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@vis.gl/react-maplibre/-/react-maplibre-8.0.1.tgz#4bc7571dfd5554479d814deb94ea861e586f044c"
+  integrity sha512-IFguo7DKIDZ9U9uRI4thZRfc5aTHEH4lWlIjedBeCpLeMm7wdrqtU2JshyEQt8dDO85kkEE7CbrtjMx5MplaoA==
+  dependencies:
+    "@maplibre/maplibre-gl-style-spec" "^19.2.1"
+
 "@vitejs/plugin-react-swc@^3.5.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react-swc/-/plugin-react-swc-3.6.0.tgz#dc9cd1363baf3780f3ad3e0a12a46a3ffe0c7526"
@@ -1935,10 +1982,10 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
-cheap-ruler@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/cheap-ruler/-/cheap-ruler-3.0.2.tgz#60d2b3a0cb77a420472c8c5bb8f2c320fba4bb87"
-  integrity sha512-02T332h1/HTN6cDSufLP8x4JzDs2+VC+8qZ/N0kWIVPyc2xUkWwWh3B2fJxR7raXkL4Mq7k554mfuM9ofv/vGg==
+cheap-ruler@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cheap-ruler/-/cheap-ruler-4.0.0.tgz#bdc984de7e0e3f748bdfd2dbe23ec6b9dc820a09"
+  integrity sha512-0BJa8f4t141BYKQyn9NSQt1PguFQXMXwZiA5shfoaBYHAb2fFk2RAX+tiWMoQU+Agtzt3mdt0JtuyshAXqZ+Vw==
 
 chokidar@^3.5.3:
   version "3.5.3"
@@ -2205,10 +2252,10 @@ draco3d@^1.4.1:
   resolved "https://registry.yarnpkg.com/draco3d/-/draco3d-1.5.6.tgz#0d570a9792e3a3a9fafbfea065b692940441c626"
   integrity sha512-+3NaRjWktb5r61ZFoDejlykPEFKT5N/LkbXsaddlw6xNSXBanUYpFc2AXXpbJDilPHazcSreU/DpQIaxfX0NfQ==
 
-earcut@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.4.tgz#6d02fd4d68160c114825d06890a92ecaae60343a"
-  integrity sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==
+earcut@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/earcut/-/earcut-3.0.1.tgz#f60b3f671c5657cca9d3e131c5527c5dde00ef38"
+  integrity sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==
 
 eastasianwidth@^0.2.0:
   version "0.2.0"
@@ -2497,10 +2544,10 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-geojson-vt@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.2.1.tgz#f8adb614d2c1d3f6ee7c4265cad4bbf3ad60c8b7"
-  integrity sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==
+geojson-vt@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-4.0.2.tgz#1162f6c7d61a0ba305b1030621e6e111f847828a"
+  integrity sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==
 
 get-caller-file@^2.0.5:
   version "2.0.5"
@@ -2534,14 +2581,14 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-global-prefix@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-3.0.0.tgz#fc85f73064df69f50421f47f883fe5b913ba9b97"
-  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
+global-prefix@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-4.0.0.tgz#e9cc79aab9be1d03287e156a3f912dd0895463ed"
+  integrity sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==
   dependencies:
-    ini "^1.3.5"
-    kind-of "^6.0.2"
-    which "^1.3.1"
+    ini "^4.1.3"
+    kind-of "^6.0.3"
+    which "^4.0.0"
 
 globals@^11.1.0:
   version "11.12.0"
@@ -2821,10 +2868,10 @@ inherits@2.0.4:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-ini@^1.3.5:
-  version "1.3.8"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
-  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+ini@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.3.tgz#4c359675a6071a46985eb39b14e4a2c0ec98a795"
+  integrity sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==
 
 inline-style-parser@0.1.1:
   version "0.1.1"
@@ -2975,6 +3022,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+isexe@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-3.1.1.tgz#4a407e2bd78ddfb14bea0c27c6f7072dde775f0d"
+  integrity sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==
+
 isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
@@ -3002,12 +3054,17 @@ json-stringify-pretty-compact@^3.0.0:
   resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz#f71ef9d82ef16483a407869556588e91b681d9ab"
   integrity sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA==
 
+json-stringify-pretty-compact@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz#cf4844770bddee3cb89a6170fe4b00eee5dbf1d4"
+  integrity sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==
+
 json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-kdbush@^4.0.1, kdbush@^4.0.2:
+kdbush@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-4.0.2.tgz#2f7b7246328b4657dd122b6c7f025fbc2c868e39"
   integrity sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==
@@ -3019,7 +3076,7 @@ keygrip@~1.1.0:
   dependencies:
     tsscmp "1.0.6"
 
-kind-of@^6.0.2:
+kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -3127,39 +3184,44 @@ maath@^0.6.0:
   resolved "https://registry.yarnpkg.com/maath/-/maath-0.6.0.tgz#7841d0fb95bbb37d19b08b7c5458ef70190950d2"
   integrity sha512-dSb2xQuP7vDnaYqfoKzlApeRcR2xtN8/f7WV/TMAkBC8552TwTLtOO0JTcSygkYMjNDPoo6V01jTw/aPi4JrMw==
 
-mapbox-gl@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-3.1.2.tgz#4e49681d5b8464978bc6bc0d8dd6ed0cfbc94ecc"
-  integrity sha512-+KoLEqZM8GxO/ViPz9tKgGURteKne+Y0pXiVCNsowymiZFH3FiL6dt9oZE95owMg5XqD3Kygz5mfchR1ZgmWlA==
+mapbox-gl@^3.9.4:
+  version "3.9.4"
+  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-3.9.4.tgz#a80777d4f57267e021001337b712ac2c28cfd15e"
+  integrity sha512-IxfpdyNzjCMzkqj/q5OUamlF1QcS+IFEARteygEgao2B8l8+UF2ahpNRgHT2EpMSE8ma1bq4LKvr+EuJ6gqniw==
   dependencies:
-    "@mapbox/geojson-rewind" "^0.5.2"
     "@mapbox/jsonlint-lines-primitives" "^2.0.2"
-    "@mapbox/mapbox-gl-supported" "^2.0.1"
+    "@mapbox/mapbox-gl-supported" "^3.0.0"
     "@mapbox/point-geometry" "^0.1.0"
     "@mapbox/tiny-sdf" "^2.0.6"
     "@mapbox/unitbezier" "^0.0.1"
     "@mapbox/vector-tile" "^1.3.1"
     "@mapbox/whoots-js" "^3.1.0"
-    cheap-ruler "^3.0.1"
+    "@types/geojson" "^7946.0.15"
+    "@types/geojson-vt" "^3.2.5"
+    "@types/mapbox__point-geometry" "^0.1.4"
+    "@types/mapbox__vector-tile" "^1.3.4"
+    "@types/pbf" "^3.0.5"
+    "@types/supercluster" "^7.1.3"
+    cheap-ruler "^4.0.0"
     csscolorparser "~1.0.3"
-    earcut "^2.2.4"
-    geojson-vt "^3.2.1"
+    earcut "^3.0.0"
+    geojson-vt "^4.0.2"
     gl-matrix "^3.4.3"
     grid-index "^1.1.0"
-    kdbush "^4.0.1"
+    kdbush "^4.0.2"
     murmurhash-js "^1.0.0"
     pbf "^3.2.1"
     potpack "^2.0.0"
-    quickselect "^2.0.0"
-    rw "^1.3.3"
-    supercluster "^8.0.0"
-    tinyqueue "^2.0.3"
+    quickselect "^3.0.0"
+    serialize-to-js "^3.1.2"
+    supercluster "^8.0.1"
+    tinyqueue "^3.0.0"
     vt-pbf "^3.1.3"
 
-maplibre-gl@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-3.2.0.tgz#4b1d8c286e2d52be3b63ea64fea03a6ba097c1f2"
-  integrity sha512-TOo/cV9r8Xy3ngbJtY6JUC7rpjpObrsdO5pt14l5OIw4gY1v5XnxWP16VDSe0zRoncFfDCEBDmRwhfEFwtlbvw==
+maplibre-gl@^4.7.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-4.7.1.tgz#06a524438ee2aafbe8bcd91002a4e01468ea5486"
+  integrity sha512-lgL7XpIwsgICiL82ITplfS7IGwrB1OJIw/pCvprDp2dhmSSEBgmPzYRvwYYYvJGJD7fxUv1Tvpih4nZ6VrLuaA==
   dependencies:
     "@mapbox/geojson-rewind" "^0.5.2"
     "@mapbox/jsonlint-lines-primitives" "^2.0.2"
@@ -3168,22 +3230,24 @@ maplibre-gl@^3.2.0:
     "@mapbox/unitbezier" "^0.0.1"
     "@mapbox/vector-tile" "^1.3.1"
     "@mapbox/whoots-js" "^3.1.0"
-    "@maplibre/maplibre-gl-style-spec" "^19.2.1"
-    "@types/geojson" "^7946.0.10"
-    "@types/mapbox__point-geometry" "^0.1.2"
-    "@types/mapbox__vector-tile" "^1.3.0"
-    "@types/pbf" "^3.0.2"
-    earcut "^2.2.4"
-    geojson-vt "^3.2.1"
+    "@maplibre/maplibre-gl-style-spec" "^20.3.1"
+    "@types/geojson" "^7946.0.14"
+    "@types/geojson-vt" "3.2.5"
+    "@types/mapbox__point-geometry" "^0.1.4"
+    "@types/mapbox__vector-tile" "^1.3.4"
+    "@types/pbf" "^3.0.5"
+    "@types/supercluster" "^7.1.3"
+    earcut "^3.0.0"
+    geojson-vt "^4.0.2"
     gl-matrix "^3.4.3"
-    global-prefix "^3.0.0"
+    global-prefix "^4.0.0"
     kdbush "^4.0.2"
     murmurhash-js "^1.0.0"
-    pbf "^3.2.1"
+    pbf "^3.3.0"
     potpack "^2.0.0"
-    quickselect "^2.0.0"
+    quickselect "^3.0.0"
     supercluster "^8.0.1"
-    tinyqueue "^2.0.3"
+    tinyqueue "^3.0.0"
     vt-pbf "^3.1.3"
 
 markdown-extensions@^2.0.0:
@@ -4031,6 +4095,14 @@ pbf@^3.2.1:
     ieee754 "^1.1.12"
     resolve-protobuf-schema "^2.1.0"
 
+pbf@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.3.0.tgz#1790f3d99118333cc7f498de816028a346ef367f"
+  integrity sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==
+  dependencies:
+    ieee754 "^1.1.12"
+    resolve-protobuf-schema "^2.1.0"
+
 periscopic@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/periscopic/-/periscopic-3.1.0.tgz#7e9037bf51c5855bd33b48928828db4afa79d97a"
@@ -4129,6 +4201,11 @@ quickselect@^2.0.0:
   resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-2.0.0.tgz#f19680a486a5eefb581303e023e98faaf25dd018"
   integrity sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==
 
+quickselect@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-3.0.0.tgz#a37fc953867d56f095a20ac71c6d27063d2de603"
+  integrity sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==
+
 react-colorful@^5.5.1:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
@@ -4173,13 +4250,13 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-map-gl@^7.1.7:
-  version "7.1.7"
-  resolved "https://registry.yarnpkg.com/react-map-gl/-/react-map-gl-7.1.7.tgz#f9b7d76cccad6d0bf1627d1827a0a378696ac1d0"
-  integrity sha512-mwjc0obkBJOXCcoXQr3VoLqmqwo9vS4bXfbGsdxXzEgVCv/PM0v+1QggL7W0d/ccIy+VCjbXNlGij+PENz6VNg==
+react-map-gl@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/react-map-gl/-/react-map-gl-8.0.1.tgz#ab478ef53f733e06d6ee7929b3f1ba6edac4acb4"
+  integrity sha512-VQjLcZdtyJCPXxy5xVL2QIgfA+YG3v+PzSdt07WWbVmXFhV4wUuy6DZSQYDdfqVH2BujKo/ImdL5zfEJApRnpg==
   dependencies:
-    "@maplibre/maplibre-gl-style-spec" "^19.2.1"
-    "@types/mapbox-gl" ">=1.0.0"
+    "@vis.gl/react-mapbox" "8.0.1"
+    "@vis.gl/react-maplibre" "8.0.1"
 
 react-merge-refs@^1.1.0:
   version "1.1.0"
@@ -4398,6 +4475,11 @@ semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
+serialize-to-js@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/serialize-to-js/-/serialize-to-js-3.1.2.tgz#844b8a1c2d72412f68ea30da55090b3fc8e95790"
+  integrity sha512-owllqNuDDEimQat7EPG0tH7JjO090xKNzUtYz6X+Sk2BXDnOCilDdNLwjWeFywG9xkJul1ULvtUQa9O4pUaY0w==
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -4583,7 +4665,7 @@ suncalc@^1.9.0:
   resolved "https://registry.yarnpkg.com/suncalc/-/suncalc-1.9.0.tgz#26212353fae61edb287c2d558fc4932ecf0e1532"
   integrity sha512-vMJ8Byp1uIPoj+wb9c1AdK4jpkSKVAywgHX0lqY7zt6+EWRRC3Z+0Ucfjy/0yxTVO1hwwchZe4uoFNqrIC24+A==
 
-supercluster@^8.0.0, supercluster@^8.0.1:
+supercluster@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-8.0.1.tgz#9946ba123538e9e9ab15de472531f604e7372df5"
   integrity sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==
@@ -4648,10 +4730,10 @@ three@^0.159.0:
   resolved "https://registry.yarnpkg.com/three/-/three-0.159.0.tgz#6576b1210805b14f0765bac41fd0e4ec18e43b2e"
   integrity sha512-eCmhlLGbBgucuo4VEA9IO3Qpc7dh8Bd4VKzr7WfW4+8hMcIfoAVi1ev0pJYN9PTTsCslbcKgBwr2wNZ1EvLInA==
 
-tinyqueue@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08"
-  integrity sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==
+tinyqueue@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-3.0.0.tgz#101ea761ccc81f979e29200929e78f1556e3661e"
+  integrity sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==
 
 titleize@^3.0.0:
   version "3.0.0"
@@ -5035,13 +5117,6 @@ webgl-sdf-generator@1.1.1:
   resolved "https://registry.yarnpkg.com/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz#3e1b422b3d87cd3cc77f2602c9db63bc0f6accbd"
   integrity sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==
 
-which@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-  dependencies:
-    isexe "^2.0.0"
-
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
@@ -5049,6 +5124,13 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+which@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-4.0.0.tgz#cd60b5e74503a3fbcfbf6cd6b4138a8bae644c1a"
+  integrity sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==
+  dependencies:
+    isexe "^3.1.1"
+
 widest-line@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-4.0.1.tgz#a0fc673aaba1ea6f0a0d35b3c2795c9a9cc2ebf2"