Add inital support for vector tiles

Author: jplitza

lib/config_default.ts

@@ -62,6 +62,7 @@ export interface Link {
 export interface MapLayer {
   name: string;
   url: string;
+  type?: string;
   config: GridLayerOptions & {
     start?: number; // Hour
     end?: number; // Hour

lib/map.ts

@@ -1,4 +1,5 @@
 import * as L from "leaflet";
+import "@maplibre/maplibre-gl-leaflet";
 
 import { ClientLayer } from "./map/clientlayer.js";
 import { LabelLayer } from "./map/labellayer.js";
@@ -83,13 +84,18 @@ export const Map = function (linkScale: (t: any) => any, sidebar: ReturnType<typ
   let layers = config.mapLayers.map(function (layer) {
     return {
       name: layer.name,
-      layer: L.tileLayer(
-        layer.url.replace(
-          "{format}",
-          document.createElement("canvas").toDataURL("image/webp").indexOf("data:image/webp") === 0 ? "webp" : "png",
-        ),
-        layer.config,
-      ),
+      layer:
+        layer.type == "vector"
+          ? L.maplibreGL({ style: layer.url })
+          : L.tileLayer(
+              layer.url.replace(
+                "{format}",
+                document.createElement("canvas").toDataURL("image/webp").indexOf("data:image/webp") === 0
+                  ? "webp"
+                  : "png",
+              ),
+              layer.config,
+            ),
     };
   });