Icon layers (#479)

* First look at changing to icons for some layers

* Add attribution to railway station logo

* remove unused icon

* Address PR Comments

* A couple of final cleanup changes

* Change icon on map

---------

Co-authored-by: Peter York <peter.york@dft.gov.uk>

src/lib/browse/colors.ts

@@ -13,15 +13,13 @@ export const colors = {
   mrn: "#006478",
   national_cycle_network: "#640078",
   sports_spaces: "#013220",
-  railway_stations: "#A52A2A",
   parliamentary_constituencies: "#006E59",
   wards: "purple",
   combined_authorities: "cyan",
   local_authority_districts: "orange",
   local_planning_authorities: "red",
   bus_route_with_lane: "#9362BA",
   bus_route_without_lane: "#C2A6D8",
-  cycle_parking: "black",
   trams: "black",
   signalized_crossing: "green",
   other_crossing: "black",

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

@@ -1,25 +1,23 @@
 <script lang="ts">
   import {
-    ColorLegend,
     ExternalLink,
     HelpButton,
     Popup,
     publicResourceBaseUrl,
   } from "lib/common";
   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 cycleParking from "../../../../../assets/bicycle_parking.png?url";
   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} alt="a logo representing cycle parking" />
   Cycle parking
   <span slot="right">
     <HelpButton>
@@ -31,6 +29,11 @@
         </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">
+          OpenStreetMap Carto
+        </a>
+      </p>
       <OsmLicense />
     </HelpButton>
   </span>
@@ -39,33 +42,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>

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 { 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 railwayStation from "../../../../../assets/railway_station.png?url";
   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} alt="A logo representing a train" />
   Railway Stations
   <span slot="right">
     <HelpButton>
@@ -31,24 +28,26 @@
           railway station
         </ExternalLink> data from OpenStreetMap (as of 9 August 2023).
       </p>
+      <p>
+        Icon from <a href="https://www.nationalrail.co.uk/">National Rail</a>
+      </p>
       <OsmLicense />
     </HelpButton>
   </span>
 </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>

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/railway_station.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 />