septastic/web/templates/map.html
Nicholas Orlowsky bb1ac27ea6
All checks were successful
Create and publish a Docker image / build-and-push-image (push) Successful in 5m50s
add clone
2026-04-19 23:04:53 -04:00

38 lines
1.2 KiB
HTML

<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="">
<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: `
<div>
<span style="background-color: #eee; padding: 2px;">
{{ loc.2 }}
</span>
</div>`,
className: 'text-label'
});
var marker = L.marker([{{loc.0}}, {{loc.1}}], {icon: icon}).addTo(map);
marker.bindPopup("{{ loc.2 }}")
}
{% endfor %}
</script>