W1CDN/aprs_tool
0
0
Fork 0
Code Issues 45 Pull Requests Projects Releases Activity

Plot recent packets on map.

Browse Source
This commit is contained in:
W1CDN
2024-01-15 17:04:13 -06:00
parent 260e946ab6
commit 3758ac21cb
5 changed files with 123 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
templates/index.html
View File

@ -4,18 +4,58 @@
<meta charset="UTF-8">
<title>{{station_call}} Status</title>
<!-- 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>
table, th, td {
border: 1px solid black;
}
#map { height: 250px; }
</style>
</head>
<body>
<h1>{{station_call}} Status</h1>
Station location: {{station_lat}}, {{station_lon}}
<div style="width: 100%; overflow: hidden;">
<div style="width: 50%; float: left;">
<h2> About </h2>
This is a work in progress. See <a href="https://amiok.net/gitea/W1CDN/aprs_tool">https://amiok.net/gitea/W1CDN/aprs_tool</a> for usage.
<h1>{{station_call}} Status</h1>
Station location: {{station_lat}}, {{station_lon}}
<h2> About </h2>
This is a work in progress. See <a href="https://amiok.net/gitea/W1CDN/aprs_tool">https://amiok.net/gitea/W1CDN/aprs_tool</a> for usage.
</div>
<div style="margin-left: 50%;">
<div id="map"></div>
<script>
var map = L.map('map').setView([{{station_lat}}, {{station_lon}}], 10);
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);
//{{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.3));
</script>
</div>
</div>
<h2> Recent RF Packets </h2>
<table>
@ -40,6 +80,8 @@ This is a work in progress. See <a href="https://amiok.net/gitea/W1CDN/aprs_tool
{% endfor %}
</table>
<h2> Recent Stations </h2>
<table>
<tr>