Move map code into dedicated JS file

static/js/map.js

@@ -0,0 +1,53 @@
+function emoji_icon(emoji) {
+  return L.divIcon({
+    className: 'custom-div-icon',
+    html: "<div style='font-size: 24px;'>🚉</div>",
+    iconSize: [30, 42],
+  });
+}
+
+var stationIcon = emoji_icon("🚉");
+var airportIcon = emoji_icon("✈️<");
+
+function build_map(map_id, coordinates, routes) {
+  // Initialize the map
+  var map = L.map(map_id).fitBounds(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);
+
+  // Add markers with appropriate icons to the map
+  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
+  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.type === "flight") {
+      var flightPath = new L.Geodesic([[route.from, route.to]], {
+          weight: 3,
+          opacity: 0.5,
+          color: 'red'
+      }).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);
+    }
+  });
+
+  return map;
+}

templates/trip_list.html

@@ -106,54 +106,14 @@
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>
 
+<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
+<script src="{{ url_for("static", filename="js/map.js") }}"></script>
+
 <script>
 var future_coordinates = {{ future_coordinates | tojson }};
 var future_routes = {{ future_routes | tojson }};
 
-// Initialize the map
+build_map("map", future_coordinates, future_routes);
-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 %}

templates/trip_page.html

@@ -42,7 +42,7 @@
 }
 
 #map {
-  height: 100vh;
+  height: 80vh;
 }
 
 </style>
@@ -91,54 +91,14 @@
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>
 
+<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
+<script src="{{ url_for("static", filename="js/map.js") }}"></script>
+
 <script>
 var coordinates = {{ coordinates | tojson }};
 var routes = {{ routes | tojson }};
 
-// Initialize the map
+build_map("map", coordinates, routes);
-var map = L.map('map').fitBounds(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
-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
-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>
 {% endif %}