First look at changing to icons for some layers

acteng · Feb 22, 2024 · cc6c2e3 · cc6c2e3
1 parent 260ac7e
commit cc6c2e3
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 39 deletions.
diff --git a/assets/bicycle_parking.png b/assets/bicycle_parking.png
diff --git a/assets/railway_station.png b/assets/railway_station.png
diff --git a/assets/train.png b/assets/train.png
diff --git a/src/lib/browse/layers/SequentialLegend.svelte b/src/lib/browse/layers/SequentialLegend.svelte
@@ -3,7 +3,7 @@
   export let limits: any[];
 </script>
 
-<div style="display: flex">
+<div style="display: flex; padding-left:15px; padding-right:15px;">
   {#each colorScale as color}
     <span style="background: {color}; width: 100%; border: 1px solid black;">
       &nbsp;
@@ -12,6 +12,6 @@
 </div>
 <div style="display: flex; justify-content: space-between;">
   {#each limits as limit}
-    <span>{limit}</span>
+    <span style="flex-grow: 1; flex-shrink: 1; text-align:center;">{limit}</span>
   {/each}
 </div>
diff --git a/src/lib/browse/layers/points/CycleParking.svelte b/src/lib/browse/layers/points/CycleParking.svelte
@@ -1,25 +1,23 @@
 <script lang="ts">
   import {
-    ColorLegend,
     ExternalLink,
     HelpButton,
     Popup,
     publicResourceBaseUrl,
   } from "lib/common";
+  import cycleParking from "../../../../../assets/bicycle_parking.png?url";
   import { Checkbox } from "lib/govuk";
   import { layerId } from "lib/maplibre";
-  import { CircleLayer, VectorTileSource } from "svelte-maplibre";
-  import { colors } from "../../colors";
+  import { SymbolLayer, VectorTileSource } from "svelte-maplibre";
   import OsmLicense from "../OsmLicense.svelte";
 
   let name = "cycle_parking";
-  let color = colors.cycle_parking;
 
   let show = false;
 </script>
 
 <Checkbox bind:checked={show}>
-  <ColorLegend {color} />
+  <img src={cycleParking} />
   Cycle parking
   <span slot="right">
     <HelpButton>
@@ -31,6 +29,9 @@
         </ExternalLink> (as of 9 August 2023). The type of parking, public/private
         access, and whether it's covered are not shown.
       </p>
+      <p>
+        Icon from <a href="https://github.com/gravitystorm/openstreetmap-carto?tab=License-1-ov-file#readme">OpenStreetMap Carto</a>
+      </p>
       <OsmLicense />
     </HelpButton>
   </span>
@@ -39,33 +40,20 @@
 <VectorTileSource
   url={`pmtiles://${publicResourceBaseUrl()}/v1/${name}.pmtiles`}
 >
-  <CircleLayer
+  <SymbolLayer
     {...layerId(name)}
     sourceLayer={name}
-    paint={{
-      "circle-color": color,
-      "circle-radius": [
-        "interpolate",
-        ["linear"],
-        ["zoom"],
-        1,
-        2,
-        8,
-        3,
-        13,
-        10,
-      ],
-    }}
     layout={{
+      "icon-image": "cycle_parking",
+      "icon-size": 1.0,
+      "icon-allow-overlap": true,
       visibility: show ? "visible" : "none",
     }}
-    manageHoverState
-    eventsIfTopMost
   >
     <Popup let:props>
       <p>
         Capacity: <b>{props.capacity ?? "unknown"}</b>
       </p>
     </Popup>
-  </CircleLayer>
+  </SymbolLayer>
 </VectorTileSource>
diff --git a/src/lib/browse/layers/points/RailwayStations.svelte b/src/lib/browse/layers/points/RailwayStations.svelte
@@ -1,26 +1,23 @@
 <script lang="ts">
-  import { circleRadius } from "colors";
   import {
-    ColorLegend,
     ExternalLink,
     HelpButton,
     Popup,
     publicResourceBaseUrl,
   } from "lib/common";
+  import railwayStation from "../../../../../assets/train.png?url";
   import { Checkbox } from "lib/govuk";
   import { layerId } from "lib/maplibre";
-  import { CircleLayer, GeoJSON } from "svelte-maplibre";
-  import { colors } from "../../colors";
+  import { GeoJSON, SymbolLayer } from "svelte-maplibre";
   import OsmLicense from "../OsmLicense.svelte";
 
   let name = "railway_stations";
-  let color = colors.railway_stations;
 
   let show = false;
 </script>
 
 <Checkbox bind:checked={show}>
-  <ColorLegend {color} />
+  <img src={railwayStation} />
   Railway Stations
   <span slot="right">
     <HelpButton>
@@ -37,18 +34,17 @@
 </Checkbox>
 
 <GeoJSON data={`${publicResourceBaseUrl()}/v1/${name}.geojson`}>
-  <CircleLayer
+  <SymbolLayer
     {...layerId(name)}
-    paint={{
-      "circle-color": color,
-      "circle-radius": circleRadius / 2,
-    }}
     layout={{
+      "icon-image": "railway_station",
+      "icon-size": 1,
+      "icon-allow-overlap": true,
       visibility: show ? "visible" : "none",
     }}
   >
     <Popup let:props>
       <p>{props.name ?? "Unnamed railway station"}</p>
     </Popup>
-  </CircleLayer>
+  </SymbolLayer>
 </GeoJSON>
diff --git a/src/lib/common/MapLibreMap.svelte b/src/lib/common/MapLibreMap.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import chevron from "../../../assets/chevron.png?url";
   import { getStyleSpecification } from "lib/maplibre";
   import {
     Map,
@@ -9,6 +8,9 @@
   import { map as mapStore } from "stores";
   import { onMount, setContext } from "svelte";
   import { MapLibre, NavigationControl, ScaleControl } from "svelte-maplibre";
+  import cycleParking from "../../../assets/bicycle_parking.png?url";
+  import chevron from "../../../assets/chevron.png?url";
+  import railwayStation from "../../../assets/train.png?url";
 
   export let style: string;
   export let startBounds: LngLatBoundsLike | undefined = undefined;
@@ -56,7 +58,11 @@
       bind:loaded
       bind:map
       on:error={onError}
-      images={[{ id: "chevron", url: chevron }]}
+      images={[
+        { id: "chevron", url: chevron },
+        { id: "cycle_parking", url: cycleParking },
+        { id: "railway_station", url: railwayStation},
+      ]}
     >
       {#if $mapStore}
         <ScaleControl />