[ speed up update of a heat map ]

I have several relatively big sets of data (around 86.000 points of latitude and longitude) that shows the global temperature distribution for different years. I represent this data with a heat map and for that I use the google map library. My goal is to show/animate the global temperature change over a range of X-years. Thus, for each selected year, I need to change/update a new heat map that shows the global temperature distribution of that year. I managed to write a code that updates the heat map by scrolling over a range bar or by pressing a forward/backward button. The problem I am facing is, that the update takes quite long (around 3-4 seconds). So, my question is, is there any way to speed up the update?

This is what I did to update the heat map: First, my data is an array (length 86.000), where each element has the following values: latitude,longitude,temperature of year x1, temperature of year x2, ..., temperature of year xn. So, the latitude and longitude coordinates are fixed for every year.

This is the code where I initialise my heat map:

var map, heatmap, heatmapData;

function initialize() {
    heatmapData = new google.maps.MVCArray();
    var mapOptions = {
            zoom: 2,
            center: new google.maps.LatLng(5,45),
            mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

    //Take data of 1st year
    for (var i = 1; i < data.length; i+=1) {
            var latLng = new google.maps.LatLng(data[i][2], data[i][1]);
            var temperature = data[i][3]
            var weightedLoc = {
                    location: latLng,
                    weight:temperature
            };
            heatmapData.push(weightedLoc);
    };

    heatmap = new google.maps.visualization.HeatmapLayer({
            data: heatmapData,
            dissipating: false,
            map: map,
            opacity: 0.8,
            radius: 1.2
    });

    heatmap.setMap(map);

}

And my update function looks like this:

function update(year){

    var index = year-firstYear+3;

    //just change value of temperature
    heatmapData.forEach(function(elm, i){
        elm.weight=data[i+1][index];
    });

    heatmap.set('data',heatmapData);
}

How could I improve this code in order to get a faster performance? Thx in advance!

Answer 1

Most of the time consumed by rendering the Heatmap is actually on the google maps heatmap functionallity, and there is little you can do there, unless you want to build your own heatmap funcionallity.

You could improve little bit your code by speeding up the update function using a simple for loop instead using foreach.

//just change value of temperature
    heatmapData.forEach(function(elm, i){
        elm.weight=data[i+1][index];
    });

//you could use instead:
  for(var i=0, len=heatmapData.length; i< len; i++) {
      heatmapData[i].weight = data[i+1][index];
  }

Take a look here to compare performance of different loop options: http://jsperf.com/for-vs-foreach/37

As you already have the DATA in memory, replacing that one big array with few arrays and disposing the original data array won't be a big memory issue.

var heatbyyear = [];
for (var j=3 ; j < yearsOfData; j++) {
    heatbyyear.push([]);
}
for (var i = 1; i < data.length; i+=1) {
        //Take data of 1st year
        var thisyear = [];
        var latLng = new google.maps.LatLng(data[i][2], data[i][1]);
        var temperature = data[i][3]
        var weightedLoc = {
                location: latLng,
                weight:temperature
        };
        heatmapData.push(weightedLoc);
        for (var j=3 ; j < yearsOfData; j++) {
            heatbyyear[j].push(data[i][j]);
        }
};
data = null;

and then you simply call:

function update(year){

    var index = year-firstYear+3;


    heatmap.set('data',heatbyyear[index]);
}