partially working

public/templates/data.tmpl

@@ -69,6 +69,10 @@
     };
     {{/is_terrain}}
     {{#is_terrain}}
+	let baseUrl = window.location.origin;
+	console.log(baseUrl);
+	baseUrl = baseUrl + "/data/{{id}}/contour/{z}/{x}/{y}"
+	console.log(baseUrl);
     var style = {
       version: 8,
       sources: {
@@ -81,35 +85,45 @@
           "type": "raster-dem",
           "url": "{{public_url}}data/{{id}}.json",
           "encoding": "{{terrain_encoding}}"
+        },
+        "contour": {
+          "type": "vector",
+		  "tiles":  [ baseUrl ],
         }
       },
       "terrain": {
         "source": "terrain"
       },
-      layers: [
-        {
-          "id": "background",
-          "paint": {
-            {{^if is_terrainrgb}}
-            "background-color": "hsl(190, 99%, 63%)"
-            {{else}}
-            "background-color": "hsl(0, 100%, 25%)"
-            {{/if}}
-          },
-          "type": "background"
-        },
-        {
-          "id": "hillshade",
-          "source": "hillshade",
-          "type": "hillshade",
-          "paint": {
-            "hillshade-shadow-color": "hsl(39, 21%, 33%)",
-            "hillshade-illumination-direction": 315,
-            "hillshade-exaggeration": 0.8
-          }
-        }
-      ]
-    };
+	  "layers": [
+		{
+		  "id": "background",
+		  "paint": {
+			"background-color": "hsl(190, 99%, 63%)"
+		  },
+		  "type": "background"
+		},
+		{
+		  "id": "hillshade",
+		  "source": "hillshade",
+		  "type": "hillshade",
+		  "paint": {
+			"hillshade-shadow-color": "hsl(39, 21%, 33%)",
+			"hillshade-illumination-direction": 315,
+			"hillshade-exaggeration": 0.8
+		  }
+		},
+		{
+		  "id": "contours",
+		  "type": "line",
+		  "source": "contour",
+		  "source-layer": "contours",
+		  "paint": {
+			"line-opacity": 0.5,
+			"line-width": ["match", ["get", "level"], 1, 1, 0.5]
+		  }
+		}
+	  ]
+  };
     {{/is_terrain}}
 
     var map = new maplibregl.Map({

src/contour.js

@@ -99,7 +99,7 @@ export class LocalDemManager {
     console.log(url);
     const $zxy = this.extractZXYFromUrlTrim(url);
     if (!$zxy) {
-      throw new Error(`Could not extract zxy from $`);
+      throw new Error(`Could not extract zxy from $url`);
     }
     if (abortController.signal.aborted) {
       return null;
@@ -173,13 +173,8 @@ export class LocalDemManager {
    * @returns {{z: number, x: number, y:number} | null} Returns the z,x,y of the url, or null if can't extract
    */
   _extractZXYFromUrlTrimFunction(url) {
-    const lastSlashIndex = url.lastIndexOf('/');
-    if (lastSlashIndex === -1) {
-      return null;
-    }
-
-    const segments = url.split('/');
-    if (segments.length <= 3) {
+    const segments = url.split('/').filter(Boolean); // Split and remove empty segments
+    if (segments.length < 3) {
       return null;
     }
 

src/serve_data.js

@@ -222,7 +222,7 @@ export const serve_data = {
             z,
             x,
             y,
-            { levels: [100] },
+            { levels: [1000] },
             new AbortController(),
           );