Refactor amenity layer on both pages

a-b-street · May 3, 2024 · b98b48f · b98b48f
1 parent 5e26350
commit b98b48f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 56 deletions.
diff --git a/web/src/AmenityLayer.svelte b/web/src/AmenityLayer.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { notNull } from "./common";
+  import { CircleLayer, hoverStateFilter } from "svelte-maplibre";
+  import { PropertiesTable, Popup } from "svelte-utils";
+</script>
+
+<CircleLayer
+  id="amenities"
+  paint={{
+    "circle-radius": 5,
+    "circle-opacity": 0,
+    "circle-stroke-width": 2,
+    "circle-stroke-color": hoverStateFilter("orange", "red"),
+  }}
+  manageHoverState
+  filter={["has", "amenity_kind"]}
+  on:click={(e) =>
+    window.open(notNull(e.detail.features[0].properties).osm_id, "_blank")}
+  hoverCursor="pointer"
+  eventsIfTopMost
+>
+  <Popup openOn="hover" let:props>
+    <PropertiesTable properties={props} />
+  </Popup>
+</CircleLayer>
diff --git a/web/src/DebugMode.svelte b/web/src/DebugMode.svelte
@@ -1,13 +1,9 @@
 <script lang="ts">
-  import {
-    CircleLayer,
-    GeoJSON,
-    hoverStateFilter,
-    LineLayer,
-  } from "svelte-maplibre";
+  import { GeoJSON, hoverStateFilter, LineLayer } from "svelte-maplibre";
   import { notNull, PickTravelMode } from "./common";
   import SplitComponent from "./SplitComponent.svelte";
   import AmenityList from "./AmenityList.svelte";
+  import AmenityLayer from "./AmenityLayer.svelte";
   import { PropertiesTable, Popup } from "svelte-utils";
   import { mode, model, type TravelMode, filterForMode } from "./stores";
 
@@ -49,26 +45,7 @@
         </Popup>
       </LineLayer>
 
-      <CircleLayer
-        id="amenities"
-        paint={{
-          "circle-radius": 10,
-          "circle-color": hoverStateFilter("cyan", "red"),
-        }}
-        manageHoverState
-        filter={["has", "amenity_kind"]}
-        on:click={(e) =>
-          window.open(
-            notNull(e.detail.features[0].properties).osm_id,
-            "_blank",
-          )}
-        hoverCursor="pointer"
-        eventsIfTopMost
-      >
-        <Popup openOn="hover" let:props>
-          <PropertiesTable properties={props} />
-        </Popup>
-      </CircleLayer>
+      <AmenityLayer />
     </GeoJSON>
   </div>
 </SplitComponent>
diff --git a/web/src/IsochroneMode.svelte b/web/src/IsochroneMode.svelte
@@ -1,18 +1,13 @@
 <script lang="ts">
+  import AmenityLayer from "./AmenityLayer.svelte";
   import AmenityList from "./AmenityList.svelte";
   import { colorScale } from "./colors";
   import type { FeatureCollection } from "geojson";
-  import {
-    GeoJSON,
-    CircleLayer,
-    hoverStateFilter,
-    LineLayer,
-    Marker,
-  } from "svelte-maplibre";
+  import { GeoJSON, LineLayer, Marker } from "svelte-maplibre";
   import SplitComponent from "./SplitComponent.svelte";
   import { mode, model, type TravelMode, filterForMode } from "./stores";
   import { makeColorRamp, PickTravelMode, notNull } from "./common";
-  import { PropertiesTable, SequentialLegend, Popup } from "svelte-utils";
+  import { SequentialLegend, Popup } from "svelte-utils";
 
   let travelMode: TravelMode = "foot";
 
@@ -106,28 +101,7 @@
           </Popup>
         </LineLayer>
 
-        <CircleLayer
-          id="amenities"
-          paint={{
-            "circle-radius": 5,
-            "circle-opacity": 0,
-            "circle-stroke-width": 2,
-            "circle-stroke-color": hoverStateFilter("orange", "red"),
-          }}
-          manageHoverState
-          filter={["has", "amenity_kind"]}
-          on:click={(e) =>
-            window.open(
-              notNull(e.detail.features[0].properties).osm_id,
-              "_blank",
-            )}
-          hoverCursor="pointer"
-          eventsIfTopMost
-        >
-          <Popup openOn="hover" let:props>
-            <PropertiesTable properties={props} />
-          </Popup>
-        </CircleLayer>
+        <AmenityLayer />
       </GeoJSON>
     {/if}
   </div>