<!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-edgescalebar/leaflet.edgescalebar.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);
L.edgeScaleBar().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 %}
var markers = {};
{% for each_device in devices %}
markers['{{each_device}}'] = new L.FeatureGroup();
map.addLayer(markers['{{each_device}}']);
{% endfor %}
var legend_age = L.control({position: 'topright'});
legend_age.onAdd = function(map) {
var div = L.DomUtil.create('div', 'info legend_age');
div.innerHTML = '<select>' +
'<option value="all">All markers</option>' +
'<option value="7day">Past 7 Days</option>' +
'<option value="1day">Past 1 Day</option>' +
'<option value="6hour">Past 6 Hours</option>' +
'<option value="1hour">Past 1 Hour</option>' +
'<option value="30min">Past 30 Min</option>' +
'</select>';
div.firstChild.onmousedown = div.firstChild.ondblclick = L.DomEvent.stopPropagation;
return div;
};
legend_age.addTo(map);
function toggleFunction(element) {
if (element.checked) {
map.addLayer(markers[element.value]);
} else {
map.removeLayer(markers[element.value]);
}
}
var legend_devices = L.control({position: 'topright'});
legend_devices.onAdd = function(map) {
var div = L.DomUtil.create('div');
div.innerHTML = `
<div class="leaflet-control-layers leaflet-control-layers-expanded">
<form>
{% for each_device in devices -%}
<div>
<input class="leaflet-control-layers-overlays" id="command"
onclick=toggleFunction(this) type="checkbox" value="{{each_device}}" checked>{{each_device}}</input>
</div>
{%- endfor %}
</form>
</div>`;
return div;
};
legend_devices.addTo(map);
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
});
node.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"]);
markers[data[i]["device_id"]].addLayer(node);
}
}
}
);
}
$('select').change(function(){
for (var key in markers) {
map.removeLayer(markers[key]);
markers[key] = new L.FeatureGroup();
map.addLayer(markers[key]);
}
if ($(this).val() === "all") {
add_new_markers(0);
} else if ($(this).val() === "7day") {
add_new_markers(604800);
} else if ($(this).val() === "1day") {
add_new_markers(86400);
} else if ($(this).val() === "6hour") {
add_new_markers(21600);
} else if ($(this).val() === "1hour") {
add_new_markers(3600);
} else if ($(this).val() === "30min") {
add_new_markers(1800);
}
});
// 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>