actually add map files + reduce usage of unwrap

web/templates/map.html

@@ -0,0 +1,36 @@
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+     crossorigin=""/>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""></script>
+
+<style>
+#map { height: 750px; width: 100%; }
+</style>
+
+
+<div id="map"></div>
+
+<script>
+var map = L.map('map').setView([39.952583, -75.165222], 9);
+
+L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+}).addTo(map);
+
+{% for loc in locations %}
+{
+    var icon = L.divIcon({
+        html: '<span style="background-color: #eee; padding: 2px;">{{ loc.2 }}</span>', // Your text here
+        className: 'text-label',        // Custom CSS class
+        //iconSize: [100, 40],           // Optional: Define size
+        //iconAnchor: [50, 20]           // Optional: Center the text over the point
+    });
+    var marker = L.marker([{{loc.0}}, {{loc.1}}], {icon: icon}).addTo(map);
+    marker.bindPopup("{{ loc.2 }}")
+}
+{% endfor %}
+
+</script>