zwischenstand mit bugs...

static/css/wo-bisch-web-custom.css

@@ -48,7 +48,7 @@ hr.top {
  * * The CSS shown here will not be introduced in the Quickstart guide, but
  * * shows how you can use CSS to style your Element's container.
  * */
-input,
+input
 .StripeElement {
   height: 40px;
   padding: 10px 12px;

static/js/map.js

@@ -1,25 +1,32 @@
 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 lcontrol;
 var last_slider_position;
+var markers = [];
+var marker;
 var allmarkers = L.layerGroup();
+var woBischIcon = L.icon({
+    iconUrl: '/static/images/marker.png',
+    iconSize:     [64, 64],
+    iconAnchor:   [32, 64],
+    popupAnchor: [0, -64] 
+});
+var datapoints;
+var woBischIcon2 = L.icon({
+    iconUrl: '/static/images/marker-all.png',
+    iconSize:     [64, 64],
+    iconAnchor:   [32, 32],
+    popupAnchor: [0, 0] 
+});
 
-if (start == null) {
 var dstart = moment({hour: 0});
 var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-}
-
-if (stop == null) {
 var dstop = moment();
 var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
-}
-
-var datapoints;
 
 function vbat2icon(level) {
     switch (level) {
@@ -51,7 +58,6 @@ 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;
@@ -88,33 +94,27 @@ function refreshDatapoints(deveui, start, stop) {
     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();
 
+    markers = [];
+ 
     // we create the layer group with all positions
-    var markers = [];
+    var myIcon = L.divIcon({className: 'my-div-icon'});
     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')));
+      markers.push(L.marker([i[1], i[2]], {icon: woBischIcon2}).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);
+    if (lcontrol != undefined) {
+      //lcontrol.clearLayers();
+      lcontrol.remove();
+    }
+    lcontrol = L.control.layers({}).addTo(map);
+    lcontrol.addOverlay(allmarkers,'alle Positionen anzeigen');
+    var bounds = new L.LatLngBounds([[mydata['max_lat'], mydata['max_lon']], [mydata['min_lat'], mydata['min_lon']]]);
+    map.fitBounds(bounds, { padding: [20, 20] });
   });
 }
 
-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() {
   map = new L.Map('map', {
       crs: L.CRS.EPSG3857,
@@ -124,21 +124,13 @@ $(document).ready(function() {
   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);
-
+  marker = L.marker([lat, lon],{icon: woBischIcon, zIndexOffset: 1000}).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...");
 });
 
-
 $(function() {
     var start = moment({hour: 0});
     var end = moment();
@@ -202,11 +194,8 @@ $(function() {
         }
     }, cb);
 
-    //cb(start, end);
-
 });
 
-
 function updateSliderTooltip(c)
 {
   if (datapoints == undefined || datapoints.length == 0) {