Add some versatiles vector layers

TODO: these could probably be faster with MapLibre GL JS

TODO: self-host

layers/index.js

@@ -25,6 +25,7 @@ import mnAmbulanceServiceAreas from './mn-ambulance-service-areas/layer.js';
 import upsServiceAreas from './ups/index.js';
 import fccTowersLayer from './fcc/towers/layer.js';
 import mnSalesTaxLayers from './mn-sales-tax/index.js';
+import versatilesLayers from './versatiles.js';
 
 const layerCategories = [
     { // Base maps
@@ -64,6 +65,7 @@ const layerCategories = [
                     }),
                 }),
             },
+            ...versatilesLayers,
         ],
     },
     { // Misc

layers/versatiles.js

@@ -0,0 +1,26 @@
+import {applyStyle} from 'ol-mapbox-style';
+import TileLayer from 'ol/layer/Tile';
+import VectorTileLayer from 'ol/layer/VectorTile.js';
+import {XYZ} from 'ol/source.js';
+
+const versatiles = [];
+
+for (let style_name of ["colorful", "eclipse", "graybeard", "shadow", "neutrino"]) {
+    const layer = new VectorTileLayer({declutter: true});
+    applyStyle(layer, `https://tiles.versatiles.org/assets/styles/${style_name}/style.json`);
+    versatiles.push({
+        name: `Versatiles ${style_name} (vector)`,
+        layer: layer,
+    });
+}
+
+versatiles.push({
+    name: "Versatiles Satellite",
+    layer: new TileLayer({
+        source: new XYZ({
+            url: "https://tiles.versatiles.org/tiles/satellite/{z}/{x}/{y}.jpg",
+        }),
+    }),
+});
+
+export default versatiles;

package-lock.json

@@ -11,6 +11,7 @@
         "hls.js": "^1.5.2",
         "ol": "latest",
         "ol-contextmenu": "^5.3.0",
+        "ol-mapbox-style": "^13.3.0",
         "proj4": "2.9.0",
         "qs": "^6.13.0"
       },
@@ -392,6 +393,40 @@
         "node": ">=12"
       }
     },
+    "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/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/@maplibre/maplibre-gl-style-spec": {
+      "version": "24.7.0",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-24.7.0.tgz",
+      "integrity": "sha512-Ed7rcKYU5iELfablg9Mj+TVCsXsPBgdMyXPRAxb2v7oWg9YJnpQdZ5msDs1LESu/mtXy3Z48Vdppv2t/x5kAhw==",
+      "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/@petamoriken/float16": {
       "version": "3.8.7",
       "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.7.tgz",
@@ -667,18 +702,39 @@
       "integrity": "sha512-wA66nnYFvQa1o4DO/BFgLNRKnBTVXpNeldGRBJ2Y0SvFtdwvFKCbqa9zhHoZLoxHhZ+jYsj3aIBkWQQCPNOhMw==",
       "license": "Apache-2.0"
     },
+    "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/lerc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
       "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==",
       "license": "Apache-2.0"
     },
+    "node_modules/mapbox-to-css-font": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-3.2.0.tgz",
+      "integrity": "sha512-kvsEfzvLik34BiFj+S19bv5d70l9qSdkUzrq99dvZ9d5POaLyB4vJMQmq3BoJ5D6lFG1GYnMM7o7cm5Jh8YEEg==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/mgrs": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
       "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==",
       "license": "MIT"
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -715,6 +771,7 @@
       "resolved": "https://registry.npmjs.org/ol/-/ol-10.2.1.tgz",
       "integrity": "sha512-2bB/y2vEnmzjqynP0NA7Cp8k86No3Psn63Dueicep3E3i09axWRVIG5IS/bylEAGfWQx0QXD/uljkyFoY60Wig==",
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@types/rbush": "3.0.3",
         "color-rgba": "^3.0.0",
@@ -745,6 +802,19 @@
         "ol": "> 7.x <= 10.x"
       }
     },
+    "node_modules/ol-mapbox-style": {
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-13.3.0.tgz",
+      "integrity": "sha512-DxrQFPBqYdoQUNZeOtvXrC+6cOVjnaW8+93dUN0kvHoIgMp5ykGthfFf9UH104NkbXpwLSjS1+u788XM7ByGYw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@maplibre/maplibre-gl-style-spec": "^24.4.1",
+        "mapbox-to-css-font": "^3.2.0"
+      },
+      "peerDependencies": {
+        "ol": "*"
+      }
+    },
     "node_modules/pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
@@ -889,6 +959,12 @@
         "fsevents": "~2.3.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/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -940,6 +1016,12 @@
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
       "license": "MIT"
     },
+    "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/vite": {
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz",

package.json

@@ -13,6 +13,7 @@
     "hls.js": "^1.5.2",
     "ol": "latest",
     "ol-contextmenu": "^5.3.0",
+    "ol-mapbox-style": "^13.3.0",
     "proj4": "2.9.0",
     "qs": "^6.13.0"
   }