Add amtrak train live location layer

layers/amtrak-live/layer.js

@@ -0,0 +1,39 @@
+import VectorLayer from 'ol/layer/Vector';
+import {Vector as VectorSource} from 'ol/source.js';
+
+import {Style} from 'ol/style.js';
+import Icon from 'ol/style/Icon.js';
+
+import pinURL from './pin.svg?url';
+import { Feature } from 'ol';
+import { Point } from 'ol/geom';
+import { fromLonLat } from 'ol/proj';
+
+const vectorLayer = new VectorLayer({
+    source: new VectorSource({
+      loader: async function() {
+        const res = await fetch("https://api-v3.amtraker.com/v3/trains");
+        const trainsByRoute = await res.json();
+
+        for (let [_route, trains] of Object.entries(trainsByRoute)) {
+          for (let train of trains) {
+            const {stations: _, ...trainWithoutStations} = train;
+            this.addFeature(new Feature({
+              geometry: new Point(fromLonLat([train.lon, train.lat])),
+              ...trainWithoutStations,
+            }))
+          }
+        }
+      },
+    }),
+    style: new Style({
+        image: new Icon({
+            anchor: [0.5, .9],
+            src: pinURL,
+        }),
+    }),
+});
+
+setInterval(() => vectorLayer.getSource().refresh(), 30000);
+
+export default vectorLayer;

layers/amtrak-live/pin.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- https://www.svgrepo.com/svg/31379/train -->
+<svg
+   viewBox="0 0 456.459 456.459"
+   width="40px"
+   height="30px"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg">
+<path fill="#00537e"
+   d="M450.288,356.851l-47.455-34.558c24.679-16.312,40.427-44.298,40.427-74.996c0-45.823-34.494-83.743-78.881-89.157V78.077
+   h3.982c3.036,0,6.199-2.463,6.199-5.5v-12c0-3.037-3.163-5.5-6.199-5.5h-71.667c-3.036,0-5.5,2.463-5.5,5.5v12
+   c0,3.037,2.464,5.5,5.5,5.5h4.688v79.401h-108.44V83.704c0-8.284-6.716-15-15-15H15.001c-5.873,0-11.205,3.427-13.645,8.769
+   c-2.44,5.342-1.537,11.616,2.309,16.055l34.426,39.73v188.86c0,7.484,5.488,13.671,12.656,14.799
+   c1.255,35.758,30.717,64.465,66.773,64.465c31.693,0,58.285-22.184,65.114-51.833h47.324c6.829,29.649,33.421,51.833,65.113,51.833
+   c17.285,0,33.06-6.598,44.937-17.404h101.448c6.495,0,12.254-4.182,14.265-10.357C457.731,367.442,455.539,360.674,450.288,356.851
+   z M117.521,349.548h25.471c-5.15,8.713-14.637,14.573-25.471,14.573c-16.307,0-29.574-13.269-29.574-29.574
+   s13.268-29.571,29.574-29.571c10.834,0,20.321,5.859,25.472,14.572h-25.472c-8.284,0-15,6.717-15,15
+   C102.521,342.832,109.237,349.548,117.521,349.548z M152.744,199.595H78.449v-90h74.295V199.595z M295.073,364.122
+   c-10.834,0-20.319-5.859-25.471-14.573h25.469c8.284,0,15-6.716,15-15s-6.716-15-15-15h-25.47
+   c5.15-8.713,14.638-14.573,25.472-14.573c16.307,0,29.571,13.268,29.571,29.572C324.645,350.854,311.379,364.122,295.073,364.122z"
+/>
+</svg>

layers/index.js

@@ -3,7 +3,8 @@ import OSM from 'ol/source/OSM';
 import StadiaMaps from 'ol/source/StadiaMaps.js';
 
 import chandlerLayer from './chandler/layer.js';
-import amtrakLayer from './amtrak/layer.js';
+import amtrakRoutesLayer from './amtrak-routes/layer.js';
+import amtrakLiveLayer from './amtrak-live/layer';
 import viarailLayer from './viarail/layer.js';
 import arenasLayer from './nhl-arenas/layer.js';
 import bikepackingLayer from './bikepacking/layer.js';
@@ -67,7 +68,11 @@ const layerCategories = [
             },
             {
                 name: "Amtrak Routes",
-                layer: amtrakLayer,
+                layer: amtrakRoutesLayer,
+            },
+            {
+                name: "Amtrak Trains (live-ish)",
+                layer: amtrakLiveLayer,
             },
             {
                 name: "Via Rail Routes",