Bring in the overpass importer

web/package.json

@@ -25,6 +25,7 @@
     "vite-plugin-wasm-pack": "0.1.11"
   },
   "dependencies": {
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@turf/bbox": "^6.5.0",
     "svelte-maplibre": "^0.7.3"
   }

web/src/App.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
   import turfBbox from "@turf/bbox";
-  import init, { MapModel } from "backend";
-  import { onMount } from "svelte";
   import { GeoJSON, LineLayer, MapLibre, Marker, Popup } from "svelte-maplibre";
-  import inputUrl from "../assets/input.pbf?url";
   import { colorScale, limits } from "./colors";
-  import { Layout, Legend, Loading, SequentialLegend } from "./common";
+  import { Layout, Legend, SequentialLegend } from "./common";
   import Directions from "./Directions.svelte";
+  import MapLoader from "./MapLoader.svelte";
   import NetworkLayer from "./NetworkLayer.svelte";
   import RouteLayer from "./RouteLayer.svelte";
   import ScoreLayer from "./ScoreLayer.svelte";
 
   let model: MapModel | undefined = undefined;
   let map;
-  let loading = false;
 
   let mode = "score";
 
@@ -23,35 +20,24 @@
   let route_err = "";
   let opacity = 100;
   let showSeverances = true;
-  let showBasemap = false;
 
-  onMount(async () => {
-    await init();
-    try {
-      loading = true;
-      let resp = await fetch(inputUrl);
-      loadModel(await resp.arrayBuffer());
-    } catch (err) {
-      window.alert(`Couldn't open from URL ${inputUrl}: ${err}`);
-    }
-    loading = false;
-  });
+  function lerp(pct, a, b) {
+    return a + pct * (b - a);
+  }
 
-  let fileInput: HTMLInputElement;
-  async function loadFile(e: Event) {
-    try {
-      loading = true;
-      loadModel(await fileInput.files![0].arrayBuffer());
-    } catch (err) {
-      window.alert(`Couldn't open this file: ${err}`);
+  function zoomToFit() {
+    if (map && model) {
+      // TODO wasteful
+      let bbox = turfBbox(JSON.parse(model.render()));
+      map.fitBounds(bbox, { animate: false });
     }
-    loading = false;
   }
 
-  function loadModel(buffer: Buffer) {
-    console.time("load");
-    model = new MapModel(new Uint8Array(buffer));
-    console.timeEnd("load");
+  function gotModel(_m) {
+    if (!model) {
+      return;
+    }
+    console.log("New map model loaded");
     zoomToFit();
     let bbox = turfBbox(JSON.parse(model.render()));
     route_a = {
@@ -63,18 +49,7 @@
       lat: lerp(0.6, bbox[1], bbox[3]),
     };
   }
-
-  function lerp(pct, a, b) {
-    return a + pct * (b - a);
-  }
-
-  function zoomToFit() {
-    if (map && model) {
-      // TODO wasteful
-      let bbox = turfBbox(JSON.parse(model.render()));
-      map.fitBounds(bbox, { animate: false });
-    }
-  }
+  $: gotModel(model);
 
   $: if (model && route_a && route_b) {
     try {
@@ -96,9 +71,9 @@
 
 <Layout>
   <div slot="left">
-    <label>
-      <input bind:this={fileInput} on:change={loadFile} type="file" />
-    </label>
+    {#if map}
+      <MapLoader {map} bind:model />
+    {/if}
     <div><button on:click={zoomToFit}>Zoom to fit</button></div>
 
     <label>
@@ -141,23 +116,10 @@
     {:else if mode == "score"}
       <SequentialLegend {colorScale} {limits} />
     {/if}
-
-    <hr />
-
-    <label>
-      <input type="checkbox" bind:checked={showBasemap} />
-      Show basemap
-    </label>
   </div>
   <div slot="main" style="position:relative; width: 100%; height: 100vh;">
     <MapLibre
-      style={showBasemap
-        ? "https://api.maptiler.com/maps/dataviz/style.json?key=MZEJTanw3WpxRvt7qDfo"
-        : {
-            version: 8,
-            sources: {},
-            layers: [],
-          }}
+      style="https://api.maptiler.com/maps/dataviz/style.json?key=MZEJTanw3WpxRvt7qDfo"
       standardControls
       hash
       bind:map
@@ -173,4 +135,3 @@
     </MapLibre>
   </div>
 </Layout>
-<Loading {loading} />

web/src/MapLoader.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import turfBbox from "@turf/bbox";
+  import init, { MapModel } from "backend";
+  import { onMount } from "svelte";
+  import inputUrl from "../assets/input.pbf?url";
+  import { Loading, OverpassSelector } from "./common";
+
+  export let model: MapModel | undefined = undefined;
+  export let map;
+
+  let msg = null;
+
+  onMount(async () => {
+    await init();
+    try {
+      msg = `Downloading ${inputUrl}`;
+      let resp = await fetch(inputUrl);
+      loadModel(await resp.arrayBuffer());
+    } catch (err) {
+      window.alert(`Couldn't open from URL ${inputUrl}: ${err}`);
+    }
+    msg = null;
+  });
+
+  let fileInput: HTMLInputElement;
+  async function loadFile(e: Event) {
+    try {
+      loadModel(await fileInput.files![0].arrayBuffer());
+    } catch (err) {
+      window.alert(`Couldn't open this file: ${err}`);
+    }
+    msg = null;
+  }
+
+  function loadModel(buffer: Buffer) {
+    msg = "Building map model from OSM input";
+    console.time("load");
+    model = new MapModel(new Uint8Array(buffer));
+    console.timeEnd("load");
+  }
+
+  function gotXml(e: CustomEvent<string>) {
+    try {
+      // TODO Can we avoid turning into bytes?
+      loadModel(new TextEncoder().encode(e.detail));
+    } catch (err) {
+      window.alert(`Couldn't import from Overpass: ${err}`);
+    }
+    msg = null;
+  }
+</script>
+
+<Loading {msg} />
+
+<div style="border: 1px solid black; padding: 8px;">
+  <div>
+    <label>
+      Load an osm.xml or a .pbf file:
+      <input bind:this={fileInput} on:change={loadFile} type="file" />
+    </label>
+  </div>
+
+  <OverpassSelector
+    {map}
+    on:gotXml={gotXml}
+    on:loading={(e) => (msg = e.detail)}
+    on:error={(e) => window.alert(e.detail)}
+  />
+</div>

web/src/ScoreLayer.svelte

@@ -86,4 +86,4 @@
     >
   </LineLayer>
 </GeoJSON>
-<RouteLayer {route_gj} route_a={null} route_b={null} />
+<RouteLayer {route_gj} route_a={null} route_b={null} {map} />

web/src/common/Loading.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  export let loading = false;
+  export let msg: string | null = null;
 </script>
 
-{#if loading}
-  <div>Loading</div>
+{#if msg}
+  <div>{msg}</div>
 {/if}
 
 <style>