better json

cmd/main.go

@@ -21,12 +21,12 @@ import (
 var scheduleDb *sql.DB
 
 var headsignMappings map[string]string = map[string]string{
-	"to medical": "To University Medical",
-	"to airport": "To Airport",
-	"to draper": "To Draper",
-	"to salt lake": "To Salt Lake Central",
+	"to medical":     "To University Medical",
+	"to airport":     "To Airport",
+	"to draper":      "To Draper",
+	"to salt lake":   "To Salt Lake Central",
 	"to meadowbrook": "To Meadowbrook",
-	"to ballpark": "To Ballpark",
+	"to ballpark":    "To Ballpark",
 }
 
 func distance(lat1 float64, lng1 float64, lat2 float64, lng2 float64) float64 {
@@ -207,23 +207,8 @@ func feedifyVehicles(vehicles []*pb.VehiclePosition, header *pb.FeedHeader, rout
 	}
 }
 
-func main() {
-	fmt.Println("Opening database...")
-
-	_db, err := sql.Open("sqlite3", "uta-gtfs.db")
-	if err != nil {
-		log.Fatal(err)
-	}
-
-	scheduleDb = _db
-
-	http.Handle("/", http.FileServer(http.Dir("./static")))
-
-	http.HandleFunc("/schema.proto", func(w http.ResponseWriter, r *http.Request) {
-		http.ServeFile(w, r, "./proto/schema.proto")
-	})
-
-	http.HandleFunc("/api", func(w http.ResponseWriter, r *http.Request) {
+func vehicleHandler(mode string) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
 		vehicles, header, err := getVehicles()
 		if err != nil {
 			log.Println(err)
@@ -244,7 +229,7 @@ func main() {
 			}
 		}
 
-		if r.Header.Get("Accept") == "application/json" {
+		if mode == "json" || r.Header.Get("Accept") == "application/json" {
 			feed := feedifyVehicles(vehicles, header, routeTypeFilter)
 			response, err := json.Marshal(&feed)
 			if err != nil {
@@ -269,8 +254,28 @@ func main() {
 			w.Header().Add("Content-Length", strconv.Itoa(len(b)))
 			w.Write(b)
 		}
+	}
+}
+
+func main() {
+	fmt.Println("Opening database...")
+
+	_db, err := sql.Open("sqlite3", "uta-gtfs.db")
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	scheduleDb = _db
+
+	http.Handle("/", http.FileServer(http.Dir("./static")))
+
+	http.HandleFunc("/schema.proto", func(w http.ResponseWriter, r *http.Request) {
+		http.ServeFile(w, r, "./proto/schema.proto")
 	})
 
+	http.HandleFunc("/api", vehicleHandler(""))
+	http.HandleFunc("/api.json", vehicleHandler("json"))
+
 	port := "3000"
 	if portEnv, ok := os.LookupEnv("PORT"); ok {
 		port = portEnv

static/index.html

@@ -19,7 +19,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
 
     <style>
-      .leaflet-marker-icon:has(.vehicle) {
+      body:not(.skip-vehicle-animation) .leaflet-marker-icon:has(.vehicle) {
         transition: transform 300ms linear;
       }
 
@@ -71,6 +71,28 @@
         background-image: linear-gradient(to bottom right, #2eb566 33%, #004a97 33%, #004a97 66%, #be2036 66%);
       }
 
+      .nav {
+        grid-column: span 2;
+        background-color: #e5e7eb;
+        display: flex;
+        gap: 10px;
+        box-sizing: border-box;
+        line-height: 1.5;
+      }
+
+      .nav a {
+        display: block;
+        font-size: 30px;
+        padding: 0 20px;
+        text-decoration: none;
+        font-family: sans-serif;
+      }
+
+      .nav__item--selected {
+        background-color: white;
+        border-bottom: 3px solid #93c5fd;
+      }
+
       #banner {
         grid-column: span 2;
         background-color: #ef4444;
@@ -88,7 +110,7 @@
       }
 
       #map, #sidebar {
-        grid-row: 2 / 3;
+        grid-row: 3 / 4;
       }
 
       #sidebar label {
@@ -108,7 +130,7 @@
 
       #bottom-bar {
         display: none;
-        grid-row: 3 / 4;
+        grid-row: 4 / 5;
         gap: 10px;
         justify-content: center;
         padding: 10px;
@@ -126,7 +148,7 @@
       #container {
         display: grid;
         grid-template-columns: auto 300px;
-        grid-template-rows: auto 1fr;
+        grid-template-rows: auto auto 1fr;
         height: 100dvh;
       }
 
@@ -138,7 +160,7 @@
       @media screen and (max-width: 800px) {
         #container {
           grid-template-columns: 1fr;
-          grid-template-rows: auto 1fr auto;
+          grid-template-rows: auto auto 1fr auto;
         }
         #sidebar {
           display: none;
@@ -156,6 +178,11 @@
         There are currently no vehicles running. Either service has ended for
         the day, or UTA's tracker isn't working. Come back later!
       </div>
+      <div class="nav">
+        <a title="UTA Vehicle Tracker" href="https://uta.clb.li" class="nav__item--selected">🚆</a>
+        <a title="TRAXcidents" href="https://traxcidents.clb.li">💥</a>
+        <a title="GreenBike Firehose" href="https://greenbike.clb.li">🚲</a>
+      </div>
 
       <div id="map"></div>
       <div id="bottom-bar">
@@ -273,6 +300,6 @@
       </div>
     </div>
 
-    <script type="module" src="/js/main.js?v=4"></script>
+    <script type="module" src="/js/main.js?v=5"></script>
   </body>
 </html>

static/js/main.js

@@ -36,6 +36,13 @@ L.tileLayer(
   }
 ).addTo(map);
 
+map.on("zoomstart", () => {
+  document.body.classList.add("skip-vehicle-animation")
+})
+map.on("zoomend", () => {
+  document.body.classList.remove("skip-vehicle-animation")
+})
+
 const busLayer = L.layerGroup().addTo(map);
 const brtLayer = L.layerGroup().addTo(map);
 const traxLayer = L.layerGroup().addTo(map);