heatmap_client.js

$(document).ready(function () {

    var socket = io.connect('http://' + location.host),
        $body = $('body'),
        body_width = $body.width(),
        body_height = $body.height(),
        count_datapoints = 0,
        $map = $('#map'),
        datapoints = 1500,
        heatmap = new google.maps.visualization.HeatmapLayer({
            data: new google.maps.MVCArray(),
            radius: 15
        }),
        srcmap = new google.maps.visualization.HeatmapLayer({
            data: new google.maps.MVCArray(),
            radius: 15,
            gradient: ['rgba(0, 255, 255, 0)',
                'rgba(0, 255, 255, 1)',
                'rgba(0, 191, 255, 1)',
                'rgba(0, 127, 255, 1)',
                'rgba(0, 63, 255, 1)',
                'rgba(0, 0, 255, 1)',
                'rgba(0, 0, 223, 1)',
                'rgba(0, 0, 191, 1)',
                'rgba(0, 0, 159, 1)',
                'rgba(0, 0, 127, 1)',
                'rgba(63, 0, 91, 1)',
                'rgba(127, 0, 63, 1)',
                'rgba(191, 0, 31, 1)',
                'rgba(255, 0, 0, 1)']
        });

    $map.width(body_width + "px").height(body_height + "px").gmap3({
        map: {
            options: {
                mapTypeId: google.maps.MapTypeId.SATELLITE,
                zoom: 3,
                mapTypeControl: true,
                navigationControl: true,
                scrollwheel: true,
                streetViewControl: false
            }
        }
    });

    var map = $map.gmap3('get');
    heatmap.setMap(map);
    srcmap.setMap(map);

    $span = $('#datapoints');
    $maxdp = $('#datapointborder');
    $maxdp.val(datapoints);

    var borderpoints = datapoints;
    $('#set').on('click', function () {
        borderpoints = Number($('#datapointborder').val());
        while (count_datapoints >= borderpoints) {
            heatmap.data.removeAt(0);
            srcmap.data.removeAt(0);
            count_datapoints--;
        }
        $span.text(count_datapoints);
    });

    socket.on('heatmap', function (msg) {
        var src = msg['src'], dest = msg['dest'];
        if (dest == null || dest[0] == null || dest[1] == null) return;
        if (count_datapoints > borderpoints) {
            srcmap.data.removeAt(0);
            heatmap.data.removeAt(0);
        }
        else {
            count_datapoints++;
            $span.text(count_datapoints);
        }
        heatmap.data.push(new google.maps.LatLng(dest[0], dest[1]));
        srcmap.data.push(new google.maps.LatLng(src[0], src[1]));
    });
});