one step ahead...
This commit is contained in:
parent
ae5ead152d
commit
47cdc61119
|
|
@ -1,3 +1,11 @@
|
|||
{{define "header_additions"}}
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
||||
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
||||
crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
||||
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
||||
crossorigin=""></script>
|
||||
{{end}}
|
||||
{{define "body_content"}}
|
||||
{{ if ne .UserName "" }}
|
||||
|
||||
|
|
@ -8,7 +16,6 @@
|
|||
|
||||
<link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
|
||||
<script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
|
||||
<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
|
||||
<script src="static/js/map.js"></script>
|
||||
|
||||
<div class="columns" id="myselectors">
|
||||
|
|
@ -31,9 +38,6 @@
|
|||
<div id="map" class="mapbig">
|
||||
</div>
|
||||
|
||||
<div id="tooltiptext" class="slidecontainer has-text-centered">
|
||||
</div>
|
||||
|
||||
<div class="slidecontainer">
|
||||
<input class="slider" id="datetimeslider" type="range" label="Zeitpunkt" min="0" max="0" step="1" value="" ontouchmove="updateSliderTooltip(this)" onmousemove="updateSliderTooltip(this)" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var deveui = urlParams.get('deveui');
|
||||
var alias = urlParams.get('alias');
|
||||
var start = urlParams.get('start');
|
||||
var stop = urlParams.get('stop');
|
||||
var lon = urlParams.get('lon');
|
||||
var lat = urlParams.get('lat');
|
||||
var map;
|
||||
var last_slider_position;
|
||||
var allmarkers = L.layerGroup();
|
||||
|
||||
if (start == null) {
|
||||
var dstart = moment({hour: 0});
|
||||
|
|
@ -49,6 +51,7 @@ function vbat2icon(level) {
|
|||
return '<span class="icon ' + icon_color + '"><i class="fas ' + fa_battery_string + '"></i></span>';
|
||||
}
|
||||
|
||||
|
||||
function refreshDatapoints(deveui, start, stop) {
|
||||
range = ""
|
||||
range = range + "&start=" + start;
|
||||
|
|
@ -82,49 +85,56 @@ function refreshDatapoints(deveui, start, stop) {
|
|||
var unix_timestamp = datapoints[datapoints.length - 1][0];
|
||||
var date = new Date(unix_timestamp * 1000);
|
||||
|
||||
var myhtml = moment(date).format('DD.MM.YYYY HH:mm') + ' / ' + vbat2icon(datapoints[datapoints.length - 1][4]) + ' (' + datapoints[datapoints.length - 1][3] + ' mV)';
|
||||
console.log(myhtml);
|
||||
$('#tooltiptext').html(myhtml);
|
||||
var myhtml = '<p class="has-text-centered"><b>' + alias + '</b><br />' + moment(date).format('DD.MM.YYYY HH:mm') + '<br />' + vbat2icon(datapoints[datapoints.length - 1][4]) + '</p>';
|
||||
marker.bindPopup(myhtml).openPopup();
|
||||
|
||||
// we create the layer group with all positions
|
||||
var markers = [];
|
||||
for (let i of datapoints) {
|
||||
unix_timestamp = i[0];
|
||||
date = new Date(unix_timestamp * 1000);
|
||||
markers.push(L.marker([i[1], i[2]]).bindPopup(moment(date).format('DD.MM.YYYY HH:mm')));
|
||||
}
|
||||
allmarkers = L.layerGroup(markers);
|
||||
var baseMaps = {
|
||||
};
|
||||
var overlayMaps = {
|
||||
"alle Positionen": allmarkers
|
||||
};
|
||||
L.control.layers(baseMaps, overlayMaps).addTo(map);
|
||||
console.log(map);
|
||||
});
|
||||
}
|
||||
|
||||
var myfeature;
|
||||
var marker;
|
||||
var woBischIcon = L.icon({
|
||||
iconUrl: '/static/images/marker.png',
|
||||
iconSize: [64, 64],
|
||||
iconAnchor: [32, 64],
|
||||
popupAnchor: [0, -64]
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
var position = ol.proj.fromLonLat([lon, lat], "EPSG:2056");
|
||||
|
||||
var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
|
||||
map = new ga.Map({
|
||||
target: 'map',
|
||||
layers: [layer],
|
||||
view: new ol.View({
|
||||
center: position,
|
||||
resolution: 20
|
||||
})
|
||||
map = new L.Map('map', {
|
||||
crs: L.CRS.EPSG3857,
|
||||
zoomControl: false,
|
||||
});
|
||||
|
||||
// Create the layer with the icon
|
||||
myfeature = new ol.Feature({
|
||||
geometry: new ol.geom.Point(position)
|
||||
})
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [myfeature]
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 1],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'fraction',
|
||||
src: '/static/images/marker.png'
|
||||
})
|
||||
})
|
||||
});
|
||||
map.addLayer(vectorLayer);
|
||||
var url = 'https://wmts20.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-farbe/default/current/3857/{z}/{x}/{y}.jpeg';
|
||||
var tilelayer = new L.tileLayer(url);
|
||||
map.addLayer(tilelayer);
|
||||
map.setView(L.latLng(lat, lon), 10);
|
||||
|
||||
var overlayMaps = {
|
||||
"All": allmarkers
|
||||
};
|
||||
marker = L.marker([lat, lon],{icon: woBischIcon}).addTo(map);
|
||||
|
||||
$('#reportrange span').html(moment(start).locale('de').format('D. MMM YYYY') + ' - ' + moment(stop).locale('de').format('D. MMM YYYY'));
|
||||
|
||||
refreshDatapoints(deveui,start,stop);
|
||||
|
||||
|
||||
console.log("End of document ready...");
|
||||
});
|
||||
|
||||
|
|
@ -135,15 +145,12 @@ $(function() {
|
|||
var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
|
||||
console.log("XXX: "+start.format());
|
||||
|
||||
function cb(start, end) {
|
||||
$('#reportrange span').html(start.locale('de').format('D. MMM YYYY') + ' - ' + end.locale('de').format('D. MMM YYYY'));
|
||||
console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
|
||||
s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
|
||||
console.log("Start: " + s_start + ' End: ' + s_end);
|
||||
//drawGraph(deveui, alias, property, s_start,s_end, false);
|
||||
refreshDatapoints(deveui, s_start, s_end);
|
||||
}
|
||||
|
||||
|
|
@ -202,7 +209,7 @@ $(function() {
|
|||
|
||||
function updateSliderTooltip(c)
|
||||
{
|
||||
if (datapoints.length == 0) {
|
||||
if (datapoints == undefined || datapoints.length == 0) {
|
||||
return
|
||||
}
|
||||
if (c.value == last_slider_position) {
|
||||
|
|
@ -214,11 +221,13 @@ function updateSliderTooltip(c)
|
|||
console.log("Slider position changed...");
|
||||
var unix_timestamp = datapoints[c.value][0];
|
||||
var date = new Date(unix_timestamp * 1000);
|
||||
var myhtml = '<p>' + moment(date).format('DD.MM.YYYY HH:mm') + ' / ' + vbat2icon(datapoints[c.value][4]) + ' (' + datapoints[c.value][3] + ' mV)</p>';
|
||||
$('#tooltiptext').html(myhtml);
|
||||
var myhtml = '<p class="has-text-centered"><b>' + alias + '</b><br />' + moment(date).format('DD.MM.YYYY HH:mm') + '<br />' + vbat2icon(datapoints[c.value][4]) + '</p>';
|
||||
marker.bindPopup(myhtml).openPopup();
|
||||
console.log(myhtml);
|
||||
|
||||
var position = ol.proj.fromLonLat([datapoints[c.value][2], datapoints[c.value][1]], "EPSG:2056");
|
||||
console.log(position);
|
||||
myfeature.setGeometry(new ol.geom.Point(position));
|
||||
var lat = datapoints[c.value][1];
|
||||
var lng = datapoints[c.value][2];
|
||||
var newLatLng = new L.LatLng(lat, lng);
|
||||
console.log("Lat: "+lat+", Long: "+lng);
|
||||
marker.setLatLng(newLatLng);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue