From 03ce78b8fb949880a0a3ca21a5e19e826ba4e813 Mon Sep 17 00:00:00 2001 From: Joerg Lehmann Date: Sat, 5 Jun 2021 20:23:34 +0200 Subject: [PATCH] implement greenzone feature, step 2 --- snippets/map.html | 4 +-- snippets/tracker.html | 9 +++-- static/js/map.js | 79 +++++++++++++++++++++++++++++++++++++------ 3 files changed, 77 insertions(+), 15 deletions(-) diff --git a/snippets/map.html b/snippets/map.html index a0d005f..c5625bc 100644 --- a/snippets/map.html +++ b/snippets/map.html @@ -23,9 +23,9 @@
-

Koordinaten als grüne Zone übernehmen?

+

Folgende Koordinaten als grüne Zone übernehmen?

-
+
diff --git a/snippets/tracker.html b/snippets/tracker.html index f146a4c..fbda024 100644 --- a/snippets/tracker.html +++ b/snippets/tracker.html @@ -68,7 +68,10 @@
- + +
+Bei Verlassen der grünen Zone wird ein Alarm ausgelöst. Die grüne Zone wird am einfachsten definiert, indem der gewünschte Bereich in der Kartenansicht bei gedrückter Ctrl-Taste markiert wird. +
@@ -149,14 +152,14 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist. -

letzte übermittelte Messung: {{.Timestamp}}

+

letzte übermittelte Position: {{.Timestamp}}

{{.BatteryPercentHTML}}

- +
diff --git a/static/js/map.js b/static/js/map.js index ea69879..2c2f35c 100644 --- a/static/js/map.js +++ b/static/js/map.js @@ -1,8 +1,6 @@ var urlParams = new URLSearchParams(window.location.search); var deveui = urlParams.get('deveui'); var alias = urlParams.get('alias'); -var lon = urlParams.get('lon'); -var lat = urlParams.get('lat'); var map; var lcontrol; var last_slider_position; @@ -12,14 +10,14 @@ var allmarkers = L.layerGroup(); var woBischIcon = L.icon({ iconUrl: '/static/images/marker.png', iconSize: [64, 64], - iconAnchor: [32, 32], + iconAnchor: [32, 64], popupAnchor: [0, -64] }); var datapoints; var woBischIcon2 = L.icon({ iconUrl: '/static/images/marker-all.png', iconSize: [64, 64], - iconAnchor: [32, 32], + iconAnchor: [32, 64], popupAnchor: [0, -64] }); var bounds; @@ -101,7 +99,7 @@ function refreshDatapoints(deveui, start, stop) { var date = new Date(unix_timestamp * 1000); var myhtml = '

' + alias + '
' + moment(date).format('DD.MM.YYYY HH:mm') + '
' + vbat2icon(datapoints[datapoints.length - 1][4]) + '

'; - marker.bindPopup(myhtml).openPopup(); + //marker.bindPopup(myhtml).openPopup(); if (allmarkers !== undefined) { map.removeLayer(allmarkers); @@ -113,8 +111,15 @@ function refreshDatapoints(deveui, start, stop) { for (let i of datapoints) { unix_timestamp = i[0]; date = new Date(unix_timestamp * 1000); - markers.push(L.marker([i[1], i[2]], { icon: woBischIcon2 }).bindPopup(moment(date).format('DD.MM.YYYY HH:mm'))); + markers.push(L.marker([i[1], i[2]], { icon: woBischIcon2, zIndexOffset: 1000 }).bindPopup(moment(date).format('DD.MM.YYYY HH:mm'))); + lat = i[1]; + lon = i[2]; } + + if (markers.length > 0) { + marker = L.marker([lat, lon], { icon: woBischIcon, zIndexOffset: 1000 }).addTo(map); + } + allmarkers = L.layerGroup(markers); if (lcontrol != undefined) { //lcontrol.clearLayers(); @@ -124,6 +129,7 @@ function refreshDatapoints(deveui, start, stop) { lcontrol.addOverlay(allmarkers, 'alle Positionen anzeigen'); bounds = new L.LatLngBounds([[mydata['max_lat'], mydata['max_lon']], [mydata['min_lat'], mydata['min_lon']]]); map.fitBounds(bounds, { padding: [15, 15] }); + marker.bindPopup(myhtml).openPopup(); } else { $('#map').hide(); $('#datetimeslider').hide(); @@ -137,8 +143,36 @@ function refreshDatapoints(deveui, start, stop) { }); } +function SetGreenzonePrecision(gz,i) { + var coords = gz.split(",",4); + return parseFloat(coords[0]).toFixed(i)+','+parseFloat(coords[1]).toFixed(i)+','+parseFloat(coords[2]).toFixed(i)+','+parseFloat(coords[3]).toFixed(i); +} + +function updateURLParameter(url, param, paramVal){ + var newAdditionalURL = ""; + var tempArray = url.split("?"); + var baseURL = tempArray[0]; + var additionalURL = tempArray[1]; + var temp = ""; + if (additionalURL) { + tempArray = additionalURL.split("&"); + for (var i=0; i { - greenzone = (e.bounds.toBBoxString()); // lon, lat, lon, lat + greenzone = SetGreenzonePrecision(e.bounds.toBBoxString(),5); // lon, lat, lon, lat + + // Construct URLSearchParams object instance from current URL querystring. + var queryParams = new URLSearchParams(window.location.search); + + // Set new or modify existing parameter value. + queryParams.set("greenzone", greenzone); + + // Replace current querystring with the new one. + history.replaceState(null, null, "?"+queryParams.toString()); + + $("#yesnomodalbody").html(greenzone); $("#yesnomodal").addClass("is-active"); }); @@ -194,13 +239,26 @@ $(document).ready(function () { updateSliderTooltip(this); }); + $( "#datetimeslider" ).bind('mouseup', function( event ) { + updateSliderTooltip(this); + }); + 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.attributionControl.setPrefix('Source: Swiss Federal Office of Topography') map.addLayer(tilelayer); - marker = L.marker([lat, lon], { icon: woBischIcon, zIndexOffset: 1000 }).addTo(map); + //marker = L.marker([lat, lon], { icon: woBischIcon, zIndexOffset: 1000 }).addTo(map); + $('#reportrange span').html(moment(s_start).locale('de').format('D. MMM YYYY') + ' - ' + moment(s_stop).locale('de').format('D. MMM YYYY')); + if (greenzone != "") { + var coords = greenzone.split(",",4); + var latlngs = [[coords[1], coords[0]], [coords[3], coords[2]]]; + var rectOptions = {color: 'Green', weight: 1} + var rectangle = L.rectangle(latlngs, rectOptions); + rectangle.addTo(map); + } + refreshDatapoints(deveui, s_start, s_stop); }); @@ -287,4 +345,5 @@ function updateSliderTooltip(c) { var lng = datapoints[c.value][2]; var newLatLng = new L.LatLng(lat, lng); marker.setLatLng(newLatLng); + //console.log("updateSliderTooltip", datapoints[c.value][1], datapoints[c.value][2]); }