improve map

web/src/controllers/map.rs

@@ -36,7 +36,12 @@ async fn get_map_element_html(state: Data<Arc<AppState>>, resp: SessionResponse)
     for other in trips {
         if let libseptastic::stop_schedule::TripTracking::Tracked(td) = other.tracking_data {
             if let Some(lat) = td.latitude && let Some(lng) = td.longitude {
-                locations.push((lat, lng, td.route_id));
+                locations.push(crate::templates::MapItem { 
+                    lat, 
+                    lng, 
+                    route_id: td.route_id, 
+                    headsign: other.direction.direction_destination 
+                });
             }
         }
     }

web/src/templates.rs

@@ -99,10 +99,17 @@ pub struct StopSearchResults {
     pub results: Vec<Stop>
 }
 
+pub struct MapItem {
+    pub lat: f64,
+    pub lng: f64,
+    pub route_id: String,
+    pub headsign: String,
+}
+
 #[derive(askama::Template)]
 #[template(path = "map.html")]
 pub struct MapTemplate {
-    pub locations: Vec<(f64,f64, String)>
+    pub locations: Vec<MapItem>
 }
 
 pub fn build_timetables(directions: Vec<Direction>, trips: Vec<Trip>) -> Vec<TimetableDirection> {

web/templates/map.html

@@ -3,7 +3,7 @@
      crossorigin="">
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
-    crossorigin="">
+    crossorigin=""></script>
 
 <style>
     #map { height: 750px; width: 100%; }
@@ -26,13 +26,13 @@
                 html: `
                 <div>
                     <span style="background-color: #eee; padding: 2px;">
-                        {{ loc.2 }}
+                        {{ loc.route_id }} to {{ loc.headsign }}
                     </span>
                 </div>`,
                 className: 'text-label'
             });
-            var marker = L.marker([{{loc.0}}, {{loc.1}}], {icon: icon}).addTo(map);
-            marker.bindPopup("{{ loc.2 }}")
+            var marker = L.marker([{{loc.lat}}, {{loc.lng}}], {icon: icon}).addTo(map);
+            marker.bindPopup("{{ loc.route_id }}")
         }
     {% endfor %}
 </script>