From 72fccc10594f3f874861fe39dde7a094b66fc39d Mon Sep 17 00:00:00 2001
From: Micheal Parks <103450731+micheal-parks@users.noreply.github.com>
Date: Tue, 23 Apr 2024 09:01:31 -0400
Subject: [PATCH] [APP-3958] Maplibre component cleanup (#513)

---
 packages/blocks/package.json                  |  4 +-
 packages/blocks/src/lib/index.ts              |  2 +
 .../blocks/src/lib/maplibre/controls.svelte   | 40 ++++++++++
 .../lib/maplibre/directional-marker.svelte    | 31 ++++++++
 packages/blocks/src/lib/maplibre/index.svelte | 76 +++++++++++--------
 .../blocks/src/lib/maplibre/marker.svelte     | 18 +++--
 .../lib/navigation-map/components/map.svelte  |  5 +-
 .../components/robot-marker.svelte            | 14 ++--
 .../components/waypoints.svelte               |  3 +-
 .../src/lib/navigation-map/index.svelte       |  1 -
 packages/blocks/src/routes/+page.svelte       |  9 ++-
 .../blocks/src/routes/following-marker.svelte | 44 +++++++++++
 pnpm-lock.yaml                                | 68 +++++++++--------
 13 files changed, 230 insertions(+), 85 deletions(-)
 create mode 100644 packages/blocks/src/lib/maplibre/controls.svelte
 create mode 100644 packages/blocks/src/lib/maplibre/directional-marker.svelte
 create mode 100644 packages/blocks/src/routes/following-marker.svelte

diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index 26896cb2..92580849 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-blocks",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "publishConfig": {
     "access": "public"
   },
@@ -42,7 +42,7 @@
     "three": ">=0.159"
   },
   "dependencies": {
-    "maplibre-gl": "^3.3.0"
+    "maplibre-gl": "^4.1.3"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.0.0",
diff --git a/packages/blocks/src/lib/index.ts b/packages/blocks/src/lib/index.ts
index f98c5712..c744fe44 100644
--- a/packages/blocks/src/lib/index.ts
+++ b/packages/blocks/src/lib/index.ts
@@ -1,6 +1,8 @@
 // MapLibre components
 export { default as MapLibre } from './maplibre/index.svelte';
 export { default as MapLibreMarker } from './maplibre/marker.svelte';
+export { default as MapLibreDirectionalMarker } from './maplibre/directional-marker.svelte';
+export { default as MapLibreControls } from './maplibre/controls.svelte';
 export { useMapLibre, useMapLibreEvent } from './maplibre/hooks';
 export type { LngLat, GeoPose, Waypoint } from './maplibre/types';
 
diff --git a/packages/blocks/src/lib/maplibre/controls.svelte b/packages/blocks/src/lib/maplibre/controls.svelte
new file mode 100644
index 00000000..e7379d26
--- /dev/null
+++ b/packages/blocks/src/lib/maplibre/controls.svelte
@@ -0,0 +1,40 @@
+<!-- 
+  @component
+  
+  Adds a set of navigation controls.
+
+  @example
+
+  ```html
+    <MapLibre>
+      <MapLibreControls />
+    </MapLibre>
+  ```
+
+  @see https://maplibre.org/maplibre-gl-js/docs/API/classes/NavigationControl/
+-->
+<script lang="ts">
+import { NavigationControl, type ControlPosition } from 'maplibre-gl';
+import { onMount } from 'svelte';
+import { useMapLibre } from './hooks';
+
+export let position: ControlPosition = 'top-right';
+
+export let showCompass = true;
+export let showZoom = true;
+export let visualizePitch = true;
+
+const { map } = useMapLibre();
+const control = new NavigationControl();
+$: control.options.showCompass = showCompass;
+$: control.options.showZoom = showZoom;
+$: control.options.visualizePitch = visualizePitch;
+
+onMount(() => {
+  map.addControl(control, position);
+
+  return () => {
+    map.removeControl(control);
+  };
+});
+</script>
diff --git a/packages/blocks/src/lib/maplibre/directional-marker.svelte b/packages/blocks/src/lib/maplibre/directional-marker.svelte
new file mode 100644
index 00000000..6bf1db88
--- /dev/null
+++ b/packages/blocks/src/lib/maplibre/directional-marker.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+import Marker from './marker.svelte';
+
+/** The longitude of the marker. */
+export let lng = 0;
+
+/** The latitude of the marker. */
+export let lat = 0;
+
+/** The rotation angle of the marker (clockwise, in degrees) */
+export let rotation = 0;
+
+/** The relative size of the marker. */
+export let scale = 1;
+
+let element: HTMLElement;
+</script>
+
+<div
+  bind:this={element}
+  class="h-7.5 w-7.5"
+  style:background-image={`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='green' stroke='white' stroke-width='2' %3E%3Cpath d='M12,2L4.5,20.29L5.21,21L12,18L18.79,21L19.5,20.29L12,2Z' /%3E%3C/svg%3E")`}
+/>
+
+<Marker
+  {element}
+  {lng}
+  {lat}
+  {rotation}
+  {scale}
+/>
diff --git a/packages/blocks/src/lib/maplibre/index.svelte b/packages/blocks/src/lib/maplibre/index.svelte
index 23a9ea31..b055cec7 100644
--- a/packages/blocks/src/lib/maplibre/index.svelte
+++ b/packages/blocks/src/lib/maplibre/index.svelte
@@ -15,9 +15,9 @@
 <script lang="ts">
 import 'maplibre-gl/dist/maplibre-gl.css';
 
-import { onMount, createEventDispatcher, onDestroy } from 'svelte';
+import { onMount, tick } from 'svelte';
 import { provideMapContext } from './hooks';
-import { Map, NavigationControl } from 'maplibre-gl';
+import { Map, type MapOptions } from 'maplibre-gl';
 import { style } from './style';
 import type { LngLat } from '$lib';
 
@@ -44,51 +44,65 @@ export let maxZoom = 22;
  */
 export let center: LngLat = { lng: -73.984_421, lat: 40.771_811_6 };
 
-/** The MapLibre Map instance */
+/** A binding to the MapLibre Map instance */
 export let map: Map | undefined = undefined;
 
-interface Events {
-  /** Fired after the map has been created. */
-  create: Map;
-  /** Fired when the map camera moves. */
-  move: Map;
-  /** Fired when the map resizes. */
-  resize: Map;
-}
+export let options: Partial<MapOptions> | undefined = undefined;
+
+/** Fired after the map has been created. */
+export let onCreate: undefined | ((map: Map) => void) = undefined;
+
+/** Fired when the map camera moves. */
+
+export let onMove: undefined | ((map: Map) => void) = undefined;
+/** Fired when the map resizes. */
+
+export let onResize: undefined | ((map: Map) => void) = undefined;
 
-const dispatch = createEventDispatcher<Events>();
 const context = provideMapContext(center, zoom);
 
 let container: HTMLElement;
 let created = false;
 
 const setMapSize = () => {
-  const canvas = map!.getCanvas();
+  const canvas = map?.getCanvas();
   context.size.set({
-    width: canvas.clientWidth,
-    height: canvas.clientHeight,
+    width: canvas?.clientWidth ?? 0,
+    height: canvas?.clientHeight ?? 0,
   });
 };
 
 const handleCreate = () => {
+  if (map === undefined) {
+    return;
+  }
+
   created = true;
-  dispatch('create', map!);
+  onCreate?.(map);
 
   // Resize the map after any slots have been rendered.
-  requestAnimationFrame(() => map!.resize());
+  void tick().then(() => map?.resize());
 };
 
 const handleMove = () => {
-  context.center.set(map!.getCenter());
-  context.zoom.set(map!.getZoom());
-  dispatch('move', map!);
+  if (map === undefined) {
+    return;
+  }
+
+  context.center.set(map.getCenter());
+  context.zoom.set(map.getZoom());
+  onMove?.(map);
 };
 
 const handleResize = () => {
+  if (map === undefined) {
+    return;
+  }
+
   setMapSize();
-  context.center.set(map!.getCenter());
-  context.zoom.set(map!.getZoom());
-  dispatch('resize', map!);
+  context.center.set(map.getCenter());
+  context.zoom.set(map.getZoom());
+  onResize?.(map);
 };
 
 onMount(() => {
@@ -102,22 +116,20 @@ onMount(() => {
     maxPitch,
     minZoom,
     maxZoom,
+    ...options,
   });
 
   context.map.set(map);
 
-  const nav = new NavigationControl({ showZoom: false });
-  map.addControl(nav, 'top-right');
-
   map.on('move', handleMove);
   map.on('resize', handleResize);
   map.on('style.load', handleCreate);
-});
 
-onDestroy(() => {
-  map?.off('move', handleMove);
-  map?.off('resize', handleResize);
-  map?.off('style.load', handleCreate);
+  return () => {
+    map?.off('move', handleMove);
+    map?.off('resize', handleResize);
+    map?.off('style.load', handleCreate);
+  };
 });
 
 $: map?.setMinPitch(minPitch);
@@ -129,7 +141,7 @@ $: map?.setMaxPitch(maxPitch);
 {/if}
 
 <div
-  class="h-full"
+  class="h-full {$$restProps.class ?? ''}"
   {...$$restProps}
 >
   <div
diff --git a/packages/blocks/src/lib/maplibre/marker.svelte b/packages/blocks/src/lib/maplibre/marker.svelte
index 3ccebf77..d76a0b1c 100644
--- a/packages/blocks/src/lib/maplibre/marker.svelte
+++ b/packages/blocks/src/lib/maplibre/marker.svelte
@@ -15,10 +15,15 @@
 import { onDestroy } from 'svelte';
 import { Marker, LngLat } from 'maplibre-gl';
 import { useMapLibre } from './hooks';
-import type { GeoPose } from '$lib';
 
-/** The Geo position of the marker. */
-export let pose: GeoPose | undefined;
+/** The longitude of the marker. */
+export let lng = 0;
+
+/** The latitude of the marker. */
+export let lat = 0;
+
+/** The rotation angle of the marker (clockwise, in degrees) */
+export let rotation = 0;
 
 /** The relative size of the marker. */
 export let scale = 1;
@@ -33,14 +38,15 @@ const { map } = useMapLibre();
 
 let marker: Marker | undefined;
 
-$: if (pose) {
+$: {
   marker?.remove();
   marker = new Marker(element ? { element, scale, color } : { scale, color });
+  marker.setLngLat(new LngLat(0, 0));
   marker.getElement().style.zIndex = '1';
-  marker.setLngLat(new LngLat(pose.lng, pose.lat));
-  marker.setRotation(pose.rotation);
   marker.addTo(map);
 }
+$: marker?.setLngLat(new LngLat(lng, lat));
+$: marker?.setRotation(rotation);
 
 onDestroy(() => marker?.remove());
 </script>
diff --git a/packages/blocks/src/lib/navigation-map/components/map.svelte b/packages/blocks/src/lib/navigation-map/components/map.svelte
index 7529f48d..0fa792e0 100644
--- a/packages/blocks/src/lib/navigation-map/components/map.svelte
+++ b/packages/blocks/src/lib/navigation-map/components/map.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { Button, Icon, ToggleButtons, Tooltip } from '@viamrobotics/prime-core';
 import type { Map } from 'maplibre-gl';
-import { MapLibre, type GeoPose } from '$lib';
+import { MapLibre, type GeoPose, MapLibreControls } from '$lib';
 import { environment, view } from '../stores';
 import SceneLayer from './scene-layer.svelte';
 import RobotMarker from './robot-marker.svelte';
@@ -74,8 +74,9 @@ onDestroy(() => {
     maxPitch={$view === '3D' ? maxPitch : minPitch}
     minZoom={6}
     bind:map
-    on:create
   >
+    <MapLibreControls showZoom={false} />
+
     <Nav
       on:add-waypoint
       on:delete-waypoint
diff --git a/packages/blocks/src/lib/navigation-map/components/robot-marker.svelte b/packages/blocks/src/lib/navigation-map/components/robot-marker.svelte
index 2b9cf474..ee86ac49 100644
--- a/packages/blocks/src/lib/navigation-map/components/robot-marker.svelte
+++ b/packages/blocks/src/lib/navigation-map/components/robot-marker.svelte
@@ -1,18 +1,14 @@
 <script lang="ts">
-import { MapLibreMarker, type GeoPose } from '$lib';
-
-export let element = document.createElement('div');
-element.style.backgroundImage = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='green' stroke='white' stroke-width='2' %3E%3Cpath d='M12,2L4.5,20.29L5.21,21L12,18L18.79,21L19.5,20.29L12,2Z' /%3E%3C/svg%3E")`;
-element.style.width = `30px`;
-element.style.height = `30px`;
+import { MapLibreDirectionalMarker, type GeoPose } from '$lib';
 
 /** The Lng,Lat and rotation of the marker. */
 export let pose: GeoPose | undefined = undefined;
 </script>
 
 {#if pose}
-  <MapLibreMarker
-    {element}
-    {pose}
+  <MapLibreDirectionalMarker
+    lng={pose.lng}
+    lat={pose.lat}
+    rotation={pose.rotation}
   />
 {/if}
diff --git a/packages/blocks/src/lib/navigation-map/components/waypoints.svelte b/packages/blocks/src/lib/navigation-map/components/waypoints.svelte
index 17767819..d21943d0 100644
--- a/packages/blocks/src/lib/navigation-map/components/waypoints.svelte
+++ b/packages/blocks/src/lib/navigation-map/components/waypoints.svelte
@@ -6,6 +6,7 @@ import { waypoints } from '../stores';
 {#each $waypoints as waypoint (waypoint.id)}
   <MapLibreMarker
     scale={0.7}
-    pose={{ lng: waypoint.lng, lat: waypoint.lat, rotation: 0 }}
+    lng={waypoint.lng}
+    lat={waypoint.lat}
   />
 {/each}
diff --git a/packages/blocks/src/lib/navigation-map/index.svelte b/packages/blocks/src/lib/navigation-map/index.svelte
index 617d98ee..f8d73f02 100644
--- a/packages/blocks/src/lib/navigation-map/index.svelte
+++ b/packages/blocks/src/lib/navigation-map/index.svelte
@@ -71,7 +71,6 @@ $: $envStore = environment;
 <Map
   bind:map
   {baseGeoPose}
-  on:create
   on:add-waypoint
   on:delete-waypoint
   on:update-obstacles
diff --git a/packages/blocks/src/routes/+page.svelte b/packages/blocks/src/routes/+page.svelte
index f40b8102..5aa21e87 100644
--- a/packages/blocks/src/routes/+page.svelte
+++ b/packages/blocks/src/routes/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 import pointcloudUrl from '$lib/assets/pointcloud.pcd?url';
 import motionPath from '$lib/assets/cbirrtsmooth800.txt?raw';
-import { MapLibre, SlamMap2D } from '$lib';
+import { MapLibre, MapLibreControls, SlamMap2D } from '$lib';
 import NavigationMap from './navigation-map.svelte';
+import FollowingMarker from './following-marker.svelte';
 
 const fetchPointcloud = async () => {
   const response = await fetch(pointcloudUrl);
@@ -45,7 +46,11 @@ const path = () =>
 
   <div class="px-12">
     <div class="relative aspect-video w-full border border-gray-200 pt-0">
-      <MapLibre />
+      <MapLibre>
+        <MapLibreControls />
+      </MapLibre>
     </div>
   </div>
+
+  <FollowingMarker />
 </div>
diff --git a/packages/blocks/src/routes/following-marker.svelte b/packages/blocks/src/routes/following-marker.svelte
new file mode 100644
index 00000000..57e03887
--- /dev/null
+++ b/packages/blocks/src/routes/following-marker.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+import { MapLibre, MapLibreDirectionalMarker } from '$lib';
+import type { Map } from 'maplibre-gl';
+
+let lng = -73.98;
+let lat = 40.77;
+let rotation = 0;
+
+const RAD2DEG = 180 / Math.PI;
+
+const frame = (delta: number) => {
+  requestAnimationFrame(frame);
+
+  const dy = Math.sin(delta / 10e2) / 10e2;
+  const dx = Math.cos(delta / 10e2) / 10e2;
+
+  rotation = (Math.atan2(dx, dy) - Math.atan2(lng, lat)) * RAD2DEG - 90;
+  lat += dy;
+  lng += dx;
+  map?.jumpTo({ center: { lng, lat } });
+};
+
+let map: Map | undefined;
+
+requestAnimationFrame(frame);
+</script>
+
+<div class="px-12">
+  Following robot
+  <div class="relative aspect-video w-full border border-gray-200 pt-0">
+    <MapLibre
+      bind:map
+      minZoom={10}
+      center={{ lng, lat }}
+      onCreate={() => console.log('create')}
+    >
+      <MapLibreDirectionalMarker
+        {lng}
+        {lat}
+        {rotation}
+      />
+    </MapLibre>
+  </div>
+</div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 98fa11c0..8195284f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,8 +11,8 @@ importers:
   packages/blocks:
     dependencies:
       maplibre-gl:
-        specifier: ^3.3.0
-        version: 3.3.0
+        specifier: ^4.1.3
+        version: 4.1.3
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
@@ -3098,7 +3098,7 @@ packages:
     hasBin: true
     dependencies:
       get-stream: 6.0.1
-      minimist: 1.2.6
+      minimist: 1.2.8
     dev: false
 
   /@mapbox/jsonlint-lines-primitives@2.0.2:
@@ -3129,13 +3129,13 @@ packages:
     engines: {node: '>=6.0.0'}
     dev: false
 
-  /@maplibre/maplibre-gl-style-spec@19.3.0:
-    resolution: {integrity: sha512-ZbhX9CTV+Z7vHwkRIasDOwTSzr76e8Q6a55RMsAibjyX6+P0ZNL1qAKNzOjjBDP3+aEfNMl7hHo5knuY6pTAUQ==}
+  /@maplibre/maplibre-gl-style-spec@20.1.1:
+    resolution: {integrity: sha512-z85ARNPCBI2Cs5cPOS3DSbraTN+ue8zrcYVoSWBuNrD/mA+2SKAJ+hIzI22uN7gac6jBMnCdpPKRxS/V0KSZVQ==}
     hasBin: true
     dependencies:
       '@mapbox/jsonlint-lines-primitives': 2.0.2
       '@mapbox/unitbezier': 0.0.1
-      json-stringify-pretty-compact: 3.0.0
+      json-stringify-pretty-compact: 4.0.0
       minimist: 1.2.8
       rw: 1.3.3
       sort-object: 3.0.3
@@ -6300,8 +6300,14 @@ packages:
     resolution: {integrity: sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==}
     dev: true
 
-  /@types/geojson@7946.0.10:
-    resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==}
+  /@types/geojson-vt@3.2.5:
+    resolution: {integrity: sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==}
+    dependencies:
+      '@types/geojson': 7946.0.14
+    dev: false
+
+  /@types/geojson@7946.0.14:
+    resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==}
     dev: false
 
   /@types/graceful-fs@4.1.5:
@@ -6382,16 +6388,16 @@ packages:
     resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
     dev: true
 
-  /@types/mapbox__point-geometry@0.1.2:
-    resolution: {integrity: sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA==}
+  /@types/mapbox__point-geometry@0.1.4:
+    resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==}
     dev: false
 
-  /@types/mapbox__vector-tile@1.3.0:
-    resolution: {integrity: sha512-kDwVreQO5V4c8yAxzZVQLE5tyWF+IPToAanloQaSnwfXmIcJ7cyOrv8z4Ft4y7PsLYmhWXmON8MBV8RX0Rgr8g==}
+  /@types/mapbox__vector-tile@1.3.4:
+    resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==}
     dependencies:
-      '@types/geojson': 7946.0.10
-      '@types/mapbox__point-geometry': 0.1.2
-      '@types/pbf': 3.0.2
+      '@types/geojson': 7946.0.14
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/pbf': 3.0.5
     dev: false
 
   /@types/mdast@3.0.11:
@@ -6462,8 +6468,8 @@ packages:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
 
-  /@types/pbf@3.0.2:
-    resolution: {integrity: sha512-EDrLIPaPXOZqDjrkzxxbX7UlJSeQVgah3i0aA4pOSzmK9zq3BIh7/MZIQxED7slJByvKM4Gc6Hypyu2lJzh3SQ==}
+  /@types/pbf@3.0.5:
+    resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==}
     dev: false
 
   /@types/pretty-hrtime@1.0.1:
@@ -6572,10 +6578,10 @@ packages:
     resolution: {integrity: sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==}
     dev: true
 
-  /@types/supercluster@7.1.0:
-    resolution: {integrity: sha512-6JapQ2GmEkH66r23BK49I+u6zczVDGTtiJEVvKDYZVSm/vepWaJuTq6BXzJ6I4agG5s8vA1KM7m/gXWDg03O4Q==}
+  /@types/supercluster@7.1.3:
+    resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==}
     dependencies:
-      '@types/geojson': 7946.0.10
+      '@types/geojson': 7946.0.14
     dev: false
 
   /@types/three@0.159.0:
@@ -11281,8 +11287,8 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
-  /json-stringify-pretty-compact@3.0.0:
-    resolution: {integrity: sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA==}
+  /json-stringify-pretty-compact@4.0.0:
+    resolution: {integrity: sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==}
     dev: false
 
   /json5@1.0.2:
@@ -11603,8 +11609,8 @@ packages:
     resolution: {integrity: sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==}
     dev: true
 
-  /maplibre-gl@3.3.0:
-    resolution: {integrity: sha512-LDia3b8u2S8qtl50n8TYJM0IPLzfc01KDc71LNuydvDiEXAGBI5togty+juVtUipRZZjs4dAW6xhgrabc6lIgw==}
+  /maplibre-gl@4.1.3:
+    resolution: {integrity: sha512-nMy5h0kzq9Z66C6AIb3p2BvLIVHz75dGGQow22x+h9/VOihr0IPQI26ylAi6lHqvEy2VqjiRmKAMlFwt0xFKfQ==}
     engines: {node: '>=16.14.0', npm: '>=8.1.0'}
     dependencies:
       '@mapbox/geojson-rewind': 0.5.2
@@ -11614,12 +11620,13 @@ packages:
       '@mapbox/unitbezier': 0.0.1
       '@mapbox/vector-tile': 1.3.1
       '@mapbox/whoots-js': 3.1.0
-      '@maplibre/maplibre-gl-style-spec': 19.3.0
-      '@types/geojson': 7946.0.10
-      '@types/mapbox__point-geometry': 0.1.2
-      '@types/mapbox__vector-tile': 1.3.0
-      '@types/pbf': 3.0.2
-      '@types/supercluster': 7.1.0
+      '@maplibre/maplibre-gl-style-spec': 20.1.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: 2.2.4
       geojson-vt: 3.2.1
       gl-matrix: 3.4.3
@@ -12143,6 +12150,7 @@ packages:
 
   /minimist@1.2.6:
     resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
+    dev: true
 
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}