--- a/assets/livemap.html	Mon Dec 07 11:23:30 2020 +0100
+++ b/assets/livemap.html	Mon Dec 07 18:18:48 2020 +0100
@@ -8,15 +8,17 @@
     <script src="thirdparty/leaflet.js"></script>
     <script src="shared.js"></script>
 
-    <span id="livemapTitle">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>
-    <span id="infoFields" class="timeChanged">
+        <span id="livemapTitle">GeoHub LiveMap</span>
+    <div>
+        <span id="inputFields">
+            Client: <input type="text" value="" id="inputClient" class="field" />
+            Secret: <input type="text" value="" id="inputSecret" class="field" />
+            <input type="button" value="Go!" id="inputGoButton" onclick="buttonGoClicked()" />
+        </span>
+    </div>
+    <div id="infoFields" class="timeChanged">
         Last Update: <span id="outputLastUpdate"> </span>
-    </span>
+    </div>
 
     <div id="mapid"> </div>
 
@@ -27,6 +29,7 @@
     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}', {
         attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
         maxZoom: 18,
@@ -43,12 +46,30 @@
     // 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) {
+    var current_circle = L.circle([0,0], {}).addTo(mymap);
+    function setCurrentLocation(lat, lng, accuracy) {
         var oldCoord = current_marker.getLatLng();
         current_marker.setLatLng(L.latLng(lat, lng));
+        // Show accuracy of current location
+        const currentCircleProps = {
+            color: 'aqua',
+            fillColor: 'aqua',
+            fillOpacity: 0.1,
+            radius: accuracy ? accuracy : 3,
+        };
+        current_circle.remove();
+        current_circle = L.circle([lat, lng], currentCircleProps).addTo(mymap);
         // Show last locations as blue points.
-        var circle = L.circle([oldCoord.lat, oldCoord.lng], circleProps);
+        addMarker(oldCoord.lat, oldCoord.lng, accuracy);
+    }
+    function addMarker(lat, lng, accuracy) {
+        const circleProps = {
+            color: 'blue',
+            fillColor: 'blue',
+            fillOpacity: 0.1,
+            radius: accuracy ? accuracy : 3,
+        };
+        var circle = L.circle([lat, lng], circleProps);
         circle.addTo(mymap);
         allMarkers.push(circle);
     }
@@ -83,16 +104,14 @@
                 if (features.length > 0) {
                     for (i = 1; i < features.length; i++) {
                         var coords = features[i]['geometry']['coordinates'];
-                        var circle = L.circle([coords[1], coords[0]], circleProps);
-                        circle.addTo(mymap);
-                        allMarkers.push(circle);
+                        addMarker(coords[1], coords[0], features[i].properties.accuracy);
                     }
                 }
 
                 var coords = lastfeature['geometry']['coordinates'];
 
                 console.log('Received update:', coords, 'last:', response);
-                setCurrentLocation(coords[1], coords[0]);
+                setCurrentLocation(coords[1], coords[0], lastfeature.properties.accuracy);
                 // 13 is a good default zoom for an updated point.
                 mymap.setView([coords[1], coords[0]], mapZoomed ? mymap.getZoom() : 13);
                 mapZoomed = true;

--- a/assets/style.css	Mon Dec 07 11:23:30 2020 +0100
+++ b/assets/style.css	Mon Dec 07 18:18:48 2020 +0100
@@ -1,5 +1,12 @@
+body {
+    text-size: 120%;
+}
+.field {
+    width: 15em;
+}
 #mapid {
-    height: 100%;
+    height: 95%;
+    width: 95%;
     margin: 5px;
 }
 #livemapTitle {