changeset 114:4060bc56cab7

livemap: Show speed in tooltip
author Lewin Bormann <lbo@spheniscida.de>
date Thu, 31 Dec 2020 19:36:06 +0100
parents 03b95c2693ec
children f9827ab0f35b
files assets/livemap.html assets/shared.js
diffstat 2 files changed, 14 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/assets/livemap.html	Wed Dec 30 08:40:31 2020 +0100
+++ b/assets/livemap.html	Thu Dec 31 19:36:06 2020 +0100
@@ -50,7 +50,7 @@
     // a new point (former position).
     var current_marker = L.marker([0,0]).addTo(mymap);
     var current_circle = L.circle([0,0], {}).addTo(mymap);
-    var current_props = {};
+    var current_props = null;
     function setCurrentLocation(lat, lng, props) {
         let accuracy = props.accuracy;
         var oldCoord = current_marker.getLatLng();
@@ -63,11 +63,13 @@
             radius: accuracy ? accuracy : 3,
         };
         // Show last locations as blue points.
-        addMarker(oldCoord.lat, oldCoord.lng, current_props);
+        if (current_props) {
+            addMarker(oldCoord.lat, oldCoord.lng, current_props);
+        }
         current_circle.remove();
 
         current_circle = L.circle([lat, lng], currentCircleProps).addTo(mymap);
-        current_circle.bindTooltip(shortTimestamp(new Date(props.time)));
+        current_circle.bindTooltip(locationTooltip(props));
         current_circle.openTooltip();
         current_props = props;
     }
@@ -80,7 +82,8 @@
             radius: accuracy ? accuracy : 3,
         };
         var circle = L.circle([lat, lng], circleProps).addTo(mymap);
-        circle.bindTooltip(shortTimestamp(new Date(props.time)));
+        console.log(props);
+        circle.bindTooltip(locationTooltip(props));
         allMarkers.push(circle);
     }
 
@@ -114,6 +117,7 @@
                 if (features.length > 0) {
                     for (i = 1; i < features.length; i++) {
                         var coords = features[i]['geometry']['coordinates'];
+                        console.log('features:', i, features[i].properties);
                         addMarker(coords[1], coords[0], features[i].properties);
                     }
                 }
@@ -186,7 +190,7 @@
         }
         let speedField = document.getElementById('outputSpeed');
         if (locProperties && locProperties.speed) {
-            speedField.textContent = locProperties.speed.toString();
+            speedField.textContent = locProperties.speed.toPrecision(1);
         } else {
             speedField.textContent = '0';
         }
--- a/assets/shared.js	Wed Dec 30 08:40:31 2020 +0100
+++ b/assets/shared.js	Thu Dec 31 19:36:06 2020 +0100
@@ -63,3 +63,8 @@
     var dateStr = `${year}-${month}-${day}`;
     return date.toLocaleTimeString('de-DE') + ', ' + dateStr;
 }
+function locationTooltip(properties) {
+    let date = shortTimestamp(new Date(properties.time));
+    let speed = properties.speed.toFixed(1);
+    return `${speed} km/h - ${date}`;
+}