Merge branch 'atip_layers'

bin/download-local-dev-data.sh

@@ -27,6 +27,6 @@ jq '.features[] | .properties.kind + "_" + .properties.name' ../../data_prep/sco
     download_to_subdir cnt_demand "https://assets.od2net.org/cnt_demand/demand_$x.bin"
 done
 
-for x in cbd.pmtiles gp_practices.geojson hospitals.geojson population.pmtiles route_network.pmtiles schools.geojson; do
+for x in bus_routes.pmtiles cbd.pmtiles gp_practices.geojson hospitals.geojson population.pmtiles railways.geojson route_network.pmtiles schools.geojson; do
     download_to_subdir cnt_layers https://assets.od2net.org/cnt_layers/$x
 done

data_prep/scotland/get_reference_layers.sh

@@ -35,22 +35,59 @@ function gp_and_hospitals {
           -sql 'SELECT sitename AS name FROM "NHS_Hospitals_-_Scotland"'
 
   # The bboxes or something else included are breaking parsing, so clean these up
-  jq '{ type: "FeatureCollection", features: [.features[] | { type: "Feature", geometry: .geometry, properties: { name: .properties.name } }] }' tmp/gp_practices.geojson > tmp.gj
-  mv -f tmp.gj $OUT/gp_practices.geojson
+  jq '{ type: "FeatureCollection", features: [.features[] | { type: "Feature", geometry: .geometry, properties: { name: .properties.name } }] }' tmp/gp_practices.geojson > $OUT/gp_practices.geojson
 
-  jq '{ type: "FeatureCollection", features: [.features[] | { type: "Feature", geometry: .geometry, properties: { name: .properties.name } }] }' tmp/hospitals.geojson > tmp.gj
-  mv -f tmp.gj $OUT/hospitals.geojson
+  jq '{ type: "FeatureCollection", features: [.features[] | { type: "Feature", geometry: .geometry, properties: { name: .properties.name } }] }' tmp/hospitals.geojson > $OUT/hospitals.geojson
 }
 
 function cbd {
   wget https://nptscot.blob.core.windows.net/pmtiles/cbd_layer_2024-12-01.pmtiles -O $OUT/cbd.pmtiles
 }
 
+function railway_stations {
+  get_scotland_osm
+  osmium tags-filter tmp/scotland-latest.osm.pbf n/railway=station -o tmp/railways.osm.pbf
+  osmium export tmp/railways.osm.pbf -o tmp/railways.geojson
+  # Strip most tags
+  jq '{ type: "FeatureCollection", features: [.features[] | { type: "Feature", geometry: .geometry, properties: { name: .properties.name } }] }' tmp/railways.geojson > $OUT/railways.geojson
+}
+
+function bus_routes {
+  get_scotland_osm
+  # Bus routes are represented as relations. Note many routes cross the same
+  # way, but osmium only outputs the way once when we export to GeoJSON
+  osmium tags-filter tmp/scotland-latest.osm.pbf r/route=bus -o tmp/bus_routes.osm.pbf
+  # The relations also include stop positions as points. Only keep LineStrings,
+  # representing roads.
+  osmium export tmp/bus_routes.osm.pbf --geometry-type=linestring -o tmp/bus_routes_v1.geojson
+  # Strip all tags
+  jq '{ type: "FeatureCollection", features: [.features[] | { type: "Feature", geometry: .geometry, properties: {} }] }' tmp/bus_routes_v1.geojson > tmp/bus_routes_v2.geojson
+  tippecanoe tmp/bus_routes_v2.geojson -zg -l bus_routes -o $OUT/bus_routes.pmtiles
+}
+
+function get_scotland_osm {
+  # Download Scotland OSM data
+  if [ ! -f tmp/scotland-latest.osm.pbf ]; then
+    download_to_subdir tmp https://download.geofabrik.de/europe/united-kingdom/scotland-latest.osm.pbf
+  fi
+}
+
+download_to_subdir() {
+  local subdir=$1
+  local url=$2
+
+  mkdir -p "$subdir"
+  (wget -P "$subdir" --timestamping "$url" && echo "✅ $url") \
+    || echo "❌ Download failed: $url"
+}
+
 # Uncomment each as needed
 #route_network
 #schools
 #gp_and_hospitals ~/Downloads/GP_Practices_-_Scotland.json ~/Downloads/NHS_Hospitals_-_Scotland.json
 #cbd
+#railway_stations
+#bus_routes
 
 echo "For maintainer only:"
 echo "  mv $OUT/* ~/cloudflare_sync/cnt_layers/"

web/assets/README.md

@@ -1 +1,2 @@
-Material Design icons from <https://material.io/resources/icons>, Apache license
+- Material Design icons from <https://material.io/resources/icons>, Apache license
+- National Rail logo from [Wikipedia](https://en.m.wikipedia.org/wiki/File:National_Rail_logo.svg), public domain

web/src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import onewayArrowUrl from "../assets/arrow.png?url";
   import logo from "../assets/logo.svg?url";
+  import nationalRailUrl from "../assets/national_rail.png?url";
   import About from "./About.svelte";
   import ContextualLayers from "./context/ContextualLayers.svelte";
   import "@picocss/pico/css/pico.conditional.jade.min.css";
@@ -146,9 +147,13 @@
           url: `${import.meta.env.BASE_URL}/filters/diagonal_filter_icon.png`,
         },
         {
-          id: "oneway-arrow",
+          id: "oneway_arrow",
           url: onewayArrowUrl,
         },
+        {
+          id: "national_rail",
+          url: nationalRailUrl,
+        },
       ]}
     >
       <NavigationControl />

web/src/common/zorder.ts

@@ -117,9 +117,11 @@ const layerZorder = [
   "context-los",
   "context-existing-infra",
   "context-route-network",
+  "context-bus-routes",
   "context-gp-practices",
   "context-hospitals",
   "context-schools",
+  "context-railway-stations",
 
   dataviz("Road labels"),
   streets("road_label"),

web/src/context/BusRoutes.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { LineLayer, VectorTileSource } from "svelte-maplibre";
+  import { HelpButton, layerId, roadLineWidth } from "../common";
+  import { assetUrl } from "../stores";
+
+  let show = false;
+</script>
+
+<button class="secondary" on:click={() => (show = !show)}>Bus routes</button>
+{#if show}
+  <HelpButton>
+    <p>
+      These are all <a
+        href="https://wiki.openstreetmap.org/wiki/Tag:route%3Dbus"
+        target="_blank"
+      >
+        bus routes
+      </a>
+      according to OpenStreetMap.
+    </p>
+  </HelpButton>
+{/if}
+
+<VectorTileSource
+  url={`pmtiles://${assetUrl("cnt_layers/bus_routes.pmtiles")}`}
+>
+  <LineLayer
+    {...layerId("context-bus-routes")}
+    sourceLayer="bus_routes"
+    paint={{
+      "line-color": "blue",
+      "line-width": roadLineWidth(0),
+    }}
+    layout={{
+      visibility: show ? "visible" : "none",
+    }}
+  />
+</VectorTileSource>

web/src/context/ContextualLayers.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { Control } from "svelte-maplibre";
   import icon from "../../assets/layers.svg?url";
+  import BusRoutes from "./BusRoutes.svelte";
   import CBD from "./CBD.svelte";
   import POIs from "./POIs.svelte";
+  import RailwayStations from "./RailwayStations.svelte";
   import RouteNetwork from "./RouteNetwork.svelte";
 
   let expand = false;
@@ -23,6 +25,8 @@
       style:visibility={expand ? "visible" : "collapse"}
     >
       <POIs />
+      <RailwayStations />
+      <BusRoutes />
       <CBD />
       <RouteNetwork />
     </div>

web/src/context/RailwayStations.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { GeoJSON, SymbolLayer } from "svelte-maplibre";
+  import { Popup } from "svelte-utils/map";
+  import nationalRailUrl from "../../assets/national_rail.png?url";
+  import { HelpButton, layerId } from "../common";
+  import { assetUrl } from "../stores";
+
+  let show = false;
+</script>
+
+<button class="secondary" on:click={() => (show = !show)}>
+  Railway stations
+</button>
+{#if show}
+  <div>
+    <img src={nationalRailUrl} alt="National Rail logo" />
+    <HelpButton>
+      <p>
+        These are all <a
+          href="https://wiki.openstreetmap.org/wiki/Tag:railway%3Dstation"
+          target="_blank"
+        >
+          railway stations
+        </a>
+        according to OpenStreetMap.
+      </p>
+    </HelpButton>
+  </div>
+{/if}
+
+<GeoJSON data={assetUrl("cnt_layers/railways.geojson")} generateId>
+  <SymbolLayer
+    {...layerId("context-railway-stations")}
+    layout={{
+      "icon-image": "national_rail",
+      "icon-size": 1,
+      "icon-allow-overlap": true,
+      visibility: show ? "visible" : "none",
+    }}
+  >
+    <Popup let:props>
+      <p>{props.name ?? "Unnamed railway station"}</p>
+    </Popup>
+  </SymbolLayer>
+</GeoJSON>

web/src/layers/OneWayLayer.svelte

@@ -14,7 +14,7 @@
     ["!=", ["get", "direction"], "both"],
   ]}
   layout={{
-    "icon-image": "oneway-arrow",
+    "icon-image": "oneway_arrow",
     "icon-size": 1.0,
     "symbol-placement": "line",
     "symbol-spacing": 50,