Don't use map popups in isochrone mode

backend/src/isochrone.rs

@@ -33,7 +33,7 @@ pub fn calculate(
     );
     timer.push("render to GJ");
 
-    // Show cost per road
+    // Show reached amenities
     let mut features = Vec::new();
     for (r, _) in &cost_per_road {
         for a in &graph.roads[r.0].amenities[mode] {

web/src/DebugMode.svelte

@@ -53,7 +53,7 @@
           </Popup>
         </LineLayer>
 
-        <AmenityLayer />
+        <AmenityLayer popups />
         <StopsLayer />
       </GeoJSON>
     {/if}

web/src/IsochroneMode.svelte

@@ -5,7 +5,14 @@
   import type { FeatureCollection } from "geojson";
   import { GeoJSON, FillLayer, LineLayer, Marker } from "svelte-maplibre";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import { backend, travelMode, type TravelMode, startTime } from "./stores";
+  import {
+    backend,
+    travelMode,
+    type TravelMode,
+    startTime,
+    type Amenity,
+    describeAmenity,
+  } from "./stores";
   import { SequentialLegend } from "svelte-utils";
   import { Popup, makeColorRamp, isLine, isPolygon } from "svelte-utils/map";
   import { onMount } from "svelte";
@@ -25,7 +32,7 @@
   let routeGj: FeatureCollection | null = null;
   let err = "";
 
-  let hoveredAmenity: Feature<Point> | null;
+  let hoveredAmenity: Feature<Point, Amenity> | null;
 
   async function updateIsochrone(
     _x: { lng: number; lat: number } | null,
@@ -85,7 +92,15 @@
 </script>
 
 <SplitComponent>
-  <div slot="top"><NavBar /></div>
+  <div slot="top" style="display: flex; justify-content: space-between;">
+    <NavBar />
+    {#if hoveredAmenity}
+      <span
+        >{describeAmenity(hoveredAmenity)} ({hoveredAmenity.properties
+          .amenity_kind})</span
+      >
+    {/if}
+  </div>
   <div slot="sidebar">
     <h2>Isochrone mode</h2>
 
@@ -122,7 +137,7 @@
     {/if}
 
     {#if isochroneGj}
-      <GeoJSON data={isochroneGj}>
+      <GeoJSON data={isochroneGj} generateId>
         <LineLayer
           id="isochrone"
           filter={isLine}

web/src/common/AmenityLayer.svelte

@@ -3,8 +3,10 @@
   import { PropertiesTable, notNull } from "svelte-utils";
   import { Popup } from "svelte-utils/map";
   import type { Feature, Point } from "geojson";
+  import type { Amenity } from "../stores";
 
-  export let hovered: Feature<Point> | null = null;
+  export let hovered: Feature<Point, Amenity> | null = null;
+  export let popups = false;
 </script>
 
 <CircleLayer
@@ -23,7 +25,9 @@
   eventsIfTopMost
   bind:hovered
 >
-  <Popup openOn="hover" let:props>
-    <PropertiesTable properties={props} />
-  </Popup>
+  {#if popups}
+    <Popup openOn="hover" let:props>
+      <PropertiesTable properties={props} />
+    </Popup>
+  {/if}
 </CircleLayer>

web/src/common/AmenityList.svelte

@@ -1,17 +1,10 @@
 <script lang="ts">
   import type { Feature, Point, FeatureCollection } from "geojson";
+  import { type Amenity, describeAmenity } from "../stores";
 
   // 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>[];
@@ -32,25 +25,16 @@
     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>
+        <li>
+          <a href={f.properties.osm_id} target="_blank">{describeAmenity(f)}</a>
+        </li>
       {/each}
     </ol>
   </details>

web/src/stores.ts

@@ -3,7 +3,7 @@ import { writable, type Writable } from "svelte/store";
 import type { ExpressionSpecification } from "maplibre-gl";
 import * as Comlink from "comlink";
 import { type Backend } from "./worker";
-import type { FeatureCollection } from "geojson";
+import type { Feature, Point, FeatureCollection } from "geojson";
 
 export let maptilerApiKey = "MZEJTanw3WpxRvt7qDfo";
 
@@ -46,9 +46,31 @@ export let backend: Writable<Comlink.Remote<Backend> | null> = writable(null);
 // Indicates the backend is ready and a file is loaded
 export let isLoaded = writable(false);
 
+// ----
+// TODO Move to another file
+
 export interface ScoreProps {
   cost: number;
   poi: string;
   closest_lon: number;
   closest_lat: number;
 }
+
+export interface Amenity {
+  amenity_kind: string;
+  osm_id: string;
+  name?: string;
+  brand?: string;
+  cuisine?: string;
+}
+
+export function describeAmenity(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;
+}