Lazy load Maplibre GL JS and add hillshading layer

css/style.css

@@ -92,6 +92,11 @@ table.dataTable {
     z-index: 999;
 }
 
+/* Ensure z-index layer order works for Maplibre overlays, otherwise gets below base map after switch */
+.leaflet-gl-layer {
+    position: absolute;
+}
+
 .navbar {
     /* align with leaflet-control */
     padding: 0.5rem 10px;

gulpfile.js

@@ -40,9 +40,13 @@ var paths = {
     scriptsConfig: mainNpmFiles()
         .filter(
             (f) =>
+                // index.html
                 RegExp('url-search-params/.*\\.js', 'i').test(f) ||
                 RegExp('core-js-bundle/.*\\.js', 'i').test(f) ||
-                RegExp('regenerator-runtime/.*\\.js', 'i').test(f)
+                RegExp('regenerator-runtime/.*\\.js', 'i').test(f) ||
+                // dynamic import in MaplibreGlLazyLoader
+                RegExp('maplibre-gl/.*\\.js', 'i').test(f) ||
+                RegExp('@maplibre/maplibre-gl-leaflet/.*\\.js', 'i').test(f)
         )
         .concat([
             // large lib as extra file for faster parallel loading (*.min.js already excluded from bundle)
@@ -60,7 +64,9 @@ var paths = {
                     !RegExp('.*\\.min\\.js', 'i').test(f) &&
                     !RegExp('url-search-params/.*\\.js', 'i').test(f) &&
                     !RegExp('core-js-bundle/.*\\.js', 'i').test(f) &&
-                    !RegExp('regenerator-runtime/.*\\.js', 'i').test(f)
+                    !RegExp('regenerator-runtime/.*\\.js', 'i').test(f) &&
+                    !RegExp('maplibre-gl/.*\\.js', 'i').test(f) &&
+                    !RegExp('@maplibre/maplibre-gl-leaflet/.*\\.js', 'i').test(f)
             )
         )
         .concat([
@@ -83,7 +89,7 @@ var paths = {
     fonts: mainNpmFiles().filter((f) => RegExp('font-awesome/fonts/.*', 'i').test(f)),
     changelog: 'CHANGELOG.md',
     locales: 'locales/*.json',
-    layers: 'layers/**/*.geojson',
+    layers: ['layers/**/*.geojson', 'layers/**/*.json'],
     layersDestName: 'layers.js',
     layersConfig: [
         'layers/config/config.js',
@@ -219,10 +225,7 @@ gulp.task('watch', function () {
 // Print paths to console, for manually debugging the gulp build
 // (comment out corresponding line of paths to print)
 gulp.task('log', function () {
-    // var src = paths.scripts
+    // var src = paths.scriptsConfig;
-    // var src = paths.styles
-    // var src = paths.images
-    // var src = paths.locales
     var src = paths.scripts.concat(paths.styles).concat(paths.images).concat(paths.locales);
 
     return gulp.src(src).pipe(gulpDebug());

js/LayersConfig.js

@@ -240,6 +240,21 @@ BR.LayersConfig = L.Class.extend({
         return new leafletOsmNotes();
     },
 
+    createMvtLayer: function (props) {
+        const options = {};
+
+        if (props.url in BR.layerIndex) {
+            // url is key to style in local layers bundle (file name without '.json'),
+            // suggested file naming convention: `<layer id>-style.json`
+            options.style = BR.layerIndex[props.url];
+        } else {
+            // external URL to style.json
+            options.style = props.url;
+        }
+
+        return BR.maplibreGlLazyLoader(options);
+    },
+
     createLayer: function (layerData) {
         var props = layerData.properties;
         var url = props.url;
@@ -326,6 +341,8 @@ BR.LayersConfig = L.Class.extend({
             layer = this.createOverpassLayer(props.query, props.icon);
         } else if (props.dataSource === 'OpenStreetMapNotesAPI') {
             layer = this.createOpenStreetMapNotesLayer();
+        } else if (props.type === 'mvt') {
+            layer = this.createMvtLayer(props);
         } else {
             // JOSM
             var josmUrl = url;

js/control/LayersTab.js

@@ -46,13 +46,14 @@ BR.LayersTab = BR.ControlLayers.extend({
             title: i18next.t('layers.opacity-slider'),
             callback: function (opacity) {
                 for (var i = 0; i < self._layers.length; i++) {
-                    if (!self._layers[i].overlay || !map.hasLayer(self._layers[i].layer)) {
+                    const layer = self._layers[i].layer;
+                    if (!self._layers[i].overlay || !map.hasLayer(layer)) {
                         continue;
                     }
-                    if (self._layers[i].layer.setOpacity) {
+                    if (layer.setOpacity) {
-                        self._layers[i].layer.setOpacity(opacity);
+                        layer.setOpacity(opacity);
-                    } else {
+                    } else if (layer.setStyle) {
-                        self._layers[i].layer.setStyle({ opacity: opacity });
+                        layer.setStyle({ opacity: opacity });
                     }
                 }
             },

js/util/MaplibreGlLazyLoader.js

@@ -0,0 +1,64 @@
+/**
+ * Only load Maplibre bundles when layer is actually added, using dynamic imports
+ */
+BR.MaplibreGlLazyLoader = L.Layer.extend({
+    initialize: function (options) {
+        this.options = options;
+    },
+
+    onAdd: function (map) {
+        if (!('maplibreGL' in L)) {
+            this._load();
+        } else {
+            this._addGlLayer();
+        }
+        return this;
+    },
+
+    onRemove: function (map) {
+        this._map.removeLayer(this.glLayer);
+        this.glLayer = null;
+        return this;
+    },
+
+    // needed when overlay, also requires `position: absolute` (see css)
+    setZIndex: function (zIndex) {
+        this.options.zIndex = zIndex;
+        return this;
+    },
+
+    setOpacity: function (opacity) {
+        if (this.glLayer) {
+            const glMap = this.glLayer.getMaplibreMap();
+            if (glMap.getLayer('hillshading')) {
+                glMap.setPaintProperty('hillshading', 'hillshade-exaggeration', opacity);
+            } else {
+                glMap.getCanvas().style.opacity = opacity;
+            }
+        }
+    },
+
+    _load: async function () {
+        await import('./maplibre-gl.js');
+        await import('./leaflet-maplibre-gl.js');
+
+        this._addGlLayer();
+    },
+
+    _addGlLayer: function () {
+        this.glLayer = L.maplibreGL(this.options);
+        this._map.addLayer(this.glLayer);
+
+        this._updateZIndex();
+    },
+
+    _updateZIndex: function () {
+        if (this.glLayer && this.glLayer.getContainer() && this.options.zIndex != null) {
+            this.glLayer.getContainer().style.zIndex = this.options.zIndex;
+        }
+    },
+});
+
+BR.maplibreGlLazyLoader = function (options) {
+    return new BR.MaplibreGlLazyLoader(options);
+};

layers/config/config.js

@@ -15,7 +15,7 @@ BR.confLayers.languageDefaultLayers = [
 ];
 
 BR.confLayers.defaultOverlays =  [
-    'HikeBike.HillShading',
+    'terrarium-hillshading',
     'Waymarked_Trails-Cycling',
     'Waymarked_Trails-Hiking'
 ];

layers/config/tree.js

@@ -68,7 +68,7 @@ BR.confLayers.tree = {
     },
     'overlays': {
         'worldwide': [
-            'HikeBike.HillShading',
+            'terrarium-hillshading',
             'Waymarked_Trails-Cycling',
             'Waymarked_Trails-Hiking',
             'Waymarked_Trails-MTB',

layers/mvt/terrarium-hillshading-style.json

@@ -0,0 +1,21 @@
+{
+    "version": 8,
+    "sources": {
+        "dem": {
+            "type": "raster-dem",
+            "tiles": [
+                "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"
+            ],
+            "encoding": "terrarium",
+            "tileSize": 256,
+            "maxzoom": 15
+        }
+    },
+    "layers": [
+        {
+            "id": "hillshading",
+            "source": "dem",
+            "type": "hillshade"
+        }
+    ]
+}

layers/mvt/terrarium-hillshading.geojson

@@ -0,0 +1,15 @@
+{
+    "geometry": null,
+    "properties": {
+        "attribution": {
+            "text": "Terrain Tiles from AWS",
+            "url": "https://registry.opendata.aws/terrain-tiles/"
+        },
+        "id": "terrarium-hillshading",
+        "name": "Hillshading",
+        "overlay": true,
+        "type": "mvt",
+        "url": "terrarium-hillshading-style"
+    },
+    "type": "Feature"
+}

package.json

@@ -41,6 +41,7 @@
         "@mapbox/maki": "^7.0.0",
         "@mapbox/polyline": "^1.0.0",
         "@mapbox/togeojson": "^0.16.0",
+        "@maplibre/maplibre-gl-leaflet": "^0.0.17",
         "@turf/turf": "^6.2.0",
         "Leaflet.vector-markers": "nrenner/Leaflet.vector-markers#2ef80c9",
         "async": "~2.6.0",
@@ -77,6 +78,7 @@
         "leaflet.snogylop": "^0.4.0",
         "leaflet.stravasegments": "2.3.2",
         "mapbbcode": "MapBBCode/mapbbcode#v1.2.0",
+        "maplibre-gl": "^2.1.9",
         "osmtogeojson": "^3.0.0-beta.4",
         "overpass-layer": "^3.1.0",
         "regenerator-runtime": "^0.13.7",
@@ -371,6 +373,13 @@
                 "svgs/solid/phone-flip.svg",
                 "svgs/solid/beer.svg"
             ]
+        },
+        "maplibre-gl": {
+            "main": [
+                "dist/maplibre-gl.js",
+                "dist/maplibre-gl.js.map",
+                "dist/maplibre-gl.css"
+            ]
         }
     }
 }

yarn.lock

@@ -1566,16 +1566,44 @@
     minimist "1.2.0"
     sharkdown "^0.1.0"
 
+"@mapbox/geojson-rewind@^0.5.1":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz#591a5d71a9cd1da1a0bf3420b3bea31b0fc7946a"
+  integrity sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==
+  dependencies:
+    get-stream "^6.0.1"
+    minimist "^1.2.6"
+
+"@mapbox/jsonlint-lines-primitives@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234"
+  integrity sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==
+
 "@mapbox/maki@^7.0.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@mapbox/maki/-/maki-7.1.0.tgz#bfc213c7b06bfe7fd0e5dfdddceaa93d2195b21d"
   integrity sha512-/jaBOsbafUDOiP9re7Wlbaftk6eNoUPk3zc5HCLnyn3SfU7XfhBBsRsEjmSowAAIu7SlcQCNyN6UDvkyTCD2uA==
 
+"@mapbox/mapbox-gl-supported@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz#c15367178d8bfe4765e6b47b542fe821ce259c7b"
+  integrity sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==
+
+"@mapbox/point-geometry@0.1.0", "@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz#8a83f9335c7860effa2eeeca254332aa0aeed8f2"
+  integrity sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==
+
 "@mapbox/polyline@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@mapbox/polyline/-/polyline-1.0.0.tgz#b6f1c3cf61f8dddcf9ac6dce0b2e50e5f4e965bc"
   integrity sha512-5Vu99e/+kVF0h0eiWa3er3bYnjorq6SGTn06HqeinFAETlQpcHGj7+DanmFlNyXkgvRcKi0nQytuMm6QA2CkAQ==
 
+"@mapbox/tiny-sdf@^2.0.4":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz#cdba698d3d65087643130f9af43a2b622ce0b372"
+  integrity sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw==
+
 "@mapbox/togeojson@^0.16.0":
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/@mapbox/togeojson/-/togeojson-0.16.0.tgz#5b283001078431821dc74e287acaf56a11ceb37c"
@@ -1585,6 +1613,28 @@
     minimist "1.2.0"
     xmldom "~0.1.19"
 
+"@mapbox/unitbezier@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz#d32deb66c7177e9e9dfc3bbd697083e2e657ff01"
+  integrity sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==
+
+"@mapbox/vector-tile@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz#d3a74c90402d06e89ec66de49ec817ff53409666"
+  integrity sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==
+  dependencies:
+    "@mapbox/point-geometry" "~0.1.0"
+
+"@mapbox/whoots-js@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
+  integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
+
+"@maplibre/maplibre-gl-leaflet@^0.0.17":
+  version "0.0.17"
+  resolved "https://registry.yarnpkg.com/@maplibre/maplibre-gl-leaflet/-/maplibre-gl-leaflet-0.0.17.tgz#1557f413efc53b43f3a9eac3960516d2a7ee714a"
+  integrity sha512-KEsGwX+PfpS2bPaZGf1jG6Awolg/Z4h/UuAM9qAll/2lZ4U+OdjC6x38sWj2bSW5PtHIWBmgPSIc2fFLooa3dA==
+
 "@mdn/browser-compat-data@^3.3.14":
   version "3.3.14"
   resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-3.3.14.tgz#b72a37c654e598f9ae6f8335faaee182bebc6b28"
@@ -3188,6 +3238,11 @@
   resolved "https://registry.yarnpkg.com/@types/expect/-/expect-1.20.4.tgz#8288e51737bf7e3ab5d7c77bfa695883745264e5"
   integrity sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==
 
+"@types/geojson@*", "@types/geojson@^7946.0.8":
+  version "7946.0.8"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca"
+  integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==
+
 "@types/geojson@^1.0.2":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-1.0.6.tgz#3e02972728c69248c2af08d60a48cbb8680fffdf"
@@ -3219,6 +3274,20 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
+"@types/mapbox__point-geometry@*", "@types/mapbox__point-geometry@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.2.tgz#488a9b76e8457d6792ea2504cdd4ecdd9860a27e"
+  integrity sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA==
+
+"@types/mapbox__vector-tile@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.0.tgz#8fa1379dbaead1e1b639b8d96cfd174404c379d6"
+  integrity sha512-kDwVreQO5V4c8yAxzZVQLE5tyWF+IPToAanloQaSnwfXmIcJ7cyOrv8z4Ft4y7PsLYmhWXmON8MBV8RX0Rgr8g==
+  dependencies:
+    "@types/geojson" "*"
+    "@types/mapbox__point-geometry" "*"
+    "@types/pbf" "*"
+
 "@types/minimatch@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -3249,6 +3318,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/pbf@*", "@types/pbf@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/pbf/-/pbf-3.0.2.tgz#8d291ad68b4b8c533e96c174a2e3e6399a59ed61"
+  integrity sha512-EDrLIPaPXOZqDjrkzxxbX7UlJSeQVgah3i0aA4pOSzmK9zq3BIh7/MZIQxED7slJByvKM4Gc6Hypyu2lJzh3SQ==
+
 "@types/prettier@^2.0.0":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.2.1.tgz#374e31645d58cb18a07b3ecd8e9dede4deb2cccd"
@@ -4880,6 +4954,11 @@ css@^3.0.0:
     source-map "^0.6.1"
     source-map-resolve "^0.6.0"
 
+csscolorparser@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/csscolorparser/-/csscolorparser-1.0.3.tgz#b34f391eea4da8f3e98231e2ccd8df9c041f171b"
+  integrity sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==
+
 cssom@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
@@ -5284,6 +5363,11 @@ earcut@^2.0.0:
   resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.1.5.tgz#829280a9a3a0f5fee0529f0a47c3e4eff09b21e4"
   integrity sha512-QFWC7ywTVLtvRAJTVp8ugsuuGQ5mVqNmJ1cRYeLrSHgP3nycr2RHTJob9OtM0v8ujuoKN0NY1a93J/omeTL1PA==
 
+earcut@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.3.tgz#d44ced2ff5a18859568e327dd9c7d46b16f55cf4"
+  integrity sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug==
+
 easy-extender@^2.3.4:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/easy-extender/-/easy-extender-2.3.4.tgz#298789b64f9aaba62169c77a2b3b64b4c9589b8f"
@@ -6234,6 +6318,11 @@ geojson-rbush@3.x:
     "@turf/meta" "6.x"
     rbush "^2.0.0"
 
+geojson-vt@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.2.1.tgz#f8adb614d2c1d3f6ee7c4265cad4bbf3ad60c8b7"
+  integrity sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==
+
 get-caller-file@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
@@ -6287,6 +6376,11 @@ get-stream@^5.0.0, get-stream@^5.2.0:
   dependencies:
     pump "^3.0.0"
 
+get-stream@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -6324,6 +6418,11 @@ github-url-to-object@^1.4.2:
   dependencies:
     is-url "^1.1.0"
 
+gl-matrix@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.4.3.tgz#fc1191e8320009fd4d20e9339595c6041ddc22c9"
+  integrity sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -8182,6 +8281,11 @@ jxon@nrenner/jxon#dd3b9fa:
   dependencies:
     xmldom "^0.1.21"
 
+kdbush@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0"
+  integrity sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==
+
 kind-of@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"
@@ -8721,6 +8825,35 @@ mapbbcode@MapBBCode/mapbbcode#v1.2.0:
   version "1.2.0"
   resolved "https://codeload.github.com/MapBBCode/mapbbcode/tar.gz/8407568e560008bb191ed5754ae83449cea574c2"
 
+maplibre-gl@^2.1.9:
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-2.1.9.tgz#042f3ef4224fa890ecf7a410145243f1fc943dcd"
+  integrity sha512-pnWJmILeZpgA5QSI7K7xFK3yrkyYTd9srw3fCi2Ca52Phm78hsznPwUErEQcZLfxXKn/1h9t8IPdj0TH0NBNbg==
+  dependencies:
+    "@mapbox/geojson-rewind" "^0.5.1"
+    "@mapbox/jsonlint-lines-primitives" "^2.0.2"
+    "@mapbox/mapbox-gl-supported" "^2.0.1"
+    "@mapbox/point-geometry" "^0.1.0"
+    "@mapbox/tiny-sdf" "^2.0.4"
+    "@mapbox/unitbezier" "^0.0.1"
+    "@mapbox/vector-tile" "^1.3.1"
+    "@mapbox/whoots-js" "^3.1.0"
+    "@types/geojson" "^7946.0.8"
+    "@types/mapbox__point-geometry" "^0.1.2"
+    "@types/mapbox__vector-tile" "^1.3.0"
+    "@types/pbf" "^3.0.2"
+    csscolorparser "~1.0.3"
+    earcut "^2.2.3"
+    geojson-vt "^3.2.1"
+    gl-matrix "^3.4.3"
+    murmurhash-js "^1.0.0"
+    pbf "^3.2.1"
+    potpack "^1.0.2"
+    quickselect "^2.0.0"
+    supercluster "^7.1.4"
+    tinyqueue "^2.0.3"
+    vt-pbf "^3.1.3"
+
 marked@4.0.16:
   version "4.0.16"
   resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.16.tgz#9ec18fc1a723032eb28666100344d9428cf7a264"
@@ -8897,6 +9030,11 @@ minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+minimist@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+
 minipass@^2.6.0, minipass@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
@@ -8977,6 +9115,11 @@ multipipe@^0.1.2:
   dependencies:
     duplexer2 "0.0.2"
 
+murmurhash-js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/murmurhash-js/-/murmurhash-js-1.0.0.tgz#b06278e21fc6c37fa5313732b0412bcb6ae15f51"
+  integrity sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==
+
 mute-stdout@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mute-stdout/-/mute-stdout-1.0.1.tgz#acb0300eb4de23a7ddeec014e3e96044b3472331"
@@ -9689,7 +9832,7 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pbf@^3.0.4:
+pbf@^3.0.4, pbf@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.2.1.tgz#b4c1b9e72af966cd82c6531691115cc0409ffe2a"
   integrity sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==
@@ -9899,6 +10042,11 @@ postcss@^7.0.16:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+potpack@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/potpack/-/potpack-1.0.2.tgz#23b99e64eb74f5741ffe7656b5b5c4ddce8dfc14"
+  integrity sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -11527,6 +11675,13 @@ strxml@0.0.0:
   dependencies:
     tap "~0.4.8"
 
+supercluster@^7.1.4:
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-7.1.5.tgz#65a6ce4a037a972767740614c19051b64b8be5a3"
+  integrity sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==
+  dependencies:
+    kdbush "^3.0.0"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -12362,6 +12517,15 @@ vinyl@^2.0.0, vinyl@^2.0.1, vinyl@^2.1.0, vinyl@^2.2.0:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
+vt-pbf@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/vt-pbf/-/vt-pbf-3.1.3.tgz#68fd150756465e2edae1cc5c048e063916dcfaac"
+  integrity sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==
+  dependencies:
+    "@mapbox/point-geometry" "0.1.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    pbf "^3.2.1"
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"