Question

I’m using websockets to send data from the server to the client. This works fine so for example I can display messages the server is sending to the client as they are received.
I’m able to convert this into longitude and latitudes.

So as data is recieved from the server it should plot onto the map in my html, but it doesn’t seem to be plotting anything at all.

I’m completely new to javascript so am unsure if my code is correct. What I would like to ideally do is has soon data is received it is plotted straight onto the map and thus generate the heat map. This is the javascript side of the code:

<script>
    $(document).ready(function() {
        var ws = new WebSocket("ws://" + "localhost" + ":" + "8888" + "/ws");
        var London = new google.maps.LatLng(51.507335, -0.127683);

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: London,
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var pointArray = new google.map.MVCArray([]);           
    ws.onmessage = function(evt){  
            //$("#display").append(evt.data + "<br />");

            var msg = JSON.parse(evt.data);
            var coordinates = msg.coordinates.coordinates;
            var latLng = new google.maps.LatLng(coordinates[1], coordinates[0]);
            console.log('received');
            pointArray.push(latLng);
            var heatmap = new google.maps.visualization.HeatmapLayer({
                data: pointArray
            });
            heatmap.setMap(map);

            //$("#display").append(latLng + "<br />");

            //console.log(evt.data);

    };

    ws.onclose = function(evt) {alert("Server connection terminated");};
   });      
    $("#open").click(function(evt){
    evt.preventDefault();
    $.post("/", $("#eventForm").serialize());   

});

</script>

Would there be a way so that as data is received it’s stored into an array, BUT then I’m not sure how then I could update the map with element in the array has it is received.
Thanks

Answer 1

I can’t say for sure if this is the only issue, but you appear to have a scoping issue here –

ws.onmessage = function (evt) {
    var msg = JSON.parse(evt.data);
    var coordinates = msg.coordinates.coordinates;
    var latLng = new google.maps.LatLng(coordinates[1], coordinates[0]);
};
...
var heatmap = new google.maps.visualization.HeatmapLayer({
    data: latLng
});

The way scopes work in javascript is that latLng is only available to code within the function it is declared. An easy way to fix this would be to just declare it in the scope they share –

var latLng;
ws.onmessage = function (evt) {
    var msg = JSON.parse(evt.data);
    var coordinates = msg.coordinates.coordinates;
    latLng = new google.maps.LatLng(coordinates[1], coordinates[0]);
};
...
var heatmap = new google.maps.visualization.HeatmapLayer({
    data: latLng
});

This will make latLng accessible to other parts of the code in the click function.

A few other possible issues:

If you want to progressively add data to a map, your structure is in general a bit off. What you’d want to do is create a single map that’s inside the webpage, then continually add data to it – there’s no need to create a new map each time. What you probably should be doing is creating the map inside of the ready function, not the click.

Also, there is a single heatmap layer in a google map; if you create new heatmaps for each bit of received data, you’ll be overriding everything that you have put into prior heatmaps. Given your most recent edit it looks like you’ve already reached the same conclusion though.

I’m also not quite sure your websocket code is quite as good as it needs to be. The websocket “onmessage” function will not immediately return results: rather, it provides instructions on how to handle any data that comes in at any point in the future. So, if you want to update the map every time that data comes in, you do not need to do anything with websockets on a click event.

This will lead to code that is loosely structured like this –

$(document).ready(function () {
    var ws = new WebSocket("ws://" + "localhost" + ":" + "8888" + "/ws");
    var London = new google.maps.LatLng(51.507335, -0.127683);

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: London,
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    var pointArray = new google.map.MVCArray([]);
    ws.onmessage = function (evt) {
        var msg = JSON.parse(evt.data);
        var coordinates = msg.coordinates.coordinates;
        pointArray.push(new google.maps.LatLng(coordinates[1], coordinates[0]));
        var heatmap = new google.maps.visualization.HeatmapLayer({
            data: pointArray
        });
        heatmap.setMap(map);
    };

    $("#open").click(function (evt) {
        // whatever code you want click to do
    });
});

I cannot test any of this code as I do not have your specific websocket setup, but hopefully this gives you a better grounding to go from here.