Mercurial > lbo > hg > geohub

<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 &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,
        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 url = `/geo/${client}/retrieve/live?secret=${secret}&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>
author	Lewin Bormann <lbo@spheniscida.de>
date	Thu, 03 Dec 2020 09:37:27 +0100
parents	ac040131eac8
children	2d6770d7e8cf