Just move components around

web/src/DebugMode.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { NavBar } from "./common";
+  import {
+    StopsLayer,
+    PickTravelMode,
+    AmenityList,
+    AmenityLayer,
+    NavBar,
+  } from "./common";
   import { GeoJSON, hoverStateFilter, LineLayer } from "svelte-maplibre";
-  import PickTravelMode from "./PickTravelMode.svelte";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import AmenityList from "./AmenityList.svelte";
-  import AmenityLayer from "./AmenityLayer.svelte";
-  import StopsLayer from "./StopsLayer.svelte";
   import { PropertiesTable, notNull } from "svelte-utils";
   import { Popup } from "svelte-utils/map";
   import { backend, type TravelMode, filterForMode } from "./stores";

web/src/IsochroneMode.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
-  import { NavBar } from "./common";
+  import { AmenityLayer, AmenityList, PickTravelMode, NavBar } from "./common";
   import type { Feature, Point } from "geojson";
-  import AmenityLayer from "./AmenityLayer.svelte";
-  import AmenityList from "./AmenityList.svelte";
   import { colorScale } from "./colors";
   import type { FeatureCollection } from "geojson";
   import { GeoJSON, FillLayer, LineLayer, Marker } from "svelte-maplibre";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { backend, type TravelMode } from "./stores";
-  import PickTravelMode from "./PickTravelMode.svelte";
   import { SequentialLegend } from "svelte-utils";
   import { Popup, makeColorRamp, isLine, isPolygon } from "svelte-utils/map";
   import { onMount } from "svelte";

web/src/RouteMode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { NavBar } from "./common";
+  import { PickTravelMode, NavBar } from "./common";
   import type { MapMouseEvent } from "maplibre-gl";
   import {
     MapEvents,
@@ -10,7 +10,6 @@
   } from "svelte-maplibre";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { mode, backend, type TravelMode } from "./stores";
-  import PickTravelMode from "./PickTravelMode.svelte";
   import { Popup, constructMatchExpression } from "svelte-utils/map";
   import { notNull, PropertiesTable } from "svelte-utils";
   import { onMount } from "svelte";

web/src/common/AmenityLayer.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { CircleLayer, hoverStateFilter } from "svelte-maplibre";
+  import { PropertiesTable, notNull } from "svelte-utils";
+  import { Popup } from "svelte-utils/map";
+  import type { Feature, Point } from "geojson";
+
+  export let hovered: Feature<Point> | null = null;
+</script>
+
+<CircleLayer
+  id="amenities"
+  paint={{
+    "circle-radius": 5,
+    "circle-opacity": 0,
+    "circle-stroke-width": 2,
+    "circle-stroke-color": hoverStateFilter("orange", "red"),
+  }}
+  manageHoverState
+  filter={["has", "amenity_kind"]}
+  on:click={(e) =>
+    window.open(notNull(e.detail.features[0].properties).osm_id, "_blank")}
+  hoverCursor="pointer"
+  eventsIfTopMost
+  bind:hovered
+>
+  <Popup openOn="hover" let:props>
+    <PropertiesTable properties={props} />
+  </Popup>
+</CircleLayer>

web/src/common/AmenityList.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { Feature, Point, FeatureCollection } from "geojson";
+
+  // Can contain things besides amenities
+  export let gj: FeatureCollection;
+
+  interface Amenity {
+    amenity_kind: string;
+    osm_id: string;
+    name?: string;
+    brand?: string;
+    cuisine?: string;
+  }
+
+  $: amenityFeatures = gj.features.filter(
+    (f) => "amenity_kind" in f.properties!,
+  ) as Feature<Point, Amenity>[];
+
+  // Sorted by number of members
+  function groupByKind(
+    features: Feature<Point, Amenity>[],
+  ): [string, Feature<Point, Amenity>[]][] {
+    let map = new Map();
+    for (let f of features) {
+      if (!map.has(f.properties.amenity_kind)) {
+        map.set(f.properties.amenity_kind, []);
+      }
+      map.get(f.properties.amenity_kind).push(f);
+    }
+
+    let list = [...map.entries()];
+    list.sort((a, b) => b[1].length - a[1].length);
+    return list;
+  }
+
+  function describe(f: Feature<Point, Amenity>): string {
+    let label = f.properties.name || `a ${f.properties.amenity_kind}`;
+    if (f.properties.brand) {
+      label += ` (${f.properties.brand})`;
+    }
+    if (f.properties.cuisine) {
+      label += ` (${f.properties.cuisine})`;
+    }
+    return label;
+  }
+</script>
+
+{#each groupByKind(amenityFeatures) as [kind, list]}
+  <details>
+    <summary>{kind} ({list.length})</summary>
+    <ol>
+      {#each list as f}
+        <li><a href={f.properties.osm_id} target="_blank">{describe(f)}</a></li>
+      {/each}
+    </ol>
+  </details>
+{/each}

web/src/common/PickTravelMode.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { TravelMode } from "../stores";
+
+  export let travelMode: TravelMode;
+</script>
+
+<label
+  >Mode:
+  <select bind:value={travelMode}>
+    <option value="car">Car</option>
+    <option value="bicycle">Bicycle</option>
+    <option value="foot">Foot</option>
+    <option value="transit">Public transit</option>
+  </select>
+</label>

web/src/common/StopsLayer.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { CircleLayer, hoverStateFilter } from "svelte-maplibre";
+  import { notNull, Modal } from "svelte-utils";
+  import { Popup } from "svelte-utils/map";
+
+  let next_steps: [any][] | null = null;
+</script>
+
+<CircleLayer
+  id="stops"
+  paint={{
+    "circle-radius": 5,
+    "circle-color": hoverStateFilter("cyan", "blue"),
+  }}
+  manageHoverState
+  filter={["has", "next_steps"]}
+  on:click={(e) =>
+    (next_steps = JSON.parse(
+      notNull(e.detail.features[0].properties).next_steps,
+    ))}
+  hoverCursor="pointer"
+  eventsIfTopMost
+>
+  <Popup openOn="hover" let:props
+    >{props.name} has {JSON.parse(props.next_steps).length} next steps (arrivals)</Popup
+  >
+</CircleLayer>
+
+{#if next_steps}
+  <Modal on:close={() => (next_steps = null)}>
+    {#each next_steps as x}
+      <p>{JSON.stringify(x)}</p>
+    {/each}
+  </Modal>
+{/if}

web/src/common/index.ts

@@ -1 +1,5 @@
+export { default as AmenityLayer } from "./AmenityLayer.svelte";
+export { default as AmenityList } from "./AmenityList.svelte";
 export { default as NavBar } from "./NavBar.svelte";
+export { default as PickTravelMode } from "./PickTravelMode.svelte";
+export { default as StopsLayer } from "./StopsLayer.svelte";