Only extract ped stuff, vaguely classify it

backend/src/scrape.rs

@@ -22,7 +22,7 @@ pub fn scrape_osm(input_bytes: &[u8]) -> Result<MapModel> {
                 node_mapping.insert(id, pt);
             }
             Element::Way { id, node_ids, tags } => {
-                if tags.contains_key("highway") {
+                if is_any(&tags, "highway", vec!["footway"]) {
                     highways.push(Way { id, node_ids, tags });
                 }
             }
@@ -101,3 +101,11 @@ fn split_edges(
 
     (roads, intersections)
 }
+
+fn is_any(tags: &HashMap<String, String>, k: &str, values: Vec<&str>) -> bool {
+    if let Some(v) = tags.get(k) {
+        values.contains(&v.as_ref())
+    } else {
+        false
+    }
+}

web/src/App.svelte

@@ -5,6 +5,7 @@
   import { GeoJSON, LineLayer, MapLibre, Popup } from "svelte-maplibre";
   import xmlUrl from "../assets/input.osm?url";
   import Layout from "./Layout.svelte";
+  import Legend from "./Legend.svelte";
   import Loading from "./Loading.svelte";
 
   let model: MapModel | undefined = undefined;
@@ -45,6 +46,31 @@
       map.fitBounds(bbox, { animate: false });
     }
   }
+
+  function renderNetwork() {
+    let gj = JSON.parse(model.render());
+    // Easier to add props here than attempt style expressions
+    for (let f of gj.features) {
+      let props = f.properties;
+      if (
+        props.highway == "crossing" ||
+        props.footway == "crossing" ||
+        "crossing" in props
+      ) {
+        props.color = "green";
+      } else {
+        // TODO The categories aren't mutex, some could combo
+        if (props.indoor) {
+          props.color = "blue";
+        } else if (props.layer || props.bridge) {
+          props.color = "purple";
+        } else {
+          f.properties.color = "red";
+        }
+      }
+    }
+    return gj;
+  }
 </script>
 
 <Layout>
@@ -53,6 +79,14 @@
       <input bind:this={fileInput} on:change={loadFile} type="file" />
     </label>
     <div><button on:click={zoomToFit}>Zoom to fit</button></div>
+    <Legend
+      rows={[
+        ["Footway (ground, outdoors)", "red"],
+        ["Indoors footway", "blue"],
+        ["Footway not on the ground", "purple"],
+        ["Crossing", "green"],
+      ]}
+    />
   </div>
   <div slot="main" style="position:relative; width: 100%; height: 100vh;">
     <MapLibre
@@ -62,11 +96,11 @@
       bind:map
     >
       {#if model}
-        <GeoJSON data={JSON.parse(model.render())}>
+        <GeoJSON data={renderNetwork()}>
           <LineLayer
             paint={{
               "line-width": 5,
-              "line-color": "red",
+              "line-color": ["get", "color"],
             }}
             on:click={(e) =>
               window.open(e.detail.features[0].properties.way, "_blank")}

web/src/Legend.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  // (Label, color) pairs
+  export let rows: [string, string][];
+</script>
+
+<ul>
+  {#each rows as [label, color]}
+    <li>
+      <span style:background={color} />
+      {label}
+    </li>
+  {/each}
+</ul>
+
+<style>
+  span {
+    display: block;
+    float: left;
+    height: 16px;
+    width: 30px;
+    margin-right: 5px;
+    border: 1px solid #999;
+  }
+</style>