From 47cdc611191fbf7839ccedded7cb840adcfe3fc0 Mon Sep 17 00:00:00 2001 From: Joerg Lehmann Date: Fri, 19 Mar 2021 15:49:21 +0100 Subject: [PATCH] one step ahead... --- snippets/map.html | 12 ++++--- static/js/map.js | 91 ++++++++++++++++++++++++++--------------------- 2 files changed, 58 insertions(+), 45 deletions(-) diff --git a/snippets/map.html b/snippets/map.html index 1507bd2..858ef64 100644 --- a/snippets/map.html +++ b/snippets/map.html @@ -1,3 +1,11 @@ +{{define "header_additions"}} + + +{{end}} {{define "body_content"}} {{ if ne .UserName "" }} @@ -8,7 +16,6 @@ -
@@ -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); }