Mercurial > lbo > hg > geohub

<html>
    <head>
        <link rel="stylesheet" href="thirdparty/leaflet.css" />
        <link rel="stylesheet" href="style.css" />
        <title>GeoHub: LiveMap</title>
    </head>
    <body>
    <script src="thirdparty/leaflet.js"></script>

    <span style="color: blue; font-weight: bold; margin-right: 3em;">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>
    <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 allMarkers = [];

    function getClient() {
        var inputClient = document.getElementById('inputClient');
        var userClient = inputClient.value;
        var urlClient = urlParams.get('client');

        if (userClient.length == 0) {
            inputClient.value = urlClient;
            return urlClient;
        }
        return userClient;
    }
    function getSecret() {
        var inputSecret = document.getElementById('inputSecret');
        var userSecret = inputSecret.value;
        var urlSecret = urlParams.get('secret');

        if (userSecret.length == 0) {
            inputSecret.value = urlSecret;
            return urlSecret;
        }
        return userSecret;
    }

    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.
        var circle = L.circle([oldCoord.lat, oldCoord.lng], circleProps);
        circle.addTo(mymap);
        allMarkers.push(circle);
    }

    function clearAllMarkers() {
        for (var i = 0; i < allMarkers.length; i++) {
            allMarkers[i].remove();
        }
    }
    function xhrcallback(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'];
                        var circle = L.circle([coords[1], coords[0]], circleProps);
                        circle.addTo(mymap);
                        allMarkers.push(circle);
                    }
                }

                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();
        }
    };


    function backfill(args) {
        xhr = new XMLHttpRequest();
        var client = getClient();
        var secret = getSecret();
        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();
    }

    function waitforupdate() {
        xhr = new XMLHttpRequest();
        var client = getClient();
        var secret = getSecret();
        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();
    }

    function buttonGoClicked() {
        clearAllMarkers();
        // Accelerate display.
        backfill();
    }

    getClient();
    getSecret();
    // Once data is backfilled, we wait for the update.
    backfill();

    </script>

    </body>
</html>
author	Lewin Bormann <lbo@spheniscida.de>
date	Fri, 04 Dec 2020 21:52:59 +0100
parents	236834c5b7ba
children	4249238c40c8