Mercurial > lbo > hg > geohub

changeset 69:236834c5b7ba

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Make LiveMap easier to use.
author Lewin Bormann <lbo@spheniscida.de>
date Fri, 04 Dec 2020 21:46:02 +0100
parents 93c64b78d129
children 6cd4c2120328
files assets/livemap.html
diffstat 1 files changed, 57 insertions(+), 8 deletions(-) [+]
line wrap: on
line diff
--- a/assets/livemap.html	Fri Dec 04 21:26:54 2020 +0100
+++ b/assets/livemap.html	Fri Dec 04 21:46:02 2020 +0100
@@ -5,8 +5,14 @@
         <title>GeoHub: LiveMap</title>
     </head>
     <body>
+    <script src="thirdparty/leaflet.js"></script>
 
-    <script src="thirdparty/leaflet.js"></script>
+    <span style="color: blue; font-weight: bold; margin-right: 3em;">GeoHub LiveMap</span>
+    <span id="inputFields">
+        Client: <input type="text" value="" id="inputClient" />
+        Secret: <input type="text" value="" id="inputSecret" />
+        <input type="button" value="Go!" id="inputGoButton" onclick="buttonGoClicked()" />
+    </span>
     <div id="mapid"> </div>
 
     <script>
@@ -25,8 +31,30 @@
 
     var urlParams = new URLSearchParams(window.location.search);
     var url = new URL(window.location);
-    var secret = urlParams.get('secret');
-    var client = urlParams.get('client');
+    var allMarkers = [];
+
+    function getClient() {
+        var inputClient = document.getElementById('inputClient');
+        var userClient = inputClient.value;
+        var urlClient = urlParams.get('client');
+
+        if (userClient.length == 0) {
+            inputClient.value = urlClient;
+            return urlClient;
+        }
+        return userClient;
+    }
+    function getSecret() {
+        var inputSecret = document.getElementById('inputSecret');
+        var userSecret = inputSecret.value;
+        var urlSecret = urlParams.get('secret');
+
+        if (userSecret.length == 0) {
+            inputSecret.value = urlSecret;
+            return urlSecret;
+        }
+        return userSecret;
+    }
 
     var current_marker = L.marker([0,0]).addTo(mymap);
     const circleProps = {color: 'blue', fillcColor: 'blue', fillOpacity: 0.5, radius: 3}
@@ -34,10 +62,17 @@
         var oldCoord = current_marker.getLatLng();
         current_marker.setLatLng(L.latLng(lat, lng));
         // Show last locations as blue points.
-        L.circle([oldCoord.lat, oldCoord.lng], circleProps).addTo(mymap);
+        var circle = L.circle([oldCoord.lat, oldCoord.lng], circleProps);
+        circle.addTo(mymap);
+        allMarkers.push(circle);
     }
 
-    xhrcallback = function(xhr) {
+    function clearAllMarkers() {
+        for (var i = 0; i < allMarkers.length; i++) {
+            allMarkers[i].remove();
+        }
+    }
+    function xhrcallback(xhr) {
         console.log('xhrcallback called.', xhr.readyState, xhr.status);
         if (xhr.readyState === XMLHttpRequest.DONE && xhr.status == 200) {
             const response = xhr.response;
@@ -49,7 +84,9 @@
                 if (features.length > 0) {
                     for (i = 1; i < features.length; i++) {
                         var coords = features[i]['geometry']['coordinates'];
-                        L.circle([coords[1], coords[0]], circleProps).addTo(mymap);
+                        var circle = L.circle([coords[1], coords[0]], circleProps);
+                        circle.addTo(mymap);
+                        allMarkers.push(circle);
                     }
                 }
 
@@ -66,8 +103,10 @@
     };
 
 
-    backfill = function(args) {
+    function backfill(args) {
         xhr = new XMLHttpRequest();
+        var client = getClient();
+        var secret = getSecret();
         var url = `../../geo/${client}/retrieve/last?secret=${secret}&limit=256`;
         console.log('Requesting URL (backfill) ' + url);
         xhr.responseType = 'json';
@@ -76,8 +115,10 @@
         xhr.send();
     }
 
-    waitforupdate = function() {
+    function waitforupdate() {
         xhr = new XMLHttpRequest();
+        var client = getClient();
+        var secret = getSecret();
         var secretparam = secret == null ? '' : `secret=${secret}`;
         var url = `../../geo/${client}/retrieve/live?${secretparam}&timeout=30`;
         console.log('Requesting URL ' + url);
@@ -87,6 +128,14 @@
         xhr.send();
     }
 
+    function buttonGoClicked() {
+        clearAllMarkers();
+        // Accelerate display.
+        backfill();
+    }
+
+    getClient();
+    getSecret();
     // Once data is backfilled, we wait for the update.
     backfill();