feat(lib): maplibre (#425)

app/src/pages/MapContainer.tsx

@@ -86,7 +86,11 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
         expandLayerControl={map.expand_layer_control}
         tileServerUrl={map.tile_server_url}
         tileServerAttribution={map.tile_server_attribution}
+        tilesType={map.tiles_type}
+        maplibreStyle={map.maplibre_style}
         showFullscreenControl={map.show_fullscreen_control}
+        zoomOffset={map.zoom_offset}
+        tileSize={map.tile_size}
       >
         {layers &&
           apis &&

app/vite.config.ts

@@ -22,10 +22,21 @@ export default defineConfig({
   plugins: [react(), tailwindcss(), tsConfigPaths()],
   build: {
     sourcemap: true,
+    modulePreload: {
+      // Don't preload maplibre chunks - only load when actually needed
+      resolveDependencies: (_filename, deps) => {
+        return deps.filter((dep) => !dep.includes('maplibre'))
+      },
+    },
     rollupOptions: {
       output: {
         manualChunks: (id) => {
-          if (id.includes('lib/src')) {
+          // Handle lib source (dev) or dist (prod)
+          if (id.includes('lib/src') || id.includes('lib/dist')) {
+            // Separate chunk for MapLibre components
+            if (id.includes('MapLibre')) {
+              return 'maplibre-layer'
+            }
             return 'utopia-ui'
           }
           if (id.includes('node_modules')) {
@@ -38,6 +49,10 @@ export default defineConfig({
             if (id.includes('leaflet')) {
               return 'leaflet'
             }
+            // Separate chunk for maplibre-gl
+            if (id.includes('maplibre-gl')) {
+              return 'maplibre-gl'
+            }
             return 'vendor'
           }
         },

backend/directus-config/development/snapshot/fields/maps/maplibre.json

@@ -0,0 +1,46 @@
+{
+  "collection": "maps",
+  "field": "maplibre",
+  "type": "alias",
+  "meta": {
+    "collection": "maps",
+    "conditions": [
+      {
+        "hidden": false,
+        "name": "Show when maplibre tiles selected",
+        "options": null,
+        "rule": {
+          "_and": [
+            {
+              "tiles_type": {
+                "_eq": "maplibre"
+              }
+            }
+          ]
+        }
+      }
+    ],
+    "display": null,
+    "display_options": null,
+    "field": "maplibre",
+    "group": "tile_server",
+    "hidden": true,
+    "interface": "group-detail",
+    "note": "Configuration for MapLibre GL vector tiles",
+    "options": {
+      "start": "open"
+    },
+    "readonly": false,
+    "required": false,
+    "sort": 3,
+    "special": [
+      "alias",
+      "no-data",
+      "group"
+    ],
+    "translations": null,
+    "validation": null,
+    "validation_message": null,
+    "width": "full"
+  }
+}

backend/directus-config/development/snapshot/fields/maps/maplibre_style.json

@@ -0,0 +1,45 @@
+{
+  "collection": "maps",
+  "field": "maplibre_style",
+  "type": "string",
+  "meta": {
+    "collection": "maps",
+    "conditions": null,
+    "display": null,
+    "display_options": null,
+    "field": "maplibre_style",
+    "group": "maplibre",
+    "hidden": false,
+    "interface": "input",
+    "note": "MapLibre style URL (default: OpenFreeMap Liberty style)",
+    "options": {
+      "placeholder": "https://tiles.openfreemap.org/styles/liberty"
+    },
+    "readonly": false,
+    "required": false,
+    "sort": 1,
+    "special": null,
+    "translations": null,
+    "validation": null,
+    "validation_message": null,
+    "width": "full"
+  },
+  "schema": {
+    "name": "maplibre_style",
+    "table": "maps",
+    "data_type": "character varying",
+    "default_value": null,
+    "max_length": 255,
+    "numeric_precision": null,
+    "numeric_scale": null,
+    "is_nullable": true,
+    "is_unique": false,
+    "is_indexed": false,
+    "is_primary_key": false,
+    "is_generated": false,
+    "generation_expression": null,
+    "has_auto_increment": false,
+    "foreign_key_table": null,
+    "foreign_key_column": null
+  }
+}

backend/directus-config/development/snapshot/fields/maps/raster_tiles.json

@@ -0,0 +1,46 @@
+{
+  "collection": "maps",
+  "field": "raster_tiles",
+  "type": "alias",
+  "meta": {
+    "collection": "maps",
+    "conditions": [
+      {
+        "hidden": false,
+        "name": "Show when raster tiles selected",
+        "options": null,
+        "rule": {
+          "_and": [
+            {
+              "tiles_type": {
+                "_eq": "raster"
+              }
+            }
+          ]
+        }
+      }
+    ],
+    "display": null,
+    "display_options": null,
+    "field": "raster_tiles",
+    "group": "tile_server",
+    "hidden": true,
+    "interface": "group-detail",
+    "note": "Configuration for raster tile layers",
+    "options": {
+      "start": "open"
+    },
+    "readonly": false,
+    "required": false,
+    "sort": 2,
+    "special": [
+      "alias",
+      "no-data",
+      "group"
+    ],
+    "translations": null,
+    "validation": null,
+    "validation_message": null,
+    "width": "full"
+  }
+}

backend/directus-config/development/snapshot/fields/maps/tile_server_attribution.json

@@ -11,11 +11,13 @@
     "group": "tile_server",
     "hidden": false,
     "interface": "input",
-    "note": null,
+    "note": "Attribution text for raster tiles",
-    "options": null,
+    "options": {
+      "placeholder": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
+    },
     "readonly": false,
     "required": false,
-    "sort": 2,
+    "sort": 4,
     "special": null,
     "translations": null,
     "validation": null,

backend/directus-config/development/snapshot/fields/maps/tile_server_url.json

@@ -8,11 +8,13 @@
     "display": null,
     "display_options": null,
     "field": "tile_server_url",
-    "group": "tile_server",
+    "group": "raster_tiles",
     "hidden": false,
     "interface": "input",
-    "note": null,
+    "note": "Raster tile server URL template (e.g., https://tile.osmand.net/hd/{z}/{x}/{y}.png)",
-    "options": null,
+    "options": {
+      "placeholder": "https://tile.osmand.net/hd/{z}/{x}/{y}.png"
+    },
     "readonly": false,
     "required": false,
     "sort": 1,

backend/directus-config/development/snapshot/fields/maps/tile_size.json

@@ -0,0 +1,43 @@
+{
+  "collection": "maps",
+  "field": "tile_size",
+  "type": "integer",
+  "meta": {
+    "collection": "maps",
+    "conditions": null,
+    "display": null,
+    "display_options": null,
+    "field": "tile_size",
+    "group": "raster_tiles",
+    "hidden": false,
+    "interface": "input",
+    "note": null,
+    "options": null,
+    "readonly": false,
+    "required": false,
+    "sort": 2,
+    "special": null,
+    "translations": null,
+    "validation": null,
+    "validation_message": null,
+    "width": "half"
+  },
+  "schema": {
+    "name": "tile_size",
+    "table": "maps",
+    "data_type": "integer",
+    "default_value": 256,
+    "max_length": null,
+    "numeric_precision": 32,
+    "numeric_scale": 0,
+    "is_nullable": true,
+    "is_unique": false,
+    "is_indexed": false,
+    "is_primary_key": false,
+    "is_generated": false,
+    "generation_expression": null,
+    "has_auto_increment": false,
+    "foreign_key_table": null,
+    "foreign_key_column": null
+  }
+}

backend/directus-config/development/snapshot/fields/maps/tiles_type.json

@@ -0,0 +1,54 @@
+{
+  "collection": "maps",
+  "field": "tiles_type",
+  "type": "string",
+  "meta": {
+    "collection": "maps",
+    "conditions": null,
+    "display": null,
+    "display_options": null,
+    "field": "tiles_type",
+    "group": "tile_server",
+    "hidden": false,
+    "interface": "select-dropdown",
+    "note": "Choose between raster tiles or vector tiles (MapLibre GL)",
+    "options": {
+      "choices": [
+        {
+          "text": "Raster Tiles",
+          "value": "raster"
+        },
+        {
+          "text": "Vector Tiles (MapLibre GL)",
+          "value": "maplibre"
+        }
+      ]
+    },
+    "readonly": false,
+    "required": false,
+    "sort": 1,
+    "special": null,
+    "translations": null,
+    "validation": null,
+    "validation_message": null,
+    "width": "full"
+  },
+  "schema": {
+    "name": "tiles_type",
+    "table": "maps",
+    "data_type": "character varying",
+    "default_value": "raster",
+    "max_length": 255,
+    "numeric_precision": null,
+    "numeric_scale": null,
+    "is_nullable": true,
+    "is_unique": false,
+    "is_indexed": false,
+    "is_primary_key": false,
+    "is_generated": false,
+    "generation_expression": null,
+    "has_auto_increment": false,
+    "foreign_key_table": null,
+    "foreign_key_column": null
+  }
+}

backend/directus-config/development/snapshot/fields/maps/zoom_offset.json

@@ -0,0 +1,45 @@
+{
+  "collection": "maps",
+  "field": "zoom_offset",
+  "type": "integer",
+  "meta": {
+    "collection": "maps",
+    "conditions": null,
+    "display": null,
+    "display_options": null,
+    "field": "zoom_offset",
+    "group": "raster_tiles",
+    "hidden": false,
+    "interface": "input",
+    "note": null,
+    "options": {
+      "min": 0
+    },
+    "readonly": false,
+    "required": false,
+    "sort": 3,
+    "special": null,
+    "translations": null,
+    "validation": null,
+    "validation_message": null,
+    "width": "half"
+  },
+  "schema": {
+    "name": "zoom_offset",
+    "table": "maps",
+    "data_type": "integer",
+    "default_value": -1,
+    "max_length": null,
+    "numeric_precision": 32,
+    "numeric_scale": 0,
+    "is_nullable": true,
+    "is_unique": false,
+    "is_indexed": false,
+    "is_primary_key": false,
+    "is_generated": false,
+    "generation_expression": null,
+    "has_auto_increment": false,
+    "foreign_key_table": null,
+    "foreign_key_column": null
+  }
+}

lib/package.json

@@ -77,7 +77,7 @@
     "eslint-plugin-react-refresh": "^0.4.18",
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-yml": "^1.14.0",
-    "happy-dom": "^16.8.1",
+    "happy-dom": "^20.0.0",
     "postcss": "^8.4.21",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
@@ -102,6 +102,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.17",
+    "@maplibre/maplibre-gl-leaflet": "^0.1.3",
     "@tanstack/react-query": "^5.17.8",
     "@tiptap/core": "^3.6.5",
     "@tiptap/extension-bubble-menu": "^3.6.5",
@@ -119,6 +120,7 @@
     "date-fns": "^3.3.1",
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
+    "maplibre-gl": "^5.9.0",
     "radash": "^12.1.0",
     "react-colorful": "^5.6.1",
     "react-dropzone": "^14.3.8",

lib/src/Components/Map/Subcomponents/MapLibreLayer.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable import/no-unassigned-import */
+import L from 'leaflet'
+import { useEffect } from 'react'
+import { useMap } from 'react-leaflet'
+
+import '@maplibre/maplibre-gl-leaflet'
+import 'maplibre-gl/dist/maplibre-gl.css'
+
+declare module 'leaflet' {
+  interface MapLibreGLOptions {
+    style: string
+    attribution?: string
+  }
+
+  interface MapLibreGLLayer extends Layer {
+    addTo(map: Map): this
+  }
+
+  function maplibreGL(options: MapLibreGLOptions): MapLibreGLLayer
+}
+
+/**
+ * MapLibreLayer component for rendering vector tiles with MapLibre GL
+ * Integrates MapLibre GL with Leaflet using the maplibre-gl-leaflet bridge
+ *
+ * @param styleUrl - URL to the MapLibre style JSON (default: OpenFreeMap Liberty style)
+ * @param attribution - Attribution text for the map tiles
+ */
+export function MapLibreLayer({
+  styleUrl = 'https://tiles.openfreemap.org/styles/liberty',
+  attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+}: {
+  styleUrl?: string
+  attribution?: string
+}) {
+  const map = useMap()
+
+  useEffect(() => {
+    const mapLibreLayer = L.maplibreGL({
+      style: styleUrl,
+      attribution,
+    })
+
+    mapLibreLayer.addTo(map)
+
+    // Cleanup function to remove layer when component unmounts
+    return () => {
+      map.removeLayer(mapLibreLayer)
+    }
+  }, [map, styleUrl, attribution])
+
+  return null
+}

lib/src/Components/Map/UtopiaMap.tsx

@@ -59,6 +59,10 @@ function UtopiaMap({
   expandLayerControl,
   tileServerUrl,
   tileServerAttribution,
+  tilesType = 'raster',
+  maplibreStyle,
+  zoomOffset,
+  tileSize,
 }: {
   /** height of the map (default '500px') */
   height?: string
@@ -94,6 +98,14 @@ function UtopiaMap({
   tileServerUrl?: string
   /** configure a custom tile server attribution */
   tileServerAttribution?: string
+  /** tiles type: 'raster' or 'maplibre' (default 'raster') */
+  tilesType?: 'raster' | 'maplibre'
+  /** MapLibre style URL for vector tiles (default: OpenFreeMap Liberty) */
+  maplibreStyle?: string
+  /** zoom offset which is needed for some raster tile provider (eg. Mapbox) */
+  zoomOffset?: number
+  /** tile size (default 256) */
+  tileSize?: number
 }) {
   return (
     <ContextWrapper>
@@ -116,6 +128,10 @@ function UtopiaMap({
           expandLayerControl={expandLayerControl}
           tileServerUrl={tileServerUrl}
           tileServerAttribution={tileServerAttribution}
+          tilesType={tilesType}
+          maplibreStyle={maplibreStyle}
+          zoomOffset={zoomOffset}
+          tileSize={tileSize}
         >
           {children}
         </UtopiaMapInner>

lib/src/Components/Map/UtopiaMapInner.tsx

@@ -42,6 +42,7 @@ import { LayerControl } from './Subcomponents/Controls/LayerControl'
 import { SearchControl } from './Subcomponents/Controls/SearchControl'
 import { TagsControl } from './Subcomponents/Controls/TagsControl'
 import { TextView } from './Subcomponents/ItemPopupComponents/TextView'
+import { MapLibreLayer } from './Subcomponents/MapLibreLayer'
 import { SelectPosition } from './Subcomponents/SelectPosition'
 
 import type { Feature, Geometry as GeoJSONGeometry, GeoJsonObject } from 'geojson'
@@ -59,6 +60,10 @@ export function UtopiaMapInner({
   expandLayerControl,
   tileServerUrl,
   tileServerAttribution,
+  tilesType,
+  maplibreStyle,
+  zoomOffset = 0,
+  tileSize = 256,
 }: {
   children?: React.ReactNode
   geo?: GeoJsonObject
@@ -72,6 +77,10 @@ export function UtopiaMapInner({
   expandLayerControl?: boolean
   tileServerUrl?: string
   tileServerAttribution?: string
+  tilesType?: 'raster' | 'maplibre'
+  maplibreStyle?: string
+  zoomOffset?: number
+  tileSize?: number
 }) {
   const selectNewItemPosition = useSelectPosition()
   const setSelectNewItemPosition = useSetSelectPosition()
@@ -284,14 +293,20 @@ export function UtopiaMapInner({
         {showLayerControl && <LayerControl expandLayerControl={expandLayerControl ?? false} />}
         {showGratitudeControl && <GratitudeControl />}
       </Control>
+      {tilesType === 'raster' ? (
         <TileLayer
           maxZoom={19}
+          tileSize={tileSize}
+          zoomOffset={zoomOffset}
           attribution={
             tileServerAttribution ??
             '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
           }
           url={tileServerUrl ?? 'https://tile.osmand.net/hd/{z}/{x}/{y}.png'}
         />
+      ) : (
+        <MapLibreLayer styleUrl={maplibreStyle} attribution={tileServerAttribution} />
+      )}
       <MarkerClusterGroup
         ref={(r) => setClusterRef(r as any)}
         showCoverageOnHover

package-lock.json

@@ -67,6 +67,7 @@
       "license": "GPL-3.0-only",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
+        "@maplibre/maplibre-gl-leaflet": "^0.1.3",
         "@tanstack/react-query": "^5.17.8",
         "@tiptap/core": "^3.6.5",
         "@tiptap/extension-bubble-menu": "^3.6.5",
@@ -84,6 +85,7 @@
         "date-fns": "^3.3.1",
         "leaflet": "^1.9.4",
         "leaflet.locatecontrol": "^0.79.0",
+        "maplibre-gl": "^5.9.0",
         "radash": "^12.1.0",
         "react-colorful": "^5.6.1",
         "react-dropzone": "^14.3.8",
@@ -135,7 +137,7 @@
         "eslint-plugin-react-refresh": "^0.4.18",
         "eslint-plugin-security": "^3.0.1",
         "eslint-plugin-yml": "^1.14.0",
-        "happy-dom": "^16.8.1",
+        "happy-dom": "^20.0.0",
         "postcss": "^8.4.21",
         "prettier": "^3.3.3",
         "react": "^18.3.1",
@@ -2670,6 +2672,123 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mapbox/geojson-rewind": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+      "license": "ISC",
+      "dependencies": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "geojson-rewind": "geojson-rewind"
+      }
+    },
+    "node_modules/@mapbox/geojson-rewind/node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
+      "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
+      "license": "ISC"
+    },
+    "node_modules/@mapbox/tiny-sdf": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.7.tgz",
+      "integrity": "sha512-25gQLQMcpivjOSA40g3gO6qgiFPDpWRoMfd+G/GoppPIeP6JDaMMkMrEJnMZhKyyS6iKwVt5YKu02vCUyJM3Ug==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@mapbox/vector-tile": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-2.0.4.tgz",
+      "integrity": "sha512-AkOLcbgGTdXScosBWwmmD7cDlvOjkg/DetGva26pIRiZPdeJYjYKarIlb4uxVzi6bwHO6EWH82eZ5Nuv4T5DUg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@mapbox/point-geometry": "~1.1.0",
+        "@types/geojson": "^7946.0.16",
+        "pbf": "^4.0.1"
+      }
+    },
+    "node_modules/@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@maplibre/maplibre-gl-leaflet": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-leaflet/-/maplibre-gl-leaflet-0.1.3.tgz",
+      "integrity": "sha512-9+hp1PSJcxuuj5/Zta9zbQ8+ZvN4doWXPtlY7ikNtUZY1VbkamY0uTqzHp9kxRPqpgeKGrI7MjzXvwzU88wWCw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "@types/leaflet": "^1.9.0",
+        "leaflet": "^1.9.3",
+        "maplibre-gl": "^2.4.0 || ^3.3.1 || ^4.3.2 || ^5.0.0"
+      }
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec": {
+      "version": "24.2.0",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-24.2.0.tgz",
+      "integrity": "sha512-cE80g83fRcBbZbQC70siOUxUK6YJ/5ZkClDZbmm+hzrUbv+J6yntkMmcpdz9DbOrWOM7FHKR5rruc6Q/hWx5cA==",
+      "license": "ISC",
+      "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": "^3.0.0",
+        "rw": "^1.3.3",
+        "tinyqueue": "^3.0.0"
+      },
+      "bin": {
+        "gl-style-format": "dist/gl-style-format.mjs",
+        "gl-style-migrate": "dist/gl-style-migrate.mjs",
+        "gl-style-validate": "dist/gl-style-validate.mjs"
+      }
+    },
+    "node_modules/@maplibre/vt-pbf": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@maplibre/vt-pbf/-/vt-pbf-4.0.3.tgz",
+      "integrity": "sha512-YsW99BwnT+ukJRkseBcLuZHfITB4puJoxnqPVjo72rhW/TaawVYsgQHcqWLzTxqknttYoDpgyERzWSa/XrETdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@mapbox/point-geometry": "^1.1.0",
+        "@mapbox/vector-tile": "^2.0.4",
+        "@types/geojson-vt": "3.2.5",
+        "@types/supercluster": "^7.1.3",
+        "geojson-vt": "^4.0.2",
+        "pbf": "^4.0.1",
+        "supercluster": "^8.0.1"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -4497,6 +4616,15 @@
       "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
       "license": "MIT"
     },
+    "node_modules/@types/geojson-vt": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/@types/geojson-vt/-/geojson-vt-3.2.5.tgz",
+      "integrity": "sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -4524,7 +4652,6 @@
       "version": "1.9.20",
       "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.20.tgz",
       "integrity": "sha512-rooalPMlk61LCaLOvBF2VIf9M47HgMQqi5xQ9QRi7c8PkdIe0WrIi5IxXUXQjAdL0c+vcQ01mYWbthzmp9GHWw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/geojson": "*"
@@ -4640,6 +4767,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/supercluster": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
+      "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -4659,6 +4795,13 @@
       "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
       "license": "MIT"
     },
+    "node_modules/@types/whatwg-mimetype": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
+      "integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -7225,6 +7368,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/earcut": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.2.tgz",
+      "integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==",
+      "license": "ISC"
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -8797,6 +8946,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geojson-vt": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz",
+      "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==",
+      "license": "ISC"
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -8908,6 +9063,12 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "node_modules/gl-matrix": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz",
+      "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
+      "license": "MIT"
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -9045,17 +9206,28 @@
       "license": "MIT"
     },
     "node_modules/happy-dom": {
-      "version": "16.8.1",
+      "version": "20.0.0",
-      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-16.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.0.0.tgz",
-      "integrity": "sha512-n0QrmT9lD81rbpKsyhnlz3DgnMZlaOkJPpgi746doA+HvaMC79bdWkwjrNnGJRvDrWTI8iOcJiVTJ5CdT/AZRw==",
+      "integrity": "sha512-GkWnwIFxVGCf2raNrxImLo397RdGhLapj5cT3R2PT7FwL62Ze1DROhzmYW7+J3p9105DYMVenEejEbnq5wA37w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "webidl-conversions": "^7.0.0",
+        "@types/node": "^20.0.0",
+        "@types/whatwg-mimetype": "^3.0.2",
         "whatwg-mimetype": "^3.0.0"
       },
       "engines": {
-        "node": ">=18.0.0"
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/happy-dom/node_modules/@types/node": {
+      "version": "20.19.20",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.20.tgz",
+      "integrity": "sha512-2Q7WS25j4pS1cS8yw3d6buNCVJukOTeQ39bAnwR6sOJbaxvyCGebzTMypDFN82CxBLnl+lSWVdCCWbRY6y9yZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
       }
     },
     "node_modules/has-bigints": {
@@ -10250,6 +10422,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz",
+      "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==",
+      "license": "MIT"
+    },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -10332,6 +10510,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==",
+      "license": "ISC"
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -10940,6 +11124,43 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/maplibre-gl": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.9.0.tgz",
+      "integrity": "sha512-YxW9glb/YrDXGDhqy1u+aG113+L86ttAUpTd6sCkGHyUKMXOX8qbGHJQVqxOczy+4CtRKnqcCfSura2MzB0nQA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@mapbox/geojson-rewind": "^0.5.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/point-geometry": "^1.1.0",
+        "@mapbox/tiny-sdf": "^2.0.7",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^2.0.4",
+        "@mapbox/whoots-js": "^3.1.0",
+        "@maplibre/maplibre-gl-style-spec": "^24.2.0",
+        "@maplibre/vt-pbf": "^4.0.3",
+        "@types/geojson": "^7946.0.16",
+        "@types/geojson-vt": "3.2.5",
+        "@types/supercluster": "^7.1.3",
+        "earcut": "^3.0.2",
+        "geojson-vt": "^4.0.2",
+        "gl-matrix": "^3.4.4",
+        "kdbush": "^4.0.2",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^4.0.1",
+        "potpack": "^2.1.0",
+        "quickselect": "^3.0.0",
+        "supercluster": "^8.0.1",
+        "tinyqueue": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.14.0",
+        "npm": ">=8.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
+      }
+    },
     "node_modules/markdown-it": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
@@ -11724,7 +11945,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -11757,6 +11977,12 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -12299,6 +12525,18 @@
         "node": ">= 14.16"
       }
     },
+    "node_modules/pbf": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
+      "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -12983,6 +13221,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/potpack": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.1.0.tgz",
+      "integrity": "sha512-pcaShQc1Shq0y+E7GqJqvZj8DTthWV1KeHGdi0Z6IAin2Oi3JnLCOfwnCo84qc+HAp52wT9nK9H7FAJp5a44GQ==",
+      "license": "ISC"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -13307,6 +13551,12 @@
         "prosemirror-transform": "^1.1.0"
       }
     },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -13386,6 +13636,12 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quickselect": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
+      "license": "ISC"
+    },
     "node_modules/radash": {
       "version": "12.1.1",
       "resolved": "https://registry.npmjs.org/radash/-/radash-12.1.1.tgz",
@@ -13926,6 +14182,15 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "node_modules/restore-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -14155,6 +14420,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/rxjs": {
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@@ -14929,6 +15200,15 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "license": "ISC",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
     "node_modules/supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -15251,6 +15531,12 @@
         "node": "^18.0.0 || >=20.0.0"
       }
     },
+    "node_modules/tinyqueue": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+      "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
+      "license": "ISC"
+    },
     "node_modules/tinyrainbow": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
@@ -16354,16 +16640,6 @@
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
       "license": "MIT"
     },
-    "node_modules/webidl-conversions": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/whatwg-mimetype": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",