heatmap.html

---
layout: default
title: Realtime Usage
no_edit_link: true
---

<div class="status">
    <div id="map"></div>

    <script>
        var maxHeatPoints = 5000;

        var maxMindAttribution = 'This product includes GeoLite data created by <a href="https://www.maxmind.com">MaxMind</a>';

        var layerOsmMapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | ' + maxMindAttribution,
        });

        var layerHeatAll = L.heatLayer([], {
            minOpacity: .4,
            radius: 20,
            attribution: maxMindAttribution, // does not work
        });

        var map = L.map('map', {
            layers: [layerOsmMapnik, layerHeatAll],
            fullscreenControl: true,
            maxBounds: [[90,-180], [-90,180]],
        }).fitBounds([[75,-160], [-45,160]]);

        var UsersOnlineControl = L.Control.extend({
            initialize: function (options) {
                L.Util.setOptions(this, options);
            },

            onAdd: function(map) {
                this._div = L.DomUtil.create('div', 'infobox');
                this.update('???');
                return this._div;
            },

            update: function(active) {
                this._div.innerHTML = 'Estimated number of c:geo users in online mode: ' + active;
            },
        });

        var info = new UsersOnlineControl({
            position: 'topright'
        }).addTo(map);

        var heatmapData = [];

        function updateHeatmap(clients, active) {
            clients.map(function(client) {
                heatmapData.push([client.latitude, client.longitude]);
            });
            var limit = Math.min(maxHeatPoints, active);
            if (heatmapData.length > limit) {
                heatmapData.splice(0, heatmapData.length - limit);
            }
            layerHeatAll.setLatLngs(heatmapData);
        }

        var wsLastRequest = 0;

        function startWebsocket() {
            var ws = new WebSocket("wss://status.cgeo.org/api/locations?initial=" + maxHeatPoints + "&timestamp=" + wsLastRequest);

            ws.onmessage = function(msg) {
                var data = JSON.parse(msg.data);
                wsLastRequest = data.timestamp;
                updateHeatmap(data.clients, data.located);
                info.update(data.active);
            };

            ws.onclose = function(event) {
                setTimeout(function(){ startWebsocket(); }, 5000);
            }
        }

        startWebsocket();
    </script>
</div>