--- a/assets/livemap.html	Fri Dec 04 21:52:59 2020 +0100
+++ b/assets/livemap.html	Fri Dec 04 23:27:19 2020 +0100
@@ -16,8 +16,10 @@
     <div id="mapid"> </div>
 
     <script>
-    const initial = [50, 12];
-    var mymap = L.map('mapid').setView(initial, 13);
+    // Set up map.
+    const initial = [50, 10];
+    var mapZoomed = false;
+    var mymap = L.map('mapid').setView(initial, 5);
 
     var accessToken = 'pk.eyJ1IjoiZGVybWVzc2VyIiwiYSI6ImNraTdwZmUxZTE2OGgydW1oYTU5eW9qYm4ifQ.f9OxY_U78h6iefp-jN9-9w';
     L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
@@ -33,6 +35,8 @@
     var url = new URL(window.location);
     var allMarkers = [];
 
+    // Figure out client/secret from URL and/or UI field. Update UI field with URL value
+    // available.
     function getClient() {
         var inputClient = document.getElementById('inputClient');
         var userClient = inputClient.value;
@@ -51,11 +55,13 @@
 
         if (userSecret.length == 0) {
             inputSecret.value = urlSecret;
-            return urlSecret;
+            return urlSecret ? urlSecret : '';
         }
-        return userSecret;
+        return userSecret ? userSecret : '';
     }
 
+    // Set the current location, called on every new point. Updates the marker and adds
+    // a new point (former position).
     var current_marker = L.marker([0,0]).addTo(mymap);
     const circleProps = {color: 'blue', fillcColor: 'blue', fillOpacity: 0.5, radius: 3}
     function setCurrentLocation(lat, lng) {
@@ -67,11 +73,13 @@
         allMarkers.push(circle);
     }
 
+    // Remove all points from the map (except for the "current position" marker).
     function clearAllMarkers() {
         for (var i = 0; i < allMarkers.length; i++) {
             allMarkers[i].remove();
         }
     }
+    // New points are available. Display them on the map and update the marker.
     function xhrcallback(xhr) {
         console.log('xhrcallback called.', xhr.readyState, xhr.status);
         if (xhr.readyState === XMLHttpRequest.DONE && xhr.status == 200) {
@@ -94,7 +102,9 @@
 
                 console.log('Received update:', coords, 'last:', response);
                 setCurrentLocation(coords[1], coords[0]);
-                mymap.setView([coords[1], coords[0]], mymap.getZoom());
+                // 13 is a good default zoom for an updated point.
+                mymap.setView([coords[1], coords[0]], mapZoomed ? mymap.getZoom() : 13);
+                mapZoomed = true;
             }
 
             // Install next XHR.
@@ -103,10 +113,14 @@
     };
 
 
+    // Fetch the most recent point for this client and display them.
     function backfill(args) {
         xhr = new XMLHttpRequest();
         var client = getClient();
         var secret = getSecret();
+        if (!client) {
+            return;
+        }
         var url = `../../geo/${client}/retrieve/last?secret=${secret}&limit=256`;
         console.log('Requesting URL (backfill) ' + url);
         xhr.responseType = 'json';
@@ -115,10 +129,15 @@
         xhr.send();
     }
 
+    // Ask for updates. This request will hang until timeout is reached or
+    // an update arrives.
     function waitforupdate() {
         xhr = new XMLHttpRequest();
         var client = getClient();
         var secret = getSecret();
+        if (!client) {
+            return;
+        }
         var secretparam = secret == null ? '' : `secret=${secret}`;
         var url = `../../geo/${client}/retrieve/live?${secretparam}&timeout=30`;
         console.log('Requesting URL ' + url);
@@ -128,6 +147,7 @@
         xhr.send();
     }
 
+    // "Go!" was clicked - clear markers and fetch data for new source.
     function buttonGoClicked() {
         clearAllMarkers();
         // Accelerate display.

--- a/assets/trackme.html	Fri Dec 04 21:52:59 2020 +0100
+++ b/assets/trackme.html	Fri Dec 04 23:27:19 2020 +0100
@@ -59,6 +59,8 @@
     // Tell the user where their data is going.
     document.getElementById('uiHost').textContent = thisUrl.hostname;
 
+    // Figure out the client: Try to get it from the user entry field, if it is empty
+    // try the URL parameter, in that case fill in the field.
     function getClient() {
         var inputClient = document.getElementById('inputClient');
         var userClient = inputClient.value;
@@ -70,6 +72,7 @@
         }
         return userClient;
     }
+    // Figure out the secret.
     function getSecret() {
         var inputSecret = document.getElementById('inputSecret');
         var userSecret = inputSecret.value;
@@ -81,12 +84,14 @@
         }
         return userSecret;
     }
+    // Update the link to the livemap if the user has changed client/secret.
     function updateLiveMap() {
         var secret = getSecret();
         var client = getClient();
         var url = `livemap.html?secret=${secret}&client=${client}`;
         document.getElementById('hrefLiveMap').href = url;
     }
+    // Update the table to the newly aquired point.
     function updateUITable(pos) {
         var coord = pos.coords;
         var lastTime = new Date(pos.timestamp);
@@ -96,10 +101,12 @@
         document.getElementById('tblLong').textContent = coord.longitude.toString();
         document.getElementById('tblStatus').textContent = 'Acquired';
     }
+    // Show that the current point has been logged.
     function updateUITableSetLogged() {
         document.getElementById('tblStatus').textContent = 'Logged';
     }
 
+    // Called once the `POST .../log` request has finished.
     function xhrLogCallback(xhr, readyStateChange) {
         if (xhr.readyState === XMLHttpRequest.DONE) {
             if (xhr.status == 200) {
@@ -112,6 +119,8 @@
     }
 
     // Returns closure f(GeolocationCoordinates) logging to this Geohub.
+    // The returned function accepts a GeoLocation position and sends an XHR request
+    // to this GeoHub instance.
     function getLoggingHandler() {
         var lastLat = 0;
         var lastLong = 0;
@@ -128,6 +137,7 @@
                 return;
             }
 
+            // Show new data in UI.
             updateUITable(glp);
 
             lastLat = glc.latitude;
@@ -136,10 +146,11 @@
             const speedorempty = glc.speed ? `s=${glc.speed}` : '';
             const elevationorempty = glc.altitude ? `ele=${glc.altitude}` : '';
             const accorempty = glc.accuracy ? `accuracy=${glc.accuracy}` : '';
+            var querystring = `&lat=${glc.latitude}&longitude=${glc.longitude}&${speedorempty}&${elevationorempty}&${accorempty}`;
+
             var trackUrl = thisUrl.origin + thisUrl.pathname;
             // Maybe just use relative path?
             trackUrl = trackUrl.replace('assets/trackme.html', `${client}/log?secret=${getSecret()}`);
-            var querystring = `&lat=${glc.latitude}&longitude=${glc.longitude}&${speedorempty}&${elevationorempty}&${accorempty}`;
             var url = trackUrl+querystring;
 
             var xhr = new XMLHttpRequest();
@@ -150,8 +161,12 @@
         };
     }
 
+    // Main execution starts here.
+
+    // loggingHandler is a closure produced above.
     const loggingHandler = getLoggingHandler();
 
+    // Handles new events from the GeoLocation API.
     function locationUpdate(pos) {
         console.log('new location:', pos);
         loggingHandler(pos);