Generate a bunch of example osm.pbf clips for the web app

.gitignore

@@ -6,3 +6,4 @@ __pycache__
 examples/*/input/*
 examples/*/intermediate/*
 examples/*/output/*
+examples/pbf_clips/*

examples/clip_example_pbfs.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+# This generates a bunch of osm.pbf files clipped to different cities, for use
+# in the interactive web app mode
+
+set -e
+set -x
+
+dir=pbf_clips
+
+function clip {
+	echo "Creating clip of ${1}"
+	curl http://download.geofabrik.de/${2} -o ${dir}/tmp.osm.pbf
+	osmium extract -b ${3} ${dir}/tmp.osm.pbf -o ${dir}/${1}.osm.pbf --overwrite
+	rm -f ${dir}/tmp.osm.pbf
+}
+
+mkdir -p ${dir}
+
+# Use https://download.geofabrik.de/ and http://bboxfinder.com
+clip seattle north-america/us/washington-latest.osm.pbf                 -122.365036,47.610561,-122.293968,47.665387
+clip london  europe/great-britain/england/greater-london-latest.osm.pbf -0.115528,51.476946,-0.059910,51.505591
+clip berlin  europe/germany/berlin-latest.osm.pbf                       13.372421,52.496996,13.447781,52.534289
+clip paris   europe/france/ile-de-france-latest.osm.pbf                 2.303867,48.825514,2.387295,48.876571
+clip antwerp europe/belgium-latest.osm.pbf                              4.379425,51.185369,4.463196,51.249238
+
+rclone sync pbf_clips/ cloudflare:od2net/pbf_clips/

viewer/src/ClippedPBFs.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  export let example: string;
+</script>
+
+<div>
+  <label>
+    Or load an example:
+    <select bind:value={example}>
+      <option value="">Custom file loaded</option>
+      <option value="antwerp">Antwerp</option>
+      <option value="berlin">Berlin</option>
+      <option value="london">South London</option>
+      <option value="paris">Paris</option>
+      <option value="seattle">Seattle</option>
+    </select>
+  </label>
+</div>

viewer/src/EdgeCostApp.svelte

@@ -10,6 +10,7 @@
     Popup,
   } from "svelte-maplibre";
   import init, { JsNetwork } from "wasm-od2net";
+  import ClippedPBFs from "./ClippedPBFs.svelte";
   import {
     colorByLts,
     colors,
@@ -31,6 +32,7 @@
 
   let map: MapType;
   let network: JsNetwork | undefined;
+  let example = "";
   let gj = {
     type: "FeatureCollection",
     features: [],
@@ -45,8 +47,12 @@
 
   let fileInput: HTMLInputElement;
   async function fileLoaded(e: Event) {
+    example = "";
+    loadBytes(await fileInput.files![0].arrayBuffer());
+  }
+
+  function loadBytes(buffer) {
     try {
-      let buffer = await fileInput.files![0].arrayBuffer();
       network = new JsNetwork(new Uint8Array(buffer));
 
       let bbox = network.getBounds();
@@ -57,13 +63,23 @@
         ],
         { padding: 20, animate: false }
       );
-
       updateGj();
     } catch (err) {
       window.alert(`Problem loading network file: ${err}`);
     }
   }
 
+  async function loadExample(example) {
+    if (example != "") {
+      let resp = await fetch(
+        `https://assets.od2net.org/pbf_clips/${example}.osm.pbf`
+      );
+      loadBytes(await resp.arrayBuffer());
+    }
+  }
+
+  $: loadExample(example);
+
   function updateGj() {
     gj = JSON.parse(network.debugNetwork());
     let allSum = 0;
@@ -155,6 +171,7 @@
       Open a <i>.bin</i> network file or an <i>.osm.pbf</i>
       <input bind:this={fileInput} on:change={fileLoaded} type="file" />
     </label>
+    <ClippedPBFs bind:example />
     {#if network}
       <hr />
       <div>

viewer/src/InteractiveApp.svelte

@@ -5,6 +5,7 @@
   import { GeoJSON, MapLibre, Marker } from "svelte-maplibre";
   import init, { JsNetwork } from "wasm-od2net";
   import markerSvg from "../assets/marker.svg?raw";
+  import ClippedPBFs from "./ClippedPBFs.svelte";
   import CostFunction from "./CostFunction.svelte";
   import Header from "./Header.svelte";
   import Layers from "./Layers.svelte";
@@ -18,6 +19,7 @@
 
   let map: MapType;
   let network: JsNetwork | undefined;
+  let example = "";
   let markerPosition = { lng: 0.0, lat: 0.0 };
   let gj = {
     type: "FeatureCollection",
@@ -36,8 +38,12 @@
 
   let fileInput: HTMLInputElement;
   async function fileLoaded(e: Event) {
+    example = "";
+    loadBytes(await fileInput.files![0].arrayBuffer());
+  }
+
+  function loadBytes(buffer) {
     try {
-      let buffer = await fileInput.files![0].arrayBuffer();
       network = new JsNetwork(new Uint8Array(buffer));
 
       let bbox = network.getBounds();
@@ -56,6 +62,17 @@
     }
   }
 
+  async function loadExample(example) {
+    if (example != "") {
+      let resp = await fetch(
+        `https://assets.od2net.org/pbf_clips/${example}.osm.pbf`
+      );
+      loadBytes(await resp.arrayBuffer());
+    }
+  }
+
+  $: loadExample(example);
+
   function recalculate() {
     if (!network) {
       return;
@@ -80,6 +97,7 @@
       Open a <i>.bin</i> network file or an <i>.osm.pbf</i>
       <input bind:this={fileInput} on:change={fileLoaded} type="file" />
     </label>
+    <ClippedPBFs bind:example />
 
     {#if network}
       <div>