From 17821bff6c6bbbeedde1a11c862bad3f6e4bd186 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Mon, 8 Jul 2024 15:43:40 +0200
Subject: [PATCH] Move streetview highlighting into config

---
 README.md                            |  5 ++-
 src/lib/common/StreetViewTool.svelte |  5 +--
 src/lib/config.ts                    |  5 ++-
 src/lib/maplibre/highlight_roads.ts  | 57 ----------------------------
 src/lib/maplibre/index.ts            |  1 -
 src/routes/+page.svelte              |  2 +
 6 files changed, 12 insertions(+), 63 deletions(-)
 delete mode 100644 src/lib/maplibre/highlight_roads.ts

diff --git a/README.md b/README.md
index 2fd3b71..765669b 100644
--- a/README.md
+++ b/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.
diff --git a/src/lib/common/StreetViewTool.svelte b/src/lib/common/StreetViewTool.svelte
index ec3cd81..fa7b9f1 100644
--- a/src/lib/common/StreetViewTool.svelte
+++ b/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"),
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 916e57e..377bd51 100644
--- a/src/lib/config.ts
+++ b/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) => [],
 };
diff --git a/src/lib/maplibre/highlight_roads.ts b/src/lib/maplibre/highlight_roads.ts
deleted file mode 100644
index e216cfa..0000000
--- a/src/lib/maplibre/highlight_roads.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Map } from "maplibre-gl";
-
-// Each basemap style uses different layer IDs for roads and paths
-export function getRoadLayerNames(map: Map, mapStyle: string): string[] {
-  // The styles may change over time. Guarantee we only return valid line layers.
-  let availableLayers = new Set(
-    map
-      .getStyle()
-      .layers.filter((l) => l.type == "line")
-      .map((l) => l.id),
-  );
-
-  // Maptiler cases
-  if (mapStyle == "dataviz") {
-    return ["Road network", "Path"].filter((l) => availableLayers.has(l));
-  }
-  if (mapStyle == "hybrid") {
-    return ["Path", "Road", "Tunnel"].filter((l) => availableLayers.has(l));
-  }
-  if (mapStyle == "streets") {
-    let layers = [];
-    for (let outer of ["road", "bridge", "tunnel"]) {
-      for (let inner of [
-        "link",
-        "minor",
-        "minor_construction",
-        "motorway",
-        "motorway_construction",
-        "motorway_link",
-        "path_pedestrian",
-        "secondary_tertiary",
-        "secondary_tertiary_construction",
-        "service_track",
-        "service_track_construction",
-        "street",
-        "trunk_primary",
-        "trunk_primary_construction",
-        "trunk_primary_link",
-      ]) {
-        layers.push(`${outer}_${inner}`);
-      }
-    }
-    return layers.filter((l) => availableLayers.has(l));
-  }
-  if (mapStyle == "uk-openzoomstack-light") {
-    return map
-      .getStyle()
-      .layers.filter(
-        // @ts-expect-error source-layer is present
-        (layer) => layer["source-layer"] == "roads" && layer.type == "line",
-      )
-      .map((layer) => layer.id);
-  }
-
-  // OS and Bluesky raster layers don't have anything we can use
-  return [];
-}
diff --git a/src/lib/maplibre/index.ts b/src/lib/maplibre/index.ts
index 6c160a0..be79288 100644
--- a/src/lib/maplibre/index.ts
+++ b/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/
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 39771b6..60b79ee 100644
--- a/src/routes/+page.svelte
+++ b/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">