Map of all upcoming travel on trips page

Closes: #107

templates/trips.html

@@ -5,6 +5,11 @@
 {% set row = { "flight": flight_row, "train": train_row } %}
 
 {% block style %}
+
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+     crossorigin=""/>
+
 {% set conference_column_count = 6 %}
 {% set accommodation_column_count = 7 %}
 {% set travel_column_count = 7 %}
@@ -33,6 +38,13 @@
 .grid-item {
   /* Additional styling for grid items can go here */
 }
+
+#map {
+  height: 80vh;
+}
+
+
+
 </style>
 {% endblock %}
 
@@ -79,11 +91,69 @@
 {% block content %}
 <div class="p-2">
 
+  <div id="map"></div>
 
   <h1>Trips</h1>
     {{ section("Current", current, "attending") }}
     {{ section("Future", future, "going") }}
     {{ section("Past", past|reverse, "went") }}
 </div>
-
+{% endblock %}
+
+{% block scripts %}
+
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+   integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+   crossorigin=""></script>
+
+<script>
+var future_coordinates = {{ future_coordinates | tojson }};
+var future_routes = {{ future_routes | tojson }};
+
+// Initialize the map
+var map = L.map('map').fitBounds(future_coordinates.map(function(station) {
+  return [station.latitude, station.longitude];
+}));
+
+// Set up the tile layer
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+
+var stationIcon = L.divIcon({
+  className: 'custom-div-icon',
+  html: "<div style='font-size: 24px;'>🚉</div>",
+  iconSize: [30, 42],
+});
+
+var airportIcon = L.divIcon({
+  className: 'custom-div-icon',
+  html: "<div style='font-size: 24px;'>✈️</div>",
+  iconSize: [30, 42],
+});
+
+// Add markers with appropriate icons to the map
+future_coordinates.forEach(function(item) {
+  var icon = item.type === "station" ? stationIcon : airportIcon;
+  var marker = L.marker([item.latitude, item.longitude], { icon: icon }).addTo(map);
+  marker.bindPopup(item.name);
+});
+
+// Draw routes
+future_routes.forEach(function(route) {
+  if (route.geojson) {
+    // If route is defined as GeoJSON
+    L.geoJSON(JSON.parse(route.geojson), {
+      style: function(feature) {
+        return {color: route.type === "train" ? "blue" : "blue"}; // Green for trains, blue for flights
+      }
+    }).addTo(map);
+  } else {
+    // If route is defined by 'from' and 'to' coordinates
+    var color = route.type === "train" ? "blue" : "red"; // Green for trains, red for flights
+    L.polyline([route.from, route.to], {color: color}).addTo(map);
+  }
+});
+
+</script>
 {% endblock %}