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;