Disable interactive layers during street view use

src/lib/browse/LayerControls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { interactiveMapLayersEnabled } from "../../stores";
   import { BaselayerSwitcher, CollapsibleCard } from "../common";
   import StreetViewController from "../common/StreetViewController.svelte";
   import { CheckboxGroup } from "../govuk";
@@ -51,6 +52,9 @@
     <CensusOutputAreaLayerControl />
     <ImdLayerControl />
   </CollapsibleCard>
-  <StreetViewController displayEnableButton={true} />
+  <StreetViewController
+    displayEnableButton={true}
+    bind:isInactive={$interactiveMapLayersEnabled}
+  />
   <BaselayerSwitcher {style} />
 </CollapsibleCard>

src/lib/common/InteractiveLayer.svelte

@@ -6,6 +6,7 @@
   } from "maplibre-gl";
   import { createEventDispatcher, onDestroy, onMount } from "svelte";
   import { map } from "../../stores";
+  import { interactiveMapLayersEnabled } from "../../stores";
 
   const dispatch = createEventDispatcher<{
     click: MapGeoJSONFeature;
@@ -63,6 +64,9 @@
   }
 
   function onMouseMove(e: MapLayerMouseEvent) {
+    if(!$interactiveMapLayersEnabled) {
+      return;
+    }
     let features = e.features ?? [];
     if (features.length == 0) {
       return;
@@ -118,6 +122,9 @@
   }
 
   function onClick(e: MapLayerMouseEvent) {
+    if(!$interactiveMapLayersEnabled) {
+      return;
+    }
     let features = e.features ?? [];
     if (features.length > 0) {
       // Same problem as onMouseMove -- every overlapping InteractiveLayer will

src/lib/common/StreetViewController.svelte

@@ -7,14 +7,14 @@
   import { getRoadLayerHelpers, type LayerHelper } from "../maplibre";
   import CollapsibleCard from "./CollapsibleCard.svelte";
 
-
   export let displayEnableButton: boolean = false;
   export let escapeKeyExits: boolean = false;
   const roadLayerHelpers: Array<LayerHelper> = getRoadLayerHelpers();
-  let isActive: boolean;
+  export let isInactive: boolean;
+
 
   export const handleMapClickEvent = (e: MapMouseEvent) => {
-    if (isActive) {
+    if (!isInactive) {
       let lon = e.lngLat.lng;
       let lat = e.lngLat.lat;
       if ($userSettings.streetViewImagery == "google") {
@@ -32,7 +32,7 @@
   };
 
   export function enableStreetView() {
-    isActive = true;
+    isInactive = false;
     $map.on("click", handleMapClickEvent);
     const cursorStyle = `url(${cameraCursorUrl}), auto`;
     console.log(cursorStyle);
@@ -43,7 +43,7 @@
   }
 
   export function disableStreetView() {
-    isActive = false;
+    isInactive = true;
     $map.off("click", handleMapClickEvent);
     $map.getCanvas().style.cursor = "inherit";
     roadLayerHelpers.forEach((roadLayerHelper) => {
@@ -53,7 +53,7 @@
 </script>
 
 {#if displayEnableButton}
-  {#if !isActive}
+  {#if isInactive}
     <SecondaryButton on:click={enableStreetView}>
       Enable Street View
     </SecondaryButton>
@@ -63,7 +63,7 @@
     </SecondaryButton>
   {/if}
 {/if}
-{#if isActive}
+{#if !isInactive}
   <Radio
     legend="Source"
     id="streetViewImagery"
@@ -75,7 +75,7 @@
   />
 
   <CollapsibleCard label="Help">
-    <ul >
+    <ul>
       <li>
         <b>Click</b>
         on the map to open a new tab with a 3rd-party imagery provider
@@ -88,7 +88,11 @@
         </li>
       {/if}
       <li>
-        Cursor by <a href="https://icon-icons.com/icon/screenshot-cursor-camera/100181">Luc Chaissac</a>
+        Cursor by <a
+          href="https://icon-icons.com/icon/screenshot-cursor-camera/100181"
+        >
+          Luc Chaissac
+        </a>
       </li>
     </ul>
   </CollapsibleCard>

src/stores.ts

@@ -42,6 +42,8 @@ export const currentMode: Writable<Mode> = writable("edit-attribute");
 // This is used to represent whether a tool is in use for the purpose of disabling buttons such as clear all
 export const isAToolInUse: Writable<boolean> = writable(false);
 
+export const interactiveMapLayersEnabled: Writable<boolean> = writable(true);
+
 // All feature IDs must:
 //
 // - be unique