Show all parking in the score mode. #5

web/src/App.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import "@picocss/pico/css/pico.jade.min.css";
+  import cycleParking from "../assets/bicycle_parking.png?url";
   import logoDark from "../assets/logo_dark.svg?url";
   import About from "./About.svelte";
   import { notNull } from "svelte-utils";
@@ -128,6 +129,11 @@
       standardControls
       hash
       bind:map
+      images={[{ id: "cycle_parking", url: cycleParking }]}
+      on:error={(e) => {
+        // @ts-expect-error ErrorEvent isn't exported
+        console.log(e.detail.error);
+      }}
     >
       <Geocoder {map} apiKey={maptilerApiKey} />
       <div bind:this={mapDiv} />

web/src/ScoreMode.svelte

@@ -8,14 +8,16 @@
     CircleLayer,
     LineLayer,
     hoverStateFilter,
+    SymbolLayer,
   } from "svelte-maplibre";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { backend, type ScoreProps } from "./stores";
-  import { SequentialLegend } from "svelte-utils";
+  import { SequentialLegend, notNull } from "svelte-utils";
   import { makeColorRamp } from "svelte-utils/map";
 
   let loading: string[] = [];
   let poiKinds: string[] = [];
+  let showParking = true;
 
   let gj: FeatureCollection<Point, ScoreProps> | null = null;
 
@@ -92,6 +94,11 @@
 
     <SequentialLegend {colorScale} {limits} />
 
+    <label>
+      <input type="checkbox" bind:checked={showParking} />
+      Show parking
+    </label>
+
     <p>
       This is an early experiment of a mode to show an "access score". Right
       now, it's starting from every POI based on the types chosen below and
@@ -101,6 +108,12 @@
       and the time to walk doesn't take into account the side of the road or
       walking partly down some road.
     </p>
+    <p>
+      Parking icon from <a
+        href="https://github.com/gravitystorm/openstreetmap-carto"
+        target="_blank">OpenStreetMap Carto</a
+      >
+    </p>
   </div>
   <div slot="map">
     {#if gj}
@@ -114,7 +127,6 @@
           }}
           manageHoverState
           bind:hovered={hoveredAmenity}
-          eventsIfTopMost
         />
       </GeoJSON>
     {/if}
@@ -130,5 +142,19 @@
         />
       </GeoJSON>
     {/if}
+
+    {#await notNull($backend).renderDebug() then data}
+      <GeoJSON {data}>
+        <SymbolLayer
+          filter={["==", ["get", "amenity_kind"], "bicycle_parking"]}
+          layout={{
+            "icon-image": "cycle_parking",
+            "icon-size": 1.0,
+            "icon-allow-overlap": true,
+            visibility: showParking ? "visible" : "none",
+          }}
+        />
+      </GeoJSON>
+    {/await}
   </div>
 </SplitComponent>