Drag markers around, ask for a route

a-b-street · Dec 2, 2023 · 168fb99 · 168fb99
1 parent 3023d39
commit 168fb99
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 6 deletions.
diff --git a/backend/src/lib.rs b/backend/src/lib.rs
@@ -78,12 +78,19 @@ impl MapModel {
         Ok(out)
     }
 
-    /*#[wasm_bindgen(js_name = compareRoute)]
-    pub fn compare_route(&self, r: usize) -> Result<String, JsValue> {
-        let obj = find_road_width::find_road_width(self, RoadID(r));
-        let out = serde_json::to_string(&obj).map_err(err_to_js)?;
+    #[wasm_bindgen(js_name = compareRoute)]
+    pub fn compare_route(&self, input: JsValue) -> Result<String, JsValue> {
+        let req: CompareRouteRequest = serde_wasm_bindgen::from_value(input)?;
+
+        // Just direct temporarily
+        let f = Feature::from(Geometry::from(&LineString::from(vec![
+            (req.x1, req.y1),
+            (req.x2, req.y2),
+        ])));
+        let gj = GeoJson::from(vec![f]);
+        let out = serde_json::to_string(&gj).map_err(err_to_js)?;
         Ok(out)
-    }*/
+    }
 }
 
 #[derive(Deserialize)]

diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -2,7 +2,7 @@
   import turfBbox from "@turf/bbox";
   import init, { MapModel } from "backend";
   import { onMount } from "svelte";
-  import { GeoJSON, LineLayer, MapLibre, Popup } from "svelte-maplibre";
+  import { GeoJSON, LineLayer, MapLibre, Marker, Popup } from "svelte-maplibre";
   import xmlUrl from "../assets/input.osm?url";
   import Layout from "./Layout.svelte";
   import Legend from "./Legend.svelte";
@@ -12,6 +12,10 @@
   let map;
   let loading = false;
 
+  let route_a = null;
+  let route_b = null;
+  let route_gj = null;
+
   onMount(async () => {
     await init();
     try {
@@ -37,6 +41,20 @@
 
   function loadModel(buffer: Buffer) {
     model = new MapModel(new Uint8Array(buffer));
+    zoomToFit();
+    let bbox = turfBbox(JSON.parse(model.render()));
+    route_a = {
+      lng: lerp(0.4, bbox[0], bbox[2]),
+      lat: lerp(0.4, bbox[1], bbox[3]),
+    };
+    route_b = {
+      lng: lerp(0.6, bbox[0], bbox[2]),
+      lat: lerp(0.6, bbox[1], bbox[3]),
+    };
+  }
+
+  function lerp(pct, a, b) {
+    return a + pct * (b - a);
   }
 
   function zoomToFit() {
@@ -73,6 +91,17 @@
     }
     return gj;
   }
+
+  $: if (model && route_a && route_b) {
+    route_gj = JSON.parse(
+      model.compareRoute({
+        x1: route_a.lng,
+        y1: route_a.lat,
+        x2: route_b.lng,
+        y2: route_b.lat,
+      })
+    );
+  }
 </script>
 
 <Layout>
@@ -112,9 +141,38 @@
               >{@html JSON.stringify(data.properties, null, "<br />")}</Popup
             >
           </LineLayer>
+          {#if route_a}
+            <Marker bind:lngLat={route_a} draggable
+              ><span class="dot">A</span></Marker
+            >
+            <Marker bind:lngLat={route_b} draggable
+              ><span class="dot">B</span></Marker
+            >
+          {/if}
+          {#if route_gj}
+            <GeoJSON data={route_gj}>
+              <LineLayer
+                paint={{
+                  "line-width": 5,
+                  "line-color": "black",
+                }}
+              />
+            </GeoJSON>
+          {/if}
         </GeoJSON>
       {/if}
     </MapLibre>
   </div>
 </Layout>
 <Loading {loading} />
+
+<style>
+  .dot {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: grey;
+    text-align: center;
+  }
+</style>