Move streetview highlighting into config

README.md

@@ -37,5 +37,8 @@ TODO: Document all of these
 - upgrade packages
 - consider renaming "intervention" and "scheme"
 - coverage polygons in InterventionLayer
-- can we totally remove mapStyle from this library and let streetview tool use a config hook instead?
 - baselayer switcher at bottom of sidebar
+
+## Developer guide
+
+This is a fairly standard Sveltekit project. `src/lib` is the library meant for use by others, and `src/routes` is a demo site using it. `npm i`, then `npm run dev` to develop locally.

src/lib/common/StreetViewTool.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
   import { CollapsibleCard, Radio, SecondaryButton } from "govuk-svelte";
-  import { getRoadLayerNames } from "$lib/maplibre";
   import type { MapMouseEvent } from "maplibre-gl";
   import { map } from "$lib/config";
   import { userSettings } from "$lib/draw/stores";
-  import { mapStyle } from "$lib/config";
   import { onDestroy } from "svelte";
   import cameraCursorUrl from "$lib/assets/camera_cursor.svg?url";
   import StreetViewHelp from "./StreetViewHelp.svelte";
+  import { cfg } from "$lib/config";
 
   export let enabled: boolean;
   export let showControls = true;
@@ -21,7 +20,7 @@
     $map.on("click", onClick);
     $map.getCanvas().style.cursor = `url(${cameraCursorUrl}), auto`;
 
-    for (let layer of getRoadLayerNames($map, $mapStyle)) {
+    for (let layer of cfg.getStreetViewRoadLayerNames($map)) {
       defaultLineColorPerLayer.push([
         layer,
         $map.getPaintProperty(layer, "line-color"),

src/lib/config.ts

@@ -10,7 +10,6 @@ import { SvelteComponent, type ComponentType } from "svelte";
 import type { Map } from "maplibre-gl";
 
 export let map: Writable<Map | null> = writable(null);
-export const mapStyle: Writable<string> = writable("dataviz");
 
 // The draw code should be agnostic to the feature properties that differ by
 // schema. Start centralizing the logic here, so it's easy for other users to
@@ -65,4 +64,8 @@ export let cfg = {
 
   // Required for the geocoder in the route mote to work
   maptilerApiKey: "",
+
+  // When the StreetView tool is activated, line layers with these IDs will be
+  // highlighted. This depends on the basemap.
+  getStreetViewRoadLayerNames: (map: Map) => [],
 };

src/lib/maplibre/index.ts

@@ -1,4 +1,3 @@
-export { getRoadLayerNames } from "./highlight_roads";
 export { layerId } from "./zorder";
 
 // Helpers for https://maplibre.org/maplibre-gl-js-docs/style-spec/

src/routes/+page.svelte

@@ -62,6 +62,8 @@
   cfg.editFeatureForm = ExampleFeatureForm;
   cfg.editSchemeForm = ExampleSchemeForm;
   cfg.maptilerApiKey = apiKey;
+  // Just one from the dataviz basemap, as an example
+  cfg.getStreetViewRoadLayerNames = (map) => ["Road network"];
 </script>
 
 <div style="display: flex; height: 100vh">