Merge pull request #27 from mblaine/main

When clicking feature, make @id a hyper link and highlight the featur…
watmildon · May 22, 2024 · 246fc83 · 246fc83
2 parents 5e1c06e + 5b28916
commit 246fc83
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/docs/mapstyle.js b/docs/mapstyle.js
@@ -136,5 +136,19 @@ var mapstyle_layers = [
     },
     source: "redlined",
     "source-layer": "redlined-D",
+  },
+  {
+    id: "highlight",
+    type: "line",
+    paint: {
+      "line-color":  "#f5812f",
+      "line-width": 5,
+    },
+    "layout": {
+      "line-cap": "round",
+      "line-join": "round",
+      "visibility": "visible"
+    },
+    source: "highlight"
   }
 ];
diff --git a/docs/setup.js b/docs/setup.js
@@ -48,6 +48,15 @@ document.addEventListener("alpine:init", async () => {
           url: "pmtiles://" + url_prefix + "AllUSCounties.pmtiles",
           attribution: "© Public Domain, USDOT",
         },
+        highlight: {
+          type: "geojson",
+          data: {
+              "type": "FeatureCollection",
+              "features": [
+              ]
+            },
+          attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>',
+        },
         osmcarto: {
           type: "raster",
           tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
@@ -93,16 +102,28 @@ document.addEventListener("alpine:init", async () => {
       let html = `<h4>feature #${i+1}</h4>`;
       html += "<ul>"
       for (const [key, val] of Object.entries(properties)) {
-        html += `<li>${key}=${val}</li>`;
+        if(key === "@id" && typeof(properties["@type"]) !== "undefined") {
+            let t = properties["@type"];
+            html += `<li>${key}=<a target="_blank" href="https://www.openstreetmap.org/${t}/${val}">${val}</a></li>`;
+        } else {
+            html += `<li>${key}=${val}</li>`;
+        }
       }
       html += "</ul>";
       return html;
     }
+    const newHighlightSource = {
+      "type": "FeatureCollection",
+      "features": [
+      ]
+    };
     const features = {};
     for (const f of e.features) {
       features[f.properties['@type'] + f.properties['@id']] = f;
+      newHighlightSource["features"].push(f);
     }
     const html = `<div class="inspect-popup">${Array.from(Object.values(features)).map(feature2html).join("<br>")}</div>`;
+    window.tigerMap.getSource("highlight").setData(newHighlightSource);
 
     const popup = new maplibregl.Popup()
           .setLngLat(e.lngLat)