2024-01-15 10:17:02 -06:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<!-- Leaflet's CSS -->
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
|
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
|
|
|
crossorigin=""/>
|
|
|
|
|
<!-- Make sure you put this AFTER Leaflet's CSS -->
|
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
|
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
|
|
|
crossorigin=""></script>
|
|
|
|
|
<style>
|
|
|
|
|
#map { height: 100%; }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
2024-01-15 11:00:56 -06:00
|
|
|
var map = L.map('map').setView([{{station_lat}}, {{station_lon}}], 10);
|
2024-01-15 10:17:02 -06:00
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'}).addTo(map);
|
2024-01-15 11:00:56 -06:00
|
|
|
|
2024-01-15 17:04:13 -06:00
|
|
|
//{{markers|safe}}
|
|
|
|
|
|
|
|
|
|
// Show station location
|
|
|
|
|
var station = L.marker([{{station_lat}}, {{station_lon}}]).addTo(map).bindTooltip('{{station_call}}', permanent=true).openTooltip();
|
|
|
|
|
|
|
|
|
|
// Show GeoJSON of markers
|
|
|
|
|
var group = L.geoJSON({{geojs|safe}},
|
|
|
|
|
{
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
return {color: feature.properties.color};
|
|
|
|
|
}
|
|
|
|
|
}).bindTooltip(function (layer) {
|
|
|
|
|
return 'Object '+layer.feature.properties.object_name+' from '+layer.feature.properties.from;
|
|
|
|
|
}, permanent=true).addTo(map);
|
|
|
|
|
|
|
|
|
|
// Zoom to show all
|
|
|
|
|
map.fitBounds(group.getBounds().pad(0.2));
|
2024-01-15 11:00:56 -06:00
|
|
|
|
2024-01-15 10:17:02 -06:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
