new stuff!

static/js/main.js

@@ -1,6 +1,7 @@
 import * as shapes from "./shapes.js";
 import protobuf from "https://cdn.jsdelivr.net/npm/protobufjs@8.0.0/dist/protobuf.js/+esm";
 import * as L from "https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet-src.esm.js";
+import stations from "./stations.js"
 
 let lastUpdated;
 
@@ -31,11 +32,38 @@ const brtLayer = L.layerGroup().addTo(map);
 const traxLayer = L.layerGroup().addTo(map);
 const frontRunnerLayer = L.layerGroup().addTo(map);
 
-L.polyline(shapes.blueLine, { color: "#004a97" }).addTo(map);
-L.polyline(shapes.redLine, { color: "#be2036" }).addTo(map);
-L.polyline(shapes.greenLine, { color: "#2eb566" }).addTo(map);
-L.polyline(shapes.sLine, { color: "#77777a" }).addTo(map);
-L.polyline(shapes.frontRunner, { color: "#c227b9" }).addTo(map);
+L.polyline(shapes.blueLine, { color: "#004a97", zIndexOffset: 10 }).addTo(map);
+L.polyline(shapes.redLine, { color: "#be2036", zIndexOffset: 10 }).addTo(map);
+L.polyline(shapes.greenLine, { color: "#2eb566", zIndexOffset: 10 }).addTo(map);
+L.polyline(shapes.sLine, { color: "#77777a", zIndexOffset: 10 }).addTo(map);
+L.polyline(shapes.frontRunner, { color: "#c227b9", zIndexOffset: 10 }).addTo(map);
+
+// render stations
+for (const station of stations) {
+    let color = "";
+    switch (station.lines[0]) {
+        case "red":
+            color = "#be2036"
+            break
+        case "blue":
+            color = "#004a97"
+            break
+        case "green":
+            color = "#2eb566"
+            break
+        case "s-line":
+            color = "#77777a"
+            break
+    }
+
+    L.marker([station.lat, station.lon], {
+        zIndexOffset: 2000,
+        icon: L.divIcon({
+            className: "",
+            html: `<div class="station" style="--color: ${color};"></div>`
+        })
+    }).addTo(map)
+}
 
 function clearMap() {
   busLayer.clearLayers();
@@ -121,8 +149,8 @@ protobuf.load("/schema.proto").then((root) => {
         zIndexOffset:
           vehicle.route.type == RouteType.TRAM ||
           vehicle.route.type == RouteType.RAIL
-            ? 1000
-            : 1,
+            ? 4000
+            : 3000,
         icon: L.divIcon({
           className: "",
           html: `<div class="vehicle ${

static/js/stations.js

@@ -0,0 +1,351 @@
+export default [
+    // TRAX
+    {
+        name: "Gallivan Plaza Station",
+        lat: 40.763087,
+        lon: -111.891102,
+        lines: ["green", "blue"],
+    },
+    {
+        name: "Library Station",
+        lat: 40.760643,
+        lon: -111.884956,
+        lines: ["red"],
+    },
+    {
+        name: "Trolley Station",
+        lat: 40.760672,
+        lon: -111.873552,
+        lines: ["red"],
+    },
+    {
+        name: "900 East Station",
+        lat: 40.760671,
+        lon: -111.866732,
+        lines: ["red"],
+    },
+    {
+        name: "Stadium Station",
+        lat: 40.760126,
+        lon: -111.852171,
+        lines: ["red"],
+    },
+    {
+        name: "City Center Station",
+        lat: 40.768217,
+        lon: -111.891081,
+        lines: ["green", "blue"],
+    },
+    {
+        name: "Millcreek Station",
+        lat: 40.701067,
+        lon: -111.896939,
+        lines: ["red", "blue"],
+    },
+    {
+        name: "Meadowbrook Station",
+        lat: 40.688026,
+        lon: -111.896725,
+        lines: ["red", "blue"],
+    },
+    {
+        name: "Murray North Station",
+        lat: 40.677155,
+        lon: -111.894053,
+        lines: ["red", "blue"],
+    },
+    {
+        name: "Murray Central Station",
+        lat: 40.660269,
+        lon: -111.895282,
+        lines: ["red", "blue"],
+    },
+    {
+        name: "Fashion Place West Station",
+        lat: 40.633823,
+        lon: -111.898319,
+        lines: ["red", "blue"],
+    },
+    {
+        name: "Midvale Fort Union Station",
+        lat: 40.619458,
+        lon: -111.898381,
+        lines: ["blue"],
+    },
+    {
+        name: "Midvale Center Station",
+        lat: 40.610541,
+        lon: -111.893216,
+        lines: ["blue"],
+    },
+    {
+        name: "Historic Sandy Station",
+        lat: 40.589811,
+        lon: -111.885661,
+        lines: ["blue"],
+    },
+    {
+        name: "Sandy Civic Center Station",
+        lat: 40.571127,
+        lon: -111.884681,
+        lines: ["blue"],
+    },
+    {
+        name: "Arena Station",
+        lat: 40.769344,
+        lon: -111.901146,
+        lines: ["green", "blue"],
+    },
+    {
+        name: "Temple Square Station",
+        lat: 40.769353,
+        lon: -111.895321,
+        lines: ["green", "blue"],
+    },
+    {
+        name: "Courthouse Station",
+        lat: 40.759536,
+        lon: -111.891071,
+        lines: ["green", "blue", "red"],
+    },
+    {
+        name: "Ballpark Station",
+        lat: 40.742583,
+        lon: -111.896781,
+        lines: ["green", "blue", "red"],
+    },
+    {
+        name: "Central Pointe Station",
+        lat: 40.724801,
+        lon: -111.896861,
+        lines: ["green", "blue", "red"],
+    },
+    {
+        name: "University South Campus Station",
+        lat: 40.760509,
+        lon: -111.839146,
+        lines: ["red"],
+    },
+    {
+        name: "Fort Douglas Station",
+        lat: 40.764766,
+        lon: -111.836793,
+        lines: ["red"],
+    },
+    {
+        name: "University Medical Center",
+        lat: 40.769871,
+        lon: -111.839201,
+        lines: ["red"],
+    },
+    {
+        name: "900 South Station",
+        lat: 40.750058,
+        lon: -111.896818,
+        lines: ["green", "blue", "red"],
+    },
+    {
+        name: "Sandy Expo Station",
+        lat: 40.581703,
+        lon: -111.886234,
+        lines: ["blue"],
+    },
+    {
+        name: "Salt Lake Central Station",
+        lat: 40.762533,
+        lon: -111.90829600000001,
+        lines: ["blue"],
+    },
+    {
+        name: "Planetarium Station",
+        lat: 40.766858,
+        lon: -111.902524,
+        lines: ["blue"],
+    },
+    {
+        name: "Old Greektown Station",
+        lat: 40.765022,
+        lon: -111.905788,
+        lines: ["blue"],
+    },
+    {
+        name: "Daybreak Parkway Station",
+        lat: 40.544377,
+        lon: -112.014304,
+        lines: ["red"],
+    },
+    {
+        name: "South Jordan Parkway Station",
+        lat: 40.559038,
+        lon: -112.024643,
+        lines: ["red"],
+    },
+    {
+        name: "5600 W. Old Bingham Hwy Station",
+        lat: 40.569441,
+        lon: -112.024871,
+        lines: ["red"],
+    },
+    {
+        name: "4800 W. Old Bingham Hwy Station",
+        lat: 40.581652,
+        lon: -112.003837,
+        lines: ["red"],
+    },
+    {
+        name: "Jordan Valley Station",
+        lat: 40.594939,
+        lon: -111.971375,
+        lines: ["red"],
+    },
+    {
+        name: "2700 W. Sugar Factory Rd Station",
+        lat: 40.599207,
+        lon: -111.956458,
+        lines: ["red"],
+    },
+    {
+        name: "West Jordan City Center Station",
+        lat: 40.605024,
+        lon: -111.936071,
+        lines: ["red"],
+    },
+    {
+        name: "Historic Gardner Station",
+        lat: 40.608219,
+        lon: -111.924005,
+        lines: ["red"],
+    },
+    {
+        name: "Bingham Junction Station",
+        lat: 40.617138,
+        lon: -111.914906,
+        lines: ["red"],
+    },
+    {
+        name: "River Trail Station",
+        lat: 40.720605,
+        lon: -111.923811,
+        lines: ["green"],
+    },
+    {
+        name: "Redwood Junction Station",
+        lat: 40.711149,
+        lon: -111.939324,
+        lines: ["green"],
+    },
+    {
+        name: "Decker Lake Station",
+        lat: 40.705035,
+        lon: -111.948675,
+        lines: ["green"],
+    },
+    {
+        name: "West Valley Central Station",
+        lat: 40.694366,
+        lon: -111.958917,
+        lines: ["green"],
+    },
+    {
+        name: "North Temple Bridge/Guadalupe",
+        lat: 40.771587,
+        lon: -111.905195,
+        lines: ["green"],
+    },
+    {
+        name: "Jackson/Euclid Station",
+        lat: 40.771502,
+        lon: -111.914486,
+        lines: ["green"],
+    },
+    {
+        name: "Fairpark Station",
+        lat: 40.771468,
+        lon: -111.923759,
+        lines: ["green"],
+    },
+    {
+        name: "Power Station",
+        lat: 40.771499,
+        lon: -111.933502,
+        lines: ["green"],
+    },
+    {
+        name: "1940 W. North Temple Station",
+        lat: 40.771536,
+        lon: -111.945736,
+        lines: ["green"],
+    },
+    {
+        name: "Airport Station",
+        lat: 40.784356,
+        lon: -111.982117,
+        lines: ["green"],
+    },
+    {
+        name: "Crescent View Station",
+        lat: 40.545343,
+        lon: -111.878751,
+        lines: ["blue"],
+    },
+    {
+        name: "Kimballs Lane Station",
+        lat: 40.536528,
+        lon: -111.872436,
+        lines: ["blue"],
+    },
+    {
+        name: "Draper Town Center Station",
+        lat: 40.525675,
+        lon: -111.859915,
+        lines: ["blue"],
+    },
+    {
+        name: "South Salt Lake City Station",
+        lat: 40.722263,
+        lon: -111.890174,
+        lines: ["s-line"],
+    },
+    {
+        name: "300 East Station",
+        lat: 40.722324,
+        lon: -111.882335,
+        lines: ["s-line"],
+    },
+    {
+        name: "500 East Station",
+        lat: 40.722306,
+        lon: -111.877085,
+        lines: ["s-line"],
+    },
+    {
+        name: "700 East Station",
+        lat: 40.722798,
+        lon: -111.871612,
+        lines: ["s-line"],
+    },
+    {
+        name: "Sugarmont Station",
+        lat: 40.722818,
+        lon: -111.865092,
+        lines: ["s-line"],
+    },
+    {
+        name: "Fairmont Station",
+        lat: 40.722757,
+        lon: -111.861675,
+        lines: ["s-line"],
+    },
+    {
+        name: "600 South Station",
+        lat: 40.756057,
+        lon: -111.891096,
+        lines: ["green", "red", "blue"],
+    },
+    {
+        name: "South Jordan Downtown Station",
+        lat: 40.549573,
+        lon: -112.019345,
+        lines: ["red"],
+    },
+];