Add maps to trip pages

Closes: #102

templates/trip_page.html

@@ -5,6 +5,13 @@
 {% set row = { "flight": flight_row, "train": train_row } %}
 
 {% block style %}
+
+{% if station_coordinates %}
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+     crossorigin=""/>
+{% endif %}
+
 {% set conference_column_count = 6 %}
 {% set accommodation_column_count = 7 %}
 {% set travel_column_count = 7 %}
@@ -33,6 +40,11 @@
 .grid-item {
   /* Additional styling for grid items can go here */
 }
+
+#map {
+  height: 400px;
+}
+
 </style>
 {% endblock %}
 
@@ -65,7 +77,36 @@
   {% endfor %}
   </div>
 
-  {# <pre>{{ trip | pprint }}</pre> #}
+  {% if station_coordinates %}
+  <div id="map"></div>
+  {% endif %}
 
 </div>
 {% endblock %}
+
+{% block scripts %}
+
+{% if station_coordinates %}
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+   integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+   crossorigin=""></script>
+
+<script>
+var station_coordinates = {{ station_coordinates | tojson }};
+
+// Initialize the map
+var map = L.map('map').fitBounds(station_coordinates);
+
+// 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 to the map
+station_coordinates.forEach(function(coord) {
+  L.marker(coord).addTo(map);
+});
+
+</script>
+{% endif %}
+{% endblock %}