one step ahead...

snippets/map.html

@@ -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>

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 '<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)';
+    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>';
-    console.log(myhtml);
+    marker.bindPopup(myhtml).openPopup();
-    $('#tooltiptext').html(myhtml);
+ 
+    // 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");
+  map = new L.Map('map', {
-  
+      crs: L.CRS.EPSG3857,
-  var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
+      zoomControl: false,
-  map = new ga.Map({
-    target: 'map',
-    layers: [layer],
-    view: new ol.View({
-      center: position,
-      resolution: 20
-    })
   });
-  
+  var url = 'https://wmts20.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-farbe/default/current/3857/{z}/{x}/{y}.jpeg';
-  // Create the layer with the icon
+  var tilelayer = new L.tileLayer(url);
-  myfeature = new ol.Feature({
+  map.addLayer(tilelayer);
-        geometry: new ol.geom.Point(position)
+  map.setView(L.latLng(lat, lon), 10);
-      })
+
-  var vectorLayer = new ol.layer.Vector({
+  var overlayMaps = {
-    source: new ol.source.Vector({
+    "All": allmarkers
-      features: [myfeature]
+  };
-    }),
+  marker = L.marker([lat, lon],{icon: woBischIcon}).addTo(map);
-    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);
 
   $('#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>';
+  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>';
-  $('#tooltiptext').html(myhtml);
+  marker.bindPopup(myhtml).openPopup();
   console.log(myhtml);
 
-  var position = ol.proj.fromLonLat([datapoints[c.value][2], datapoints[c.value][1]], "EPSG:2056");
+  var lat = datapoints[c.value][1];
-  console.log(position);
+  var lng = datapoints[c.value][2];
-  myfeature.setGeometry(new ol.geom.Point(position));
+  var newLatLng = new L.LatLng(lat, lng);
+  console.log("Lat: "+lat+", Long: "+lng);
+  marker.setLatLng(newLatLng); 
 }