Mercurial > lbo > hg > geohub
changeset 85:b929614334be
Livemap: Display last update time.
author | Lewin Bormann <lbo@spheniscida.de> |
---|---|
date | Mon, 07 Dec 2020 11:07:28 +0100 |
parents | 900d688cd1b9 |
children | d2ff3a9d066d |
files | TODO assets/livemap.html assets/style.css |
diffstat | 3 files changed, 23 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/TODO Sun Dec 06 21:52:47 2020 +0100 +++ b/TODO Mon Dec 07 11:07:28 2020 +0100 @@ -1,9 +1,8 @@ GENERAL * UI - * trackme: Tell user to fill secret/client - * Show link to livemap - * show circle radius by accuracy + * livemap: show circle radius by accuracy + * livemap: show time of last update * API FEATURES
--- a/assets/livemap.html Sun Dec 06 21:52:47 2020 +0100 +++ b/assets/livemap.html Mon Dec 07 11:07:28 2020 +0100 @@ -8,12 +8,16 @@ <script src="thirdparty/leaflet.js"></script> <script src="shared.js"></script> - <span style="color: blue; font-weight: bold; margin-right: 3em;">GeoHub LiveMap</span> + <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"> + Last Update: <span id="outputLastUpdate"> </span> + </span> + <div id="mapid"> </div> <script> @@ -89,6 +93,8 @@ // 13 is a good default zoom for an updated point. mymap.setView([coords[1], coords[0]], mapZoomed ? mymap.getZoom() : 13); mapZoomed = true; + + updateUI(lastfeature.properties.time); } // Install next XHR. @@ -135,6 +141,9 @@ lastXHR = xhr; } + function updateUI(time) { + document.getElementById('outputLastUpdate').textContent = Date(time).toLocaleString(); + } // "Go!" was clicked - clear markers and fetch data for new source. function buttonGoClicked() { clearAllMarkers();
--- a/assets/style.css Sun Dec 06 21:52:47 2020 +0100 +++ b/assets/style.css Mon Dec 07 11:07:28 2020 +0100 @@ -1,3 +1,14 @@ #mapid { height: 100%; + margin: 5px; } +#livemapTitle { + color: blue; + font-weight: bold; + margin-right: 3em; +} +#infoFields { + border-style: solid; + border-color: green; + padding: 5px; +}