Working on auto neighbourhood splitting: handling coastline severances,

visualizing the outputs better, plumbing through the area

Author: dabreegster

backend/src/auto_boundaries.rs

@@ -1,4 +1,4 @@
-use geo::{Coord, LineString, Polygon};
+use geo::{Area, Coord, LineString, Polygon};
 use geojson::FeatureCollection;
 use i_float::f64_point::F64Point;
 use i_overlay::core::fill_rule::FillRule;
@@ -54,6 +54,8 @@ impl MapModel {
         for polygon in split_polygon(self.mercator.to_mercator(&self.boundary_wgs84), severances) {
             let mut f = self.mercator.to_wgs84_gj(&polygon);
             f.set_property("kind", "area");
+            // Convert from m^2 to km^2. Use unsigned area to ignore polygon orientation.
+            f.set_property("area_km2", polygon.unsigned_area() / 1_000_000.0);
             features.push(f);
         }
 

backend/src/scrape.rs

@@ -61,7 +61,7 @@ pub fn scrape_osm(
                         node_ids.into_iter().map(|n| node_mapping[&n]).collect(),
                     ));
                 }
-            } else if tags.is("natural", "water") {
+            } else if tags.is_any("natural", vec!["water", "coastline"]) {
                 // If the entire area is inside the study area, the LineString will be closed. If
                 // it intersects the study area, then it might not be.
                 node_ids.retain(|n| node_mapping.contains_key(n));

web/src/AutoBoundariesMode.svelte

@@ -7,13 +7,14 @@
     hoverStateFilter,
     type LayerClickInfo,
   } from "svelte-maplibre";
-  import { Link, layerId } from "./common";
-  import { isLine } from "svelte-utils/map";
+  import { Link, Popup, layerId } from "./common";
+  import { isLine, isPolygon } from "svelte-utils/map";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { app, mode, autosave } from "./stores";
   import { downloadGeneratedFile } from "svelte-utils";
 
   let gj = JSON.parse($app!.renderAutoBoundaries());
+  let minArea = 0;
 
   function add(e: CustomEvent<LayerClickInfo>) {
     let name = window.prompt("What do you want to name the neighbourhood?");
@@ -71,26 +72,52 @@
 
   <div slot="sidebar">
     <BackButton on:click={() => ($mode = { mode: "network" })} />
+
     <p>
       Click an area to use it as a neighbourhood. These are generated by finding
-      roads, railways, and water thatform severances. There are many bugs; this
-      is experimental.
+      roads, railways, and water that form severances. There are many bugs; this
+      is experimental. The colors are arbitrary, just to distinguish better.
     </p>
+
     <button class="secondary" on:click={download}>Export to GeoJSON</button>
+
+    <label>
+      Minimum area (km²)
+      <input type="number" bind:value={minArea} min="0" max="1" step="0.01" />
+    </label>
   </div>
 
   <div slot="map">
     <GeoJSON data={gj} generateId>
       <FillLayer
         {...layerId("auto-boundaries-areas")}
+        filter={["all", isPolygon, [">=", ["get", "area_km2"], minArea]]}
         manageHoverState
         paint={{
-          "fill-color": hoverStateFilter("cyan", "red"),
-          "fill-opacity": 0.3,
+          "fill-color": [
+            "match",
+            ["%", ["id"], 5],
+            0,
+            "blue",
+            1,
+            "yellow",
+            2,
+            "green",
+            3,
+            "purple",
+            4,
+            "orange",
+            "black",
+          ],
+          "fill-opacity": hoverStateFilter(0.3, 0.7),
         }}
         on:click={add}
         hoverCursor="pointer"
-      />
+      >
+        <Popup openOn="hover" let:props>
+          Area: {props.area_km2.toFixed(5)} km²
+        </Popup>
+      </FillLayer>
 
       <LineLayer
         {...layerId("auto-boundaries-severances")}

web/src/common/zorder.ts

@@ -61,6 +61,7 @@ const layerZorder = [
   // TODO Handle all basemaps now
   "Background",
 
+  // TODO These don't show up at low zoom, I think because Residential is hidden
   "neighbourhood-boundaries",
 
   // MapTiler basemap