basic frontend js

public/app.js

@@ -0,0 +1,49 @@
+const map = L.map("map").setView([40.7608, -111.8910], 12);
+
+L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+  attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+}).addTo(map);
+
+const API_URL = "http://localhost:7653/api/v0/";
+
+const trainEmojiIcon = L.divIcon({ html: "🔵", className: "", iconSize: [64,64], iconAnchor: [16,32], popupAnchor: [0,-32] });
+const stopsEmojiIcon = L.divIcon({ html: "🫃", className: "", iconSize: [64,64], iconAnchor: [16,32], popupAnchor: [0,-32] });
+
+function addMarker(lat, lon, content, icon) {
+  if (!isNaN(lat) && !isNaN(lon)) {
+    const marker = L.marker([lat, lon], { icon: icon }).addTo(map);
+    if (content) marker.bindPopup(content);
+  } else {
+    console.warn("Invalid coordinates:", latitude, longitude);
+  }
+}
+
+function getTrainsByRoute(route) {
+  fetch(API_URL + 'vehicles')
+    .then(res => res.json())
+    .then(data => {
+      const trains = data.data;
+      const filtered = route ? trains.filter(t => t.routeId == route) : trains;
+      filtered.forEach(t => {
+        addMarker(t.location.latitude, t.location.longitude, t.routeName + ": Vehicle " + t.vehicleId, trainEmojiIcon);
+      });
+    })
+    .catch(err => console.error("Error fetching trains:", err));
+}
+
+function getStopsByRoute(route) {
+  fetch(API_URL + 'stops/' + route)
+    .then(res => res.json())
+    .then(data => {
+      const stops = data.data;
+      stops.forEach(s => {
+          const lat = parseFloat(s.stop_lat);
+          const lon = parseFloat(s.stop_lon);
+        addMarker(lat,lon, s.stop_name + " - " + s.stop_desc, stopsEmojiIcon);
+      });
+    })
+    .catch(err => console.error("Error fetching stops:", err));
+}
+
+getStopsByRoute("701");  
+getTrainsByRoute();