All checks were successful
Create and publish a Docker image / build-and-push-image (push) Successful in 5m41s
44 lines
1.4 KiB
HTML
44 lines
1.4 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=""></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: '© <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.route_id }}
|
|
</span>
|
|
</div>`,
|
|
className: 'text-label'
|
|
});
|
|
var marker = L.marker([{{loc.lat}}, {{loc.lng}}], {icon: icon}).addTo(map);
|
|
marker.bindPopup(`
|
|
<div>
|
|
<span style="padding: 2px;">
|
|
{{ loc.route_id }} to {{ loc.headsign }}
|
|
</span>
|
|
</div>
|
|
`)
|
|
}
|
|
{% endfor %}
|
|
</script>
|