Mercurial > lbo > hg > geohub
view assets/livemap.html @ 56:e47f25aef153
track_ICE: better collect logging
author | Lewin Bormann <lbo@spheniscida.de> |
---|---|
date | Thu, 03 Dec 2020 22:38:54 +0100 |
parents | 2d6770d7e8cf |
children | f64f759b5b28 |
line wrap: on
line source
<html> <head> <link rel="stylesheet" href="thirdparty/leaflet.css" /> <link rel="stylesheet" href="style.css" /> </head> <body> <script src="thirdparty/leaflet.js"></script> <div id="mapid"> </div> <script> const initial = [50, 12]; var mymap = L.map('mapid').setView(initial, 13); 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 © <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, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: accessToken, }).addTo(mymap); var urlParams = new URLSearchParams(window.location.search); var url = new URL(window.location); var secret = urlParams.get('secret'); var client = urlParams.get('client'); 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 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); } xhrcallback = function(xhr) { console.log('xhrcallback called.', xhr.readyState, xhr.status); if (xhr.readyState === XMLHttpRequest.DONE && xhr.status == 200) { const response = xhr.response; if (response['geo']) { const features = response['geo']['features']; const lastfeature = features[0]; console.log(`xhrcallback: ${features.length} elements received.`); // Backfill old circles. 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 coords = lastfeature['geometry']['coordinates']; console.log('Received update:', coords, 'last:', response); setCurrentLocation(coords[1], coords[0]); mymap.setView([coords[1], coords[0]], mymap.getZoom()); } // Install next XHR. waitforupdate(); } }; backfill = function(args) { xhr = new XMLHttpRequest(); var url = `/geo/${client}/retrieve/last?secret=${secret}&limit=256`; console.log('Requesting URL (backfill) ' + url); xhr.responseType = 'json'; xhr.open('GET', url, true); xhr.onreadystatechange = function() { xhrcallback(xhr); }; xhr.send(); } waitforupdate = function() { xhr = new XMLHttpRequest(); var secretparam = secret == null ? '' : `secret={secret}`; var url = `/geo/${client}/retrieve/live?${secretparam}&timeout=30`; console.log('Requesting URL ' + url); xhr.responseType = 'json'; xhr.open('GET', url, true); xhr.onreadystatechange = function() { xhrcallback(xhr) }; xhr.send(); } // Once data is backfilled, we wait for the update. backfill(); </script> </body> </html>