react-three-map 1.0.0-next.2 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # react-three-map
 
+## 1.0.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`
+
+### Patch Changes
+
+- e5e937a: Remove `react-map-gl/mapbox` from the build.
+- 987d5c7: Fix `overlay` camera calculations bug introduced by `three=>r166`. More info in [#143](https://github.com/RodrigoHamuy/react-three-map/issues/143).
+- 55c5392: Support maplibre@v5
+
 ## 1.0.0-next.2
 
 ### Patch Changes

package/README.md

@@ -73,7 +73,9 @@ import { Canvas } from "react-three-map/maplibre"
 
 function BasicExample() {
   return <Map
-    antialias
+    canvasContextAttributes={{
+      antialias: true,
+    }}
     initialViewState={{
       latitude: 51,
       longitude: 0,

package/dist/cjs/main.js

@@ -242,7 +242,7 @@ function useRender({
     const state = useThree.getState();
     const camera = state.camera;
     const { gl, advance } = state;
-    syncCamera(camera, origin, projViewMx);
+    syncCamera(camera, origin, pVMx);
     gl.resetState();
     advance(Date.now() * 1e-3, true);
     if (!frameloop || frameloop === "always")
@@ -435,7 +435,8 @@ const SyncCameraFC = react.memo(({
         mapCanvas.offsetLeft
       );
     }
-    r3m.viewProjMx = viewProjMx;
+    const pVMx = "defaultProjectionData" in viewProjMx ? Object.values(viewProjMx.defaultProjectionData.mainMatrix) : viewProjMx;
+    r3m.viewProjMx = pVMx;
     if (!ready.current && onReady) {
       ready.current = true;
       onReady();

package/dist/es/main16.mjs

@@ -13,7 +13,7 @@ function useRender({
     const state = useThree.getState();
     const camera = state.camera;
     const { gl, advance } = state;
-    syncCamera(camera, origin, projViewMx);
+    syncCamera(camera, origin, pVMx);
     gl.resetState();
     advance(Date.now() * 1e-3, true);
     if (!frameloop || frameloop === "always")

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[] | {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;"}
+{"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, pVMx 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,IAAoB;AACpE,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/main22.mjs

@@ -52,7 +52,8 @@ const SyncCameraFC = memo(({
         mapCanvas.offsetLeft
       );
     }
-    r3m.viewProjMx = viewProjMx;
+    const pVMx = "defaultProjectionData" in viewProjMx ? Object.values(viewProjMx.defaultProjectionData.mainMatrix) : viewProjMx;
+    r3m.viewProjMx = pVMx;
     if (!ready.current && onReady) {
       ready.current = true;
       onReady();

package/dist/es/main22.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main22.mjs","sources":["../../src/core/canvas-overlay/sync-camera-fc.tsx"],"sourcesContent":["import { useFrame, useThree } from \"@react-three/fiber\";\nimport { memo, useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { Coords } from \"../../api/coords\";\nimport { MapInstance } from \"../generic-map\";\nimport { syncCamera } from \"../sync-camera\";\nimport { useCoordsToMatrix } from \"../use-coords-to-matrix\";\nimport { useFunction } from \"../use-function\";\nimport { useR3M } from \"../use-r3m\";\n\ninterface SyncCameraFCProps extends Coords {\n  setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void,\n  /** on `useFrame` it will manually render (used by `<Coordinates>`) */\n  manualRender?: boolean,\n  onReady?: () => void,\n  map: MapInstance,\n}\n\n/** React Component (FC) to sync the Three camera with the map provider */\nexport const SyncCameraFC = memo<SyncCameraFCProps>(({\n  latitude, longitude, altitude = 0, setOnRender, manualRender, onReady, map\n}) => {\n\n  const mapCanvas = map.getCanvas();\n\n  const r3m = useR3M();\n\n  const camRef = useRef<PerspectiveCamera>(null);\n\n  const camera = useThree(s => s.camera) as PerspectiveCamera;\n  const gl = useThree(s => s.gl);\n  const threeCanvas = useThree(s => s.gl.domElement);\n  const scene = useThree(s => s.scene);\n  const advance = useThree(s => s.advance);\n  const setSize = useThree(s => s.setSize);\n  const set = useThree(s => s.set);\n\n  const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: r3m.fromLngLat });\n\n  const ready = useRef(false);\n\n  const triggerRepaint = useMemo(() => map.triggerRepaint, [map]);\n  const mapPaintRequests = useRef(0);\n  const triggerRepaintOff = useFunction(() => {\n    mapPaintRequests.current++;\n  })\n\n  useFrame(() => {\n    syncCamera(camera, origin, r3m.viewProjMx)\n\n    if (manualRender) gl.render(scene, camera);\n\n    map.triggerRepaint = triggerRepaint;\n    if (mapPaintRequests.current > 0) {\n      mapPaintRequests.current = 0;\n      map.triggerRepaint();\n    }\n  }, -Infinity)\n\n  const onRender = useFunction((viewProjMx: Matrix4Tuple) => {\n    map.triggerRepaint = triggerRepaintOff;\n\n    if (threeCanvas.width !== mapCanvas.width || threeCanvas.height !== mapCanvas.height) {\n      setSize(\n        mapCanvas.clientWidth,\n        mapCanvas.clientHeight,\n        true,\n        mapCanvas.offsetTop,\n        mapCanvas.offsetLeft,\n      );\n    }\n\n    r3m.viewProjMx = viewProjMx;\n    if (!ready.current && onReady) {\n      ready.current = true;\n      onReady();\n    }\n    advance(Date.now() * .001, true);\n  })\n\n  useEffect(() => {\n    setOnRender && setOnRender(() => onRender)\n  }, [setOnRender, onRender])\n\n  useLayoutEffect(() => {\n    if (!manualRender) return;\n    set({ camera: camRef.current! }); // eslint-disable-line @typescript-eslint/no-non-null-assertion\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return <>\n    {manualRender && <perspectiveCamera\n      ref={camRef}\n      matrixAutoUpdate={false}\n      matrixWorldAutoUpdate={false}\n    />}\n  </>\n})\n\nSyncCameraFC.displayName = 'SyncCameraFC';"],"names":[],"mappings":";;;;;;;AAmBa,MAAA,eAAe,KAAwB,CAAC;AAAA,EACnD;AAAA,EAAU;AAAA,EAAW,WAAW;AAAA,EAAG;AAAA,EAAa;AAAA,EAAc;AAAA,EAAS;AACzE,MAAM;AAEE,QAAA,YAAY,IAAI;AAEtB,QAAM,MAAM;AAEN,QAAA,SAAS,OAA0B,IAAI;AAE7C,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,MAAM;AACrC,QAAM,KAAK,SAAS,CAAK,MAAA,EAAE,EAAE;AAC7B,QAAM,cAAc,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AACjD,QAAM,QAAQ,SAAS,CAAK,MAAA,EAAE,KAAK;AACnC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,MAAM,SAAS,CAAK,MAAA,EAAE,GAAG;AAEzB,QAAA,SAAS,kBAAkB,EAAE,UAAU,WAAW,UAAU,YAAY,IAAI,WAAA,CAAY;AAExF,QAAA,QAAQ,OAAO,KAAK;AAE1B,QAAM,iBAAiB,QAAQ,MAAM,IAAI,gBAAgB,CAAC,GAAG,CAAC;AACxD,QAAA,mBAAmB,OAAO,CAAC;AAC3B,QAAA,oBAAoB,YAAY,MAAM;AACzB,qBAAA;AAAA,EAAA,CAClB;AAED,WAAS,MAAM;AACF,eAAA,QAAQ,QAAQ,IAAI,UAAU;AAErC,QAAA;AAAiB,SAAA,OAAO,OAAO,MAAM;AAEzC,QAAI,iBAAiB;AACjB,QAAA,iBAAiB,UAAU,GAAG;AAChC,uBAAiB,UAAU;AAC3B,UAAI,eAAe;AAAA,IACrB;AAAA,EAAA,GACC,SAAS;AAEN,QAAA,WAAW,YAAY,CAAC,eAA6B;AACzD,QAAI,iBAAiB;AAErB,QAAI,YAAY,UAAU,UAAU,SAAS,YAAY,WAAW,UAAU,QAAQ;AACpF;AAAA,QACE,UAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,MAAA;AAAA,IAEd;AAEA,QAAI,aAAa;AACb,QAAA,CAAC,MAAM,WAAW,SAAS;AAC7B,YAAM,UAAU;AACR;IACV;AACA,YAAQ,KAAK,IAAQ,IAAA,MAAM,IAAI;AAAA,EAAA,CAChC;AAED,YAAU,MAAM;AACC,mBAAA,YAAY,MAAM,QAAQ;AAAA,EAAA,GACxC,CAAC,aAAa,QAAQ,CAAC;AAE1B,kBAAgB,MAAM;AACpB,QAAI,CAAC;AAAc;AACnB,QAAI,EAAE,QAAQ,OAAO,QAAU,CAAA;AAAA,EACjC,GAAG,CAAE,CAAA;AAEL,yCACG,UAAgB,gBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAChB,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,uBAAuB;AAAA,IAAA;AAAA,EAE3B,EAAA,CAAA;AACF,CAAC;AAED,aAAa,cAAc;"}
+{"version":3,"file":"main22.mjs","sources":["../../src/core/canvas-overlay/sync-camera-fc.tsx"],"sourcesContent":["import { useFrame, useThree } from \"@react-three/fiber\";\nimport { memo, useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { Coords } from \"../../api/coords\";\nimport { MapInstance } from \"../generic-map\";\nimport { syncCamera } from \"../sync-camera\";\nimport { useCoordsToMatrix } from \"../use-coords-to-matrix\";\nimport { useFunction } from \"../use-function\";\nimport { useR3M } from \"../use-r3m\";\n\ninterface SyncCameraFCProps extends Coords {\n  setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void,\n  /** on `useFrame` it will manually render (used by `<Coordinates>`) */\n  manualRender?: boolean,\n  onReady?: () => void,\n  map: MapInstance,\n}\n\n/** React Component (FC) to sync the Three camera with the map provider */\nexport const SyncCameraFC = memo<SyncCameraFCProps>(({\n  latitude, longitude, altitude = 0, setOnRender, manualRender, onReady, map\n}) => {\n\n  const mapCanvas = map.getCanvas();\n\n  const r3m = useR3M();\n\n  const camRef = useRef<PerspectiveCamera>(null);\n\n  const camera = useThree(s => s.camera) as PerspectiveCamera;\n  const gl = useThree(s => s.gl);\n  const threeCanvas = useThree(s => s.gl.domElement);\n  const scene = useThree(s => s.scene);\n  const advance = useThree(s => s.advance);\n  const setSize = useThree(s => s.setSize);\n  const set = useThree(s => s.set);\n\n  const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: r3m.fromLngLat });\n\n  const ready = useRef(false);\n\n  const triggerRepaint = useMemo(() => map.triggerRepaint, [map]);\n  const mapPaintRequests = useRef(0);\n  const triggerRepaintOff = useFunction(() => {\n    mapPaintRequests.current++;\n  })\n\n  useFrame(() => {\n    syncCamera(camera, origin, r3m.viewProjMx)\n\n    if (manualRender) gl.render(scene, camera);\n\n    map.triggerRepaint = triggerRepaint;\n    if (mapPaintRequests.current > 0) {\n      mapPaintRequests.current = 0;\n      map.triggerRepaint();\n    }\n  }, -Infinity)\n\n  const onRender = useFunction((viewProjMx: Matrix4Tuple | {defaultProjectionData: {mainMatrix: Record<string, number>}}) => {\n    map.triggerRepaint = triggerRepaintOff;\n\n    if (threeCanvas.width !== mapCanvas.width || threeCanvas.height !== mapCanvas.height) {\n      setSize(\n        mapCanvas.clientWidth,\n        mapCanvas.clientHeight,\n        true,\n        mapCanvas.offsetTop,\n        mapCanvas.offsetLeft,\n      );\n    }\n\n    const pVMx = 'defaultProjectionData' in viewProjMx ? Object.values(viewProjMx.defaultProjectionData.mainMatrix) : viewProjMx;\n    r3m.viewProjMx = pVMx as Matrix4Tuple;\n    if (!ready.current && onReady) {\n      ready.current = true;\n      onReady();\n    }\n    advance(Date.now() * .001, true);\n  })\n\n  useEffect(() => {\n    setOnRender && setOnRender(() => onRender)\n  }, [setOnRender, onRender])\n\n  useLayoutEffect(() => {\n    if (!manualRender) return;\n    set({ camera: camRef.current! }); // eslint-disable-line @typescript-eslint/no-non-null-assertion\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return <>\n    {manualRender && <perspectiveCamera\n      ref={camRef}\n      matrixAutoUpdate={false}\n      matrixWorldAutoUpdate={false}\n    />}\n  </>\n})\n\nSyncCameraFC.displayName = 'SyncCameraFC';"],"names":[],"mappings":";;;;;;;AAmBa,MAAA,eAAe,KAAwB,CAAC;AAAA,EACnD;AAAA,EAAU;AAAA,EAAW,WAAW;AAAA,EAAG;AAAA,EAAa;AAAA,EAAc;AAAA,EAAS;AACzE,MAAM;AAEE,QAAA,YAAY,IAAI;AAEtB,QAAM,MAAM;AAEN,QAAA,SAAS,OAA0B,IAAI;AAE7C,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,MAAM;AACrC,QAAM,KAAK,SAAS,CAAK,MAAA,EAAE,EAAE;AAC7B,QAAM,cAAc,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AACjD,QAAM,QAAQ,SAAS,CAAK,MAAA,EAAE,KAAK;AACnC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,MAAM,SAAS,CAAK,MAAA,EAAE,GAAG;AAEzB,QAAA,SAAS,kBAAkB,EAAE,UAAU,WAAW,UAAU,YAAY,IAAI,WAAA,CAAY;AAExF,QAAA,QAAQ,OAAO,KAAK;AAE1B,QAAM,iBAAiB,QAAQ,MAAM,IAAI,gBAAgB,CAAC,GAAG,CAAC;AACxD,QAAA,mBAAmB,OAAO,CAAC;AAC3B,QAAA,oBAAoB,YAAY,MAAM;AACzB,qBAAA;AAAA,EAAA,CAClB;AAED,WAAS,MAAM;AACF,eAAA,QAAQ,QAAQ,IAAI,UAAU;AAErC,QAAA;AAAiB,SAAA,OAAO,OAAO,MAAM;AAEzC,QAAI,iBAAiB;AACjB,QAAA,iBAAiB,UAAU,GAAG;AAChC,uBAAiB,UAAU;AAC3B,UAAI,eAAe;AAAA,IACrB;AAAA,EAAA,GACC,SAAS;AAEN,QAAA,WAAW,YAAY,CAAC,eAA6F;AACzH,QAAI,iBAAiB;AAErB,QAAI,YAAY,UAAU,UAAU,SAAS,YAAY,WAAW,UAAU,QAAQ;AACpF;AAAA,QACE,UAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,MAAA;AAAA,IAEd;AAEM,UAAA,OAAO,2BAA2B,aAAa,OAAO,OAAO,WAAW,sBAAsB,UAAU,IAAI;AAClH,QAAI,aAAa;AACb,QAAA,CAAC,MAAM,WAAW,SAAS;AAC7B,YAAM,UAAU;AACR;IACV;AACA,YAAQ,KAAK,IAAQ,IAAA,MAAM,IAAI;AAAA,EAAA,CAChC;AAED,YAAU,MAAM;AACC,mBAAA,YAAY,MAAM,QAAQ;AAAA,EAAA,GACxC,CAAC,aAAa,QAAQ,CAAC;AAE1B,kBAAgB,MAAM;AACpB,QAAI,CAAC;AAAc;AACnB,QAAI,EAAE,QAAQ,OAAO,QAAU,CAAA;AAAA,EACjC,GAAG,CAAE,CAAA;AAEL,yCACG,UAAgB,gBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAChB,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,uBAAuB;AAAA,IAAA;AAAA,EAE3B,EAAA,CAAA;AACF,CAAC;AAED,aAAa,cAAc;"}

package/dist/maplibre/cjs/main.js

@@ -242,7 +242,7 @@ function useRender({
     const state = useThree.getState();
     const camera = state.camera;
     const { gl, advance } = state;
-    syncCamera(camera, origin, projViewMx);
+    syncCamera(camera, origin, pVMx);
     gl.resetState();
     advance(Date.now() * 1e-3, true);
     if (!frameloop || frameloop === "always")
@@ -435,7 +435,8 @@ const SyncCameraFC = react.memo(({
         mapCanvas.offsetLeft
       );
     }
-    r3m.viewProjMx = viewProjMx;
+    const pVMx = "defaultProjectionData" in viewProjMx ? Object.values(viewProjMx.defaultProjectionData.mainMatrix) : viewProjMx;
+    r3m.viewProjMx = pVMx;
     if (!ready.current && onReady) {
       ready.current = true;
       onReady();

package/dist/maplibre/es/main16.mjs

@@ -13,7 +13,7 @@ function useRender({
     const state = useThree.getState();
     const camera = state.camera;
     const { gl, advance } = state;
-    syncCamera(camera, origin, projViewMx);
+    syncCamera(camera, origin, pVMx);
     gl.resetState();
     advance(Date.now() * 1e-3, true);
     if (!frameloop || frameloop === "always")

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[] | {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;"}
+{"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, pVMx 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,IAAoB;AACpE,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/main22.mjs

@@ -52,7 +52,8 @@ const SyncCameraFC = memo(({
         mapCanvas.offsetLeft
       );
     }
-    r3m.viewProjMx = viewProjMx;
+    const pVMx = "defaultProjectionData" in viewProjMx ? Object.values(viewProjMx.defaultProjectionData.mainMatrix) : viewProjMx;
+    r3m.viewProjMx = pVMx;
     if (!ready.current && onReady) {
       ready.current = true;
       onReady();

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

@@ -1 +1 @@
-{"version":3,"file":"main22.mjs","sources":["../../../src/core/canvas-overlay/sync-camera-fc.tsx"],"sourcesContent":["import { useFrame, useThree } from \"@react-three/fiber\";\nimport { memo, useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { Coords } from \"../../api/coords\";\nimport { MapInstance } from \"../generic-map\";\nimport { syncCamera } from \"../sync-camera\";\nimport { useCoordsToMatrix } from \"../use-coords-to-matrix\";\nimport { useFunction } from \"../use-function\";\nimport { useR3M } from \"../use-r3m\";\n\ninterface SyncCameraFCProps extends Coords {\n  setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void,\n  /** on `useFrame` it will manually render (used by `<Coordinates>`) */\n  manualRender?: boolean,\n  onReady?: () => void,\n  map: MapInstance,\n}\n\n/** React Component (FC) to sync the Three camera with the map provider */\nexport const SyncCameraFC = memo<SyncCameraFCProps>(({\n  latitude, longitude, altitude = 0, setOnRender, manualRender, onReady, map\n}) => {\n\n  const mapCanvas = map.getCanvas();\n\n  const r3m = useR3M();\n\n  const camRef = useRef<PerspectiveCamera>(null);\n\n  const camera = useThree(s => s.camera) as PerspectiveCamera;\n  const gl = useThree(s => s.gl);\n  const threeCanvas = useThree(s => s.gl.domElement);\n  const scene = useThree(s => s.scene);\n  const advance = useThree(s => s.advance);\n  const setSize = useThree(s => s.setSize);\n  const set = useThree(s => s.set);\n\n  const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: r3m.fromLngLat });\n\n  const ready = useRef(false);\n\n  const triggerRepaint = useMemo(() => map.triggerRepaint, [map]);\n  const mapPaintRequests = useRef(0);\n  const triggerRepaintOff = useFunction(() => {\n    mapPaintRequests.current++;\n  })\n\n  useFrame(() => {\n    syncCamera(camera, origin, r3m.viewProjMx)\n\n    if (manualRender) gl.render(scene, camera);\n\n    map.triggerRepaint = triggerRepaint;\n    if (mapPaintRequests.current > 0) {\n      mapPaintRequests.current = 0;\n      map.triggerRepaint();\n    }\n  }, -Infinity)\n\n  const onRender = useFunction((viewProjMx: Matrix4Tuple) => {\n    map.triggerRepaint = triggerRepaintOff;\n\n    if (threeCanvas.width !== mapCanvas.width || threeCanvas.height !== mapCanvas.height) {\n      setSize(\n        mapCanvas.clientWidth,\n        mapCanvas.clientHeight,\n        true,\n        mapCanvas.offsetTop,\n        mapCanvas.offsetLeft,\n      );\n    }\n\n    r3m.viewProjMx = viewProjMx;\n    if (!ready.current && onReady) {\n      ready.current = true;\n      onReady();\n    }\n    advance(Date.now() * .001, true);\n  })\n\n  useEffect(() => {\n    setOnRender && setOnRender(() => onRender)\n  }, [setOnRender, onRender])\n\n  useLayoutEffect(() => {\n    if (!manualRender) return;\n    set({ camera: camRef.current! }); // eslint-disable-line @typescript-eslint/no-non-null-assertion\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return <>\n    {manualRender && <perspectiveCamera\n      ref={camRef}\n      matrixAutoUpdate={false}\n      matrixWorldAutoUpdate={false}\n    />}\n  </>\n})\n\nSyncCameraFC.displayName = 'SyncCameraFC';"],"names":[],"mappings":";;;;;;;AAmBa,MAAA,eAAe,KAAwB,CAAC;AAAA,EACnD;AAAA,EAAU;AAAA,EAAW,WAAW;AAAA,EAAG;AAAA,EAAa;AAAA,EAAc;AAAA,EAAS;AACzE,MAAM;AAEE,QAAA,YAAY,IAAI;AAEtB,QAAM,MAAM;AAEN,QAAA,SAAS,OAA0B,IAAI;AAE7C,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,MAAM;AACrC,QAAM,KAAK,SAAS,CAAK,MAAA,EAAE,EAAE;AAC7B,QAAM,cAAc,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AACjD,QAAM,QAAQ,SAAS,CAAK,MAAA,EAAE,KAAK;AACnC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,MAAM,SAAS,CAAK,MAAA,EAAE,GAAG;AAEzB,QAAA,SAAS,kBAAkB,EAAE,UAAU,WAAW,UAAU,YAAY,IAAI,WAAA,CAAY;AAExF,QAAA,QAAQ,OAAO,KAAK;AAE1B,QAAM,iBAAiB,QAAQ,MAAM,IAAI,gBAAgB,CAAC,GAAG,CAAC;AACxD,QAAA,mBAAmB,OAAO,CAAC;AAC3B,QAAA,oBAAoB,YAAY,MAAM;AACzB,qBAAA;AAAA,EAAA,CAClB;AAED,WAAS,MAAM;AACF,eAAA,QAAQ,QAAQ,IAAI,UAAU;AAErC,QAAA;AAAiB,SAAA,OAAO,OAAO,MAAM;AAEzC,QAAI,iBAAiB;AACjB,QAAA,iBAAiB,UAAU,GAAG;AAChC,uBAAiB,UAAU;AAC3B,UAAI,eAAe;AAAA,IACrB;AAAA,EAAA,GACC,SAAS;AAEN,QAAA,WAAW,YAAY,CAAC,eAA6B;AACzD,QAAI,iBAAiB;AAErB,QAAI,YAAY,UAAU,UAAU,SAAS,YAAY,WAAW,UAAU,QAAQ;AACpF;AAAA,QACE,UAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,MAAA;AAAA,IAEd;AAEA,QAAI,aAAa;AACb,QAAA,CAAC,MAAM,WAAW,SAAS;AAC7B,YAAM,UAAU;AACR;IACV;AACA,YAAQ,KAAK,IAAQ,IAAA,MAAM,IAAI;AAAA,EAAA,CAChC;AAED,YAAU,MAAM;AACC,mBAAA,YAAY,MAAM,QAAQ;AAAA,EAAA,GACxC,CAAC,aAAa,QAAQ,CAAC;AAE1B,kBAAgB,MAAM;AACpB,QAAI,CAAC;AAAc;AACnB,QAAI,EAAE,QAAQ,OAAO,QAAU,CAAA;AAAA,EACjC,GAAG,CAAE,CAAA;AAEL,yCACG,UAAgB,gBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAChB,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,uBAAuB;AAAA,IAAA;AAAA,EAE3B,EAAA,CAAA;AACF,CAAC;AAED,aAAa,cAAc;"}
+{"version":3,"file":"main22.mjs","sources":["../../../src/core/canvas-overlay/sync-camera-fc.tsx"],"sourcesContent":["import { useFrame, useThree } from \"@react-three/fiber\";\nimport { memo, useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { Coords } from \"../../api/coords\";\nimport { MapInstance } from \"../generic-map\";\nimport { syncCamera } from \"../sync-camera\";\nimport { useCoordsToMatrix } from \"../use-coords-to-matrix\";\nimport { useFunction } from \"../use-function\";\nimport { useR3M } from \"../use-r3m\";\n\ninterface SyncCameraFCProps extends Coords {\n  setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void,\n  /** on `useFrame` it will manually render (used by `<Coordinates>`) */\n  manualRender?: boolean,\n  onReady?: () => void,\n  map: MapInstance,\n}\n\n/** React Component (FC) to sync the Three camera with the map provider */\nexport const SyncCameraFC = memo<SyncCameraFCProps>(({\n  latitude, longitude, altitude = 0, setOnRender, manualRender, onReady, map\n}) => {\n\n  const mapCanvas = map.getCanvas();\n\n  const r3m = useR3M();\n\n  const camRef = useRef<PerspectiveCamera>(null);\n\n  const camera = useThree(s => s.camera) as PerspectiveCamera;\n  const gl = useThree(s => s.gl);\n  const threeCanvas = useThree(s => s.gl.domElement);\n  const scene = useThree(s => s.scene);\n  const advance = useThree(s => s.advance);\n  const setSize = useThree(s => s.setSize);\n  const set = useThree(s => s.set);\n\n  const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: r3m.fromLngLat });\n\n  const ready = useRef(false);\n\n  const triggerRepaint = useMemo(() => map.triggerRepaint, [map]);\n  const mapPaintRequests = useRef(0);\n  const triggerRepaintOff = useFunction(() => {\n    mapPaintRequests.current++;\n  })\n\n  useFrame(() => {\n    syncCamera(camera, origin, r3m.viewProjMx)\n\n    if (manualRender) gl.render(scene, camera);\n\n    map.triggerRepaint = triggerRepaint;\n    if (mapPaintRequests.current > 0) {\n      mapPaintRequests.current = 0;\n      map.triggerRepaint();\n    }\n  }, -Infinity)\n\n  const onRender = useFunction((viewProjMx: Matrix4Tuple | {defaultProjectionData: {mainMatrix: Record<string, number>}}) => {\n    map.triggerRepaint = triggerRepaintOff;\n\n    if (threeCanvas.width !== mapCanvas.width || threeCanvas.height !== mapCanvas.height) {\n      setSize(\n        mapCanvas.clientWidth,\n        mapCanvas.clientHeight,\n        true,\n        mapCanvas.offsetTop,\n        mapCanvas.offsetLeft,\n      );\n    }\n\n    const pVMx = 'defaultProjectionData' in viewProjMx ? Object.values(viewProjMx.defaultProjectionData.mainMatrix) : viewProjMx;\n    r3m.viewProjMx = pVMx as Matrix4Tuple;\n    if (!ready.current && onReady) {\n      ready.current = true;\n      onReady();\n    }\n    advance(Date.now() * .001, true);\n  })\n\n  useEffect(() => {\n    setOnRender && setOnRender(() => onRender)\n  }, [setOnRender, onRender])\n\n  useLayoutEffect(() => {\n    if (!manualRender) return;\n    set({ camera: camRef.current! }); // eslint-disable-line @typescript-eslint/no-non-null-assertion\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return <>\n    {manualRender && <perspectiveCamera\n      ref={camRef}\n      matrixAutoUpdate={false}\n      matrixWorldAutoUpdate={false}\n    />}\n  </>\n})\n\nSyncCameraFC.displayName = 'SyncCameraFC';"],"names":[],"mappings":";;;;;;;AAmBa,MAAA,eAAe,KAAwB,CAAC;AAAA,EACnD;AAAA,EAAU;AAAA,EAAW,WAAW;AAAA,EAAG;AAAA,EAAa;AAAA,EAAc;AAAA,EAAS;AACzE,MAAM;AAEE,QAAA,YAAY,IAAI;AAEtB,QAAM,MAAM;AAEN,QAAA,SAAS,OAA0B,IAAI;AAE7C,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,MAAM;AACrC,QAAM,KAAK,SAAS,CAAK,MAAA,EAAE,EAAE;AAC7B,QAAM,cAAc,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AACjD,QAAM,QAAQ,SAAS,CAAK,MAAA,EAAE,KAAK;AACnC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,MAAM,SAAS,CAAK,MAAA,EAAE,GAAG;AAEzB,QAAA,SAAS,kBAAkB,EAAE,UAAU,WAAW,UAAU,YAAY,IAAI,WAAA,CAAY;AAExF,QAAA,QAAQ,OAAO,KAAK;AAE1B,QAAM,iBAAiB,QAAQ,MAAM,IAAI,gBAAgB,CAAC,GAAG,CAAC;AACxD,QAAA,mBAAmB,OAAO,CAAC;AAC3B,QAAA,oBAAoB,YAAY,MAAM;AACzB,qBAAA;AAAA,EAAA,CAClB;AAED,WAAS,MAAM;AACF,eAAA,QAAQ,QAAQ,IAAI,UAAU;AAErC,QAAA;AAAiB,SAAA,OAAO,OAAO,MAAM;AAEzC,QAAI,iBAAiB;AACjB,QAAA,iBAAiB,UAAU,GAAG;AAChC,uBAAiB,UAAU;AAC3B,UAAI,eAAe;AAAA,IACrB;AAAA,EAAA,GACC,SAAS;AAEN,QAAA,WAAW,YAAY,CAAC,eAA6F;AACzH,QAAI,iBAAiB;AAErB,QAAI,YAAY,UAAU,UAAU,SAAS,YAAY,WAAW,UAAU,QAAQ;AACpF;AAAA,QACE,UAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,MAAA;AAAA,IAEd;AAEM,UAAA,OAAO,2BAA2B,aAAa,OAAO,OAAO,WAAW,sBAAsB,UAAU,IAAI;AAClH,QAAI,aAAa;AACb,QAAA,CAAC,MAAM,WAAW,SAAS;AAC7B,YAAM,UAAU;AACR;IACV;AACA,YAAQ,KAAK,IAAQ,IAAA,MAAM,IAAI;AAAA,EAAA,CAChC;AAED,YAAU,MAAM;AACC,mBAAA,YAAY,MAAM,QAAQ;AAAA,EAAA,GACxC,CAAC,aAAa,QAAQ,CAAC;AAE1B,kBAAgB,MAAM;AACpB,QAAI,CAAC;AAAc;AACnB,QAAI,EAAE,QAAQ,OAAO,QAAU,CAAA;AAAA,EACjC,GAAG,CAAE,CAAA;AAEL,yCACG,UAAgB,gBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAChB,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,uBAAuB;AAAA,IAAA;AAAA,EAE3B,EAAA,CAAA;AACF,CAAC;AAED,aAAa,cAAc;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "1.0.0-next.2",
+  "version": "1.0.0",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",
@@ -54,7 +54,7 @@
     "leva": "^0.9.35",
     "luxon": "^3.3.0",
     "mapbox-gl": "^3.9.4",
-    "maplibre-gl": "4.7.1",
+    "maplibre-gl": "^5.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^8.0.1",

package/stories/package.json

@@ -16,7 +16,7 @@
     "leva": "^0.9.35",
     "luxon": "^3.4.4",
     "mapbox-gl": "^3.9.4",
-    "maplibre-gl": "^4.7.1",
+    "maplibre-gl": "^5.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^8.0.1",

package/stories/yarn.lock

@@ -821,16 +821,16 @@
     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==
+"@maplibre/maplibre-gl-style-spec@^23.1.0":
+  version "23.2.0"
+  resolved "https://registry.yarnpkg.com/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-23.2.0.tgz#f746e0bf4292664b0bc1e1af672700511e3bb634"
+  integrity sha512-o53j6v4Zhezk9GhA1h+iBVCRaE3aij4GBxZY2OoWZuaicxWuXS4i80qYKXggpIDkzGsiiMZHg6Wp4gz+CcD4Yw==
   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"
+    quickselect "^3.0.0"
     rw "^1.3.3"
     tinyqueue "^3.0.0"
 
@@ -1452,7 +1452,7 @@
   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":
+"@types/geojson@^7946.0.15", "@types/geojson@^7946.0.16":
   version "7946.0.16"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.16.tgz#8ebe53d69efada7044454e3305c19017d97ced2a"
   integrity sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==
@@ -2252,7 +2252,7 @@ draco3d@^1.4.1:
   resolved "https://registry.yarnpkg.com/draco3d/-/draco3d-1.5.6.tgz#0d570a9792e3a3a9fafbfea065b692940441c626"
   integrity sha512-+3NaRjWktb5r61ZFoDejlykPEFKT5N/LkbXsaddlw6xNSXBanUYpFc2AXXpbJDilPHazcSreU/DpQIaxfX0NfQ==
 
-earcut@^3.0.0:
+earcut@^3.0.0, earcut@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/earcut/-/earcut-3.0.1.tgz#f60b3f671c5657cca9d3e131c5527c5dde00ef38"
   integrity sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==
@@ -3218,10 +3218,10 @@ mapbox-gl@^3.9.4:
     tinyqueue "^3.0.0"
     vt-pbf "^3.1.3"
 
-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==
+maplibre-gl@^5.4.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-5.4.0.tgz#1cff5776838b981636d8c1a182034e76e98707ff"
+  integrity sha512-ZVrtdFIhFAqt53H2k5Ssqn7QIKNI19fW+He5tr4loxZxWZffp1aZYY9ImNncAJaALU/NYlV6Eul7UVB56/N7WQ==
   dependencies:
     "@mapbox/geojson-rewind" "^0.5.2"
     "@mapbox/jsonlint-lines-primitives" "^2.0.2"
@@ -3230,14 +3230,14 @@ maplibre-gl@^4.7.1:
     "@mapbox/unitbezier" "^0.0.1"
     "@mapbox/vector-tile" "^1.3.1"
     "@mapbox/whoots-js" "^3.1.0"
-    "@maplibre/maplibre-gl-style-spec" "^20.3.1"
-    "@types/geojson" "^7946.0.14"
+    "@maplibre/maplibre-gl-style-spec" "^23.1.0"
+    "@types/geojson" "^7946.0.16"
     "@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"
+    earcut "^3.0.1"
     geojson-vt "^4.0.2"
     gl-matrix "^3.4.3"
     global-prefix "^4.0.0"
@@ -4196,11 +4196,6 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-quickselect@^2.0.0:
-  version "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"