Add some versatiles vector layers

TODO: these could probably be faster with MapLibre GL JS

TODO: self-host

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;