<!doctype html>
<html lang="en">
<head>
<title>TTN Tracker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="{{url_for('static', filename='leaflet/leaflet.css')}}"/>
<link rel="stylesheet" href="{{url_for('static', filename='fontawesome/css/all.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='leaflet-measure/leaflet-measure.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='leaflet-locatecontrol/L.Control.Locate.mapbox.min.css')}}" />
<script src="{{url_for('static', filename='jquery-3.3.1.min.js')}}"></script>
<script src="{{url_for('static', filename='leaflet/leaflet.js')}}"></script>
<script src="{{url_for('static', filename='leaflet-measure/leaflet-measure.js')}}"></script>
<script src="{{url_for('static', filename='leaflet-locatecontrol/L.Control.Locate.min.js')}}"></script>
<script src="{{url_for('static', filename='leaflet-bing-layer.min.js')}}"></script>
<script src="{{url_for('static', filename='esri-leaflet.js')}}"></script>
</head>
<body>
<div id="mapid" style="height: 98vh; width: 100%"></div>
<script>
var osm_Link = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
otm_Link = '<a href="http://opentopomap.org/">OpenTopoMap</a>',
bing_Link = '<a href="http://bing.com/">Bing</a>',
google_Link = '<a href="http://google.com/">Google</a>';
var osm_Url = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osm_Attrib = '© ' + osm_Link + ' Contributors',
otm_Url = 'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
otm_Attrib = '© ' + otm_Link + ' Contributors ',
bing_Attrib = '© ' + bing_Link + ' Contributors',
google_Url = 'http://mt.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
google_Attrib = '© ' + google_Link + ' Contributors';
var osm_Map = L.tileLayer(osm_Url, {attribution: osm_Attrib}),
esri_Map = L.esri.basemapLayer("Topographic"),
otm_Map = L.tileLayer(otm_Url, {attribution: otm_Attrib}),
google_Map = L.tileLayer(google_Url, {attribution: google_Attrib})
{%- if bing_api_key %},
bing_dark = L.tileLayer.bing({bingMapsKey: '{{bing_api_key}}', imagerySet: 'CanvasDark', attribution: bing_Attrib}),
bing_sat = L.tileLayer.bing({bingMapsKey: '{{bing_api_key}}', imagerySet: 'Aerial', attribution: bing_Attrib}),
bing_sat_labels = L.tileLayer.bing({bingMapsKey: '{{bing_api_key}}', imagerySet: 'AerialWithLabels', attribution: bing_Attrib})
{% endif -%}
;
//Create a map that remembers where it was zoomed to
function boundsChanged () {
localStorage.setItem('bounds', JSON.stringify(map.getBounds()));
default_zoom = false;
}
var map;
var default_zoom = true;
b = JSON.parse(localStorage.getItem('bounds'));
if (b == null)
{
map = L.map('mapid', {layers: [esri_Map]}).setView([{{start_lat}}, {{start_lon}}], 15);
}
else {
map = L.map('mapid', {layers: [esri_Map]});
try {
map.fitBounds([[b._southWest.lat%90,b._southWest.lng%180],[b._northEast.lat%90,b._northEast.lng%180]]);
default_zoom = false;
} catch (err) {
map.setView([{{start_lat}}, {{start_lon}}], 15);
}
}
map.on('dragend', boundsChanged);
map.on('zoomend', boundsChanged);
//disable inertia because it is irritating and slow
map.options.inertia=false;
var measureControl = L.control.measure({
activeColor: '#FF0000',
completedColor: '#FF8000',
primaryLengthUnit: 'miles',
secondaryLengthUnit: 'kilometers'
});
measureControl.addTo(map);
L.control.locate().addTo(map);
var baseLayers = {
"Topographic": esri_Map,
"OpenStreetMap": osm_Map,
"OpenTopoMap": otm_Map,
"Google": google_Map,
{%- if bing_api_key %}
"Bing (Dark)": bing_dark,
"Bing Satellite": bing_sat,
"Bing Satellite (w Labels)": bing_sat_labels
{% endif %}
};
L.control.layers(baseLayers).addTo(map);
map.on('click', function(e) {
console.log("Clicked: " + e.latlng.lat + ", " + e.latlng.lng);
});
{% for each_gateway in gateway_locations %}
var gateway = L.marker([{{each_gateway[1]}}, {{each_gateway[2]}}]).bindPopup('Gateway: {{each_gateway[0]}}<br />Lat/Lon: {{each_gateway[1]}}, {{each_gateway[2]}}').addTo(map);
{% endfor %}
function add_new_markers(past_seconds) {
var url = '/dsf673bh_past/' + past_seconds;
$.getJSON(url,
function (data, responseText, jqXHR) {
if (jqXHR.status !== 204) {
for (i = 0; i <= data.length; i++) {
var node = L.circleMarker([parseFloat(data[i]["latitude"]), parseFloat(data[i]["longitude"])], {
color: 'red',
radius: 5
}).bindPopup('Node: ' + data[i]["device_id"] + '<br />' + data[i]["datetime"] + '<br />Lat/Lon: ' + data[i]["latitude"] + ', ' + data[i]["longitude"] + '<br />Altitude: ' + data[i]["altitude"] + ' m, hdop: ' + data[i]["hdop"]).addTo(map);
}
}
}
);
}
// Repeat function for getLastData()
function repeat_add_new_markers(past_seconds) {
setInterval(function () {
add_new_markers(past_seconds)
}, Number(past_seconds) * 1000);
}
add_new_markers('0');
window.onload = function() {
repeat_add_new_markers('{{refresh_period_seconds}}');
};
</script>
</body>
</html>