Only handle events from the top-most layer #359

Author: dabreegster

src/lib/browse/InterventionLayer.svelte

@@ -42,6 +42,7 @@
     {...layerId("interventions-points")}
     filter={["all", isPoint, hideWhileEditing, notEndpoint]}
     manageHoverState
+    eventsIfTopMost
     paint={{
       "circle-color": colorInterventions,
       "circle-radius": circleRadius,
@@ -60,6 +61,7 @@
     {...layerId("interventions-lines")}
     filter={["all", isLine, hideWhileEditing]}
     manageHoverState
+    eventsIfTopMost
     paint={{
       "line-color": colorInterventions,
       "line-width": lineWidth,
@@ -91,6 +93,7 @@
     {...layerId("interventions-polygons")}
     filter={["all", isPolygon, hideWhileEditing]}
     manageHoverState
+    eventsIfTopMost
     paint={{
       "fill-color": colorInterventions,
       "fill-opacity": hoverStateFilter(0.2, 0.5),

src/lib/browse/layers/areas/CensusOutputAreas.svelte

@@ -196,6 +196,7 @@
     layout={{
       visibility: colorBy != "" ? "visible" : "none",
     }}
+    eventsIfTopMost
     manageHoverState
     hoverCursor="pointer"
     on:click={onClick}

src/lib/browse/layers/areas/CombinedAuthorities.svelte

@@ -61,6 +61,7 @@
       visibility: show ? "visible" : "none",
     }}
     manageHoverState
+    eventsIfTopMost
     on:click={onClick}
     hoverCursor="pointer"
   >

src/lib/browse/layers/areas/IMD.svelte

@@ -69,6 +69,7 @@
       visibility: show ? "visible" : "none",
     }}
     manageHoverState
+    eventsIfTopMost
   >
     <Popup let:props>
       <p>

src/lib/browse/layers/areas/LocalAuthorityDistricts.svelte

@@ -61,6 +61,7 @@
       visibility: show ? "visible" : "none",
     }}
     manageHoverState
+    eventsIfTopMost
     on:click={onClick}
     hoverCursor="pointer"
   >

src/lib/browse/layers/areas/LocalPlanningAuthorities.svelte

@@ -82,6 +82,7 @@
       visibility: show ? "visible" : "none",
     }}
     manageHoverState
+    eventsIfTopMost
   >
     <Popup let:props>
       <p>{props.name}</p>

src/lib/browse/layers/areas/ParliamentaryConstituencies.svelte

@@ -69,6 +69,7 @@
       visibility: show ? "visible" : "none",
     }}
     manageHoverState
+    eventsIfTopMost
     on:click={onClick}
     hoverCursor="pointer"
   >

src/lib/browse/layers/areas/Wards.svelte

@@ -61,6 +61,7 @@
       visibility: show ? "visible" : "none",
     }}
     manageHoverState
+    eventsIfTopMost
     on:click={onClick}
     hoverCursor="pointer"
   >

src/lib/browse/layers/lines/BusRoutes.svelte

@@ -63,6 +63,7 @@
       visibility: show ? "visible" : "none",
     }}
     manageHoverState
+    eventsIfTopMost
   >
     <Popup let:props>
       {#if props.has_bus_lane}

src/lib/browse/layers/lines/CyclePaths.svelte

@@ -124,6 +124,7 @@
       visibility: show ? "visible" : "none",
     }}
     manageHoverState
+    eventsIfTopMost
     hoverCursor="pointer"
     on:click={onClick}
   >

src/lib/browse/layers/lines/MajorRoadNetwork.svelte

@@ -46,6 +46,7 @@
     {...layerId(name)}
     sourceLayer={name}
     manageHoverState
+    eventsIfTopMost
     paint={{
       "line-color": color,
       "line-width": 7,

src/lib/browse/layers/lines/PCT.svelte

@@ -126,6 +126,7 @@
     {...layerId(nameSchool)}
     sourceLayer={nameSchool}
     manageHoverState
+    eventsIfTopMost
     paint={{
       "line-color": makeColorRamp(["get", scenario], limits, colorScale),
       "line-width": denseLineWidth,

src/lib/browse/layers/lines/RoadSpeeds.svelte

@@ -87,6 +87,7 @@
     {...layerId(name)}
     sourceLayer={name}
     manageHoverState
+    eventsIfTopMost
     paint={{
       "line-color": makeColorRamp(["get", showSpeed], limits, colorScale),
       "line-width": denseLineWidth,

src/lib/browse/layers/lines/RoadWidths.svelte

@@ -55,6 +55,7 @@
     {...layerId(name)}
     sourceLayer={name}
     manageHoverState
+    eventsIfTopMost
     paint={{
       "line-color": makeColorRamp(["get", "average"], limits, colorScale),
       // TODO Try showing the actual width, in meters and not pixels

src/lib/browse/layers/points/CriticalIssues.svelte

@@ -110,6 +110,7 @@
     {...layerId(`${source}-points`)}
     applyToClusters={false}
     manageHoverState
+    eventsIfTopMost
     paint={{
       "circle-color": color,
       "circle-opacity": hoverStateFilter(0.9, 0.5),

src/lib/browse/layers/points/Crossings.svelte

@@ -90,6 +90,7 @@
       visibility: show ? "visible" : "none",
     }}
     hoverCursor="pointer"
+    eventsIfTopMost
     on:click={onClick}
   >
     <Popup let:props>

src/lib/browse/layers/points/CycleParking.svelte

@@ -60,6 +60,7 @@
       visibility: show ? "visible" : "none",
     }}
     manageHoverState
+    eventsIfTopMost
   >
     <Popup let:props>
       <p>

src/lib/browse/layers/points/PolygonAmenityLayerControl.svelte

@@ -55,6 +55,7 @@
       visibility: show ? "visible" : "none",
     }}
     manageHoverState
+    eventsIfTopMost
   >
     <Popup let:props>
       <p>{props.name ?? `Unnamed ${singularNoun}`}</p>

src/lib/browse/layers/points/VehicleCounts.svelte

@@ -96,6 +96,7 @@
       visibility: show ? "visible" : "none",
     }}
     hoverCursor="pointer"
+    eventsIfTopMost
     on:click={onClick}
   >
     <Popup let:props>