Clip the network to the boundary

Wires up e2e, exposing a problem with the route snapper geometry

backend/src/lib.rs

@@ -1,14 +1,17 @@
 #[macro_use]
+extern crate anyhow;
+#[macro_use]
 extern crate log;
 
 use std::fmt;
 use std::sync::Once;
 
-use geo::{LineString, Point};
+use geo::{LineString, Point, Polygon};
 use geojson::{Feature, GeoJson, Geometry};
 use wasm_bindgen::prelude::*;
 
 mod mercator;
+mod neighbourhood;
 mod scrape;
 mod tags;
 
@@ -111,6 +114,18 @@ impl MapModel {
         bytes
     }
 
+    /// Takes boundary GJ polygon, returns GJ with more details
+    #[wasm_bindgen(js_name = analyzeNeighbourhood)]
+    pub fn analyze_neighbourhood(&self, input: JsValue) -> Result<String, JsValue> {
+        let boundary_gj: Feature = serde_wasm_bindgen::from_value(input)?;
+        let mut boundary_geo: Polygon = boundary_gj.try_into().map_err(err_to_js)?;
+        self.mercator.to_mercator_in_place(&mut boundary_geo);
+
+        let neighbourhood =
+            neighbourhood::Neighbourhood::new(self, boundary_geo).map_err(err_to_js)?;
+        Ok(serde_json::to_string(&neighbourhood.to_gj(self)).map_err(err_to_js)?)
+    }
+
     fn find_edge(&self, i1: IntersectionID, i2: IntersectionID) -> &Road {
         // TODO Store lookup table
         for r in &self.intersections[i1.0].roads {

backend/src/neighbourhood.rs

@@ -0,0 +1,40 @@
+use std::collections::HashSet;
+
+use anyhow::Result;
+use geo::{Contains, Polygon};
+use geojson::GeoJson;
+
+use crate::{MapModel, RoadID};
+
+pub struct Neighbourhood {
+    interior_roads: HashSet<RoadID>,
+}
+
+impl Neighbourhood {
+    pub fn new(map: &MapModel, boundary: Polygon) -> Result<Self> {
+        let mut interior_roads = HashSet::new();
+        for r in &map.roads {
+            if boundary.contains(&r.linestring) {
+                interior_roads.insert(r.id);
+            }
+        }
+
+        if interior_roads.is_empty() {
+            bail!("No roads inside the boundary");
+        }
+
+        Ok(Self { interior_roads })
+    }
+
+    pub fn to_gj(&self, map: &MapModel) -> GeoJson {
+        let mut features = Vec::new();
+
+        for r in &self.interior_roads {
+            let mut f = map.roads[r.0].to_gj(&map.mercator);
+            f.set_property("kind", "interior_road");
+            features.push(f);
+        }
+
+        GeoJson::from(features)
+    }
+}

web/src/App.svelte

@@ -82,7 +82,7 @@
     {/if}
     <div><button on:click={zoomToFit}>Zoom to fit</button></div>
 
-    {#if mode.mode == "network"}
+    {#if mode.mode == "network" && model}
       <button on:click={setBoundaryMode}>Set boundary</button>
     {:else if mode.mode == "set-boundary"}
       <p>Draw the boundary...</p>
@@ -104,7 +104,7 @@
         {:else if mode.mode == "set-boundary"}
           <RouteSnapperLayer />
         {:else if mode.mode == "neighbourhood"}
-          <NeighbourhoodLayer boundary={mode.boundary} />
+          <NeighbourhoodLayer {model} boundary={mode.boundary} />
         {/if}
       {/if}
     </MapLibre>

web/src/NeighbourhoodLayer.svelte

@@ -1,15 +1,41 @@
 <script lang="ts">
+  import { MapModel } from "backend";
   import type { Feature, Polygon } from "geojson";
-  import { FillLayer, GeoJSON } from "svelte-maplibre";
+  import { FillLayer, GeoJSON, LineLayer, Popup } from "svelte-maplibre";
+  import { constructMatchExpression, PropertiesTable } from "./common";
 
+  export let model: MapModel;
   export let boundary: Feature<Polygon>;
+
+  let details = JSON.parse(model.analyzeNeighbourhood(boundary));
 </script>
 
 <GeoJSON data={boundary}>
   <FillLayer
     paint={{
       "fill-color": "black",
-      "fill-opacity": 0.5,
+      "fill-opacity": 0.2,
     }}
   />
 </GeoJSON>
+
+<GeoJSON data={details}>
+  <LineLayer
+    paint={{
+      "line-width": 5,
+      "line-color": constructMatchExpression(
+        ["get", "kind"],
+        {
+          interior_road: "black",
+        },
+        "red"
+      ),
+    }}
+    on:click={(e) => window.open(e.detail.features[0].properties.way, "_blank")}
+    hoverCursor="pointer"
+  >
+    <Popup openOn="hover" let:data>
+      <PropertiesTable properties={data.properties} />
+    </Popup>
+  </LineLayer>
+</GeoJSON>