@@ -31,9 +38,6 @@
-
-
-
diff --git a/static/js/map.js b/static/js/map.js
index 9c49ed9..6d0a0bd 100644
--- a/static/js/map.js
+++ b/static/js/map.js
@@ -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 '
';
}
+
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 = '
' + alias + '
' + moment(date).format('DD.MM.YYYY HH:mm') + '
' + vbat2icon(datapoints[datapoints.length - 1][4]) + '
';
+ 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 = '
' + moment(date).format('DD.MM.YYYY HH:mm') + ' / ' + vbat2icon(datapoints[c.value][4]) + ' (' + datapoints[c.value][3] + ' mV)
';
- $('#tooltiptext').html(myhtml);
+ var myhtml = '
' + alias + '
' + moment(date).format('DD.MM.YYYY HH:mm') + '
' + vbat2icon(datapoints[c.value][4]) + '
';
+ 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);
}