Show tooltips with road names for snapped waypoints

(need to hide popups upstream first)

src/lib/draw/route/RouteControls.svelte

@@ -87,6 +87,12 @@
   >
     Avoid doubling back
   </Checkbox>
+  <Checkbox
+    id="routeSnapperTooltips"
+    bind:checked={$userSettings.routeSnapperTooltips}
+  >
+    Show tooltips with street names
+  </Checkbox>
 </CheckboxGroup>
 
 <GeocoderControls />

src/lib/draw/route/RouteSnapperLayer.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import type { Feature } from "geojson";
+  import { Popup } from "lib/common";
   import {
     constructMatchExpression,
     isLine,
     isPoint,
     isPolygon,
     layerId,
   } from "lib/maplibre";
+  import { userSettings } from "stores";
   import {
     CircleLayer,
     FillLayer,
@@ -43,7 +45,13 @@
         circleRadiusPixels
       ),
     }}
-  />
+  >
+    <Popup let:props>
+      {#if $userSettings.routeSnapperTooltips && props.name}
+        {props.name}
+      {/if}
+    </Popup>
+  </CircleLayer>
   <LineLayer
     {...layerId("route-lines")}
     filter={isLine}

src/stores.ts

@@ -83,6 +83,7 @@ function loadUserSettings(): UserSettings {
   let settings = {
     streetViewImagery: "google",
     avoidDoublingBack: false,
+    routeSnapperTooltips: false,
   };
 
   // Be paranoid when loading from local storage, and only copy over valid items
@@ -94,6 +95,9 @@ function loadUserSettings(): UserSettings {
     if (typeof x.avoidDoublingBack == "boolean") {
       settings.avoidDoublingBack = x.avoidDoublingBack;
     }
+    if (typeof x.routeSnapperTooltips == "boolean") {
+      settings.routeSnapperTooltips = x.routeSnapperTooltips;
+    }
   } catch (error) {
     console.log(`Couldn't parse userSettings from local storage: ${error}`);
   }

src/types.ts

@@ -122,6 +122,7 @@ export interface UserSettings {
 
   // From the Route tool
   avoidDoublingBack: boolean;
+  routeSnapperTooltips: boolean;
 }
 
 export function isStreetViewImagery(x: string): x is "google" | "bing" {