CODEWITHSUNDEEP
javascriptgoogle-mapsheatmap
Biribu
Biribu

Reputation: 3823

Delete heat map for refreshing

I have a heat map in my webpage. It works fine but I have to refresh the whole page to get new values.

I am changing it now to get values each 5 seconds and paint new values.

Also works fine. But I think new values are being painted over old ones because I get each 5 seconds a brighter noise point.

How do I remove painted values and paint new ones?

function initialize() {
    mapOptions = {
      zoom: 16,
      center: new google.maps.LatLng(lat, lon),
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    initValues();
  }

  function initValues(){
    pointArray = new google.maps.MVCArray(taxiData);

    heatmap = new google.maps.visualization.HeatmapLayer({
      data: pointArray
    });
        heatmap.setOptions({radius: 40});
    heatmap.setMap(map);
  }

In taxiData I have the updated values each time I call initValues function. I call once initialize and then, every 5 seconds, I update taxiData and call initValues.

Upvotes: 2

Views: 2119

Answers (2)

Professor Abronsius
Professor Abronsius

Reputation: 33813

For anyone else searching for this I found the following worked.

Begin by declaring the variable as a global that will hold the heatmap MVCObject.

var mvcObj;

Then, in the function you use to add the heatmap

if( typeof( mvcObj )=='object' ) mvcObj.clear();
/* locations is an array of latlngs */
mvcObj = new google.maps.MVCArray( locations );

/* this.map is a reference to the map object */
var heatmap = new google.maps.visualization.HeatmapLayer({
    data: mvcObj,
    map: this.map
});

Upvotes: 2

geocodezip
geocodezip

Reputation: 161334

This should work (hide the old heatmap before adding the new one):

function initialize() {
    mapOptions = {
      zoom: 16,
      center: new google.maps.LatLng(lat, lon),
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    initValues();
  }

  function initValues(){
    pointArray = new google.maps.MVCArray(taxiData);
    if (!!heatmap && !!heatmap.setMap)
      heatmap.setMap(null);
    heatmap = new google.maps.visualization.HeatmapLayer({
      data: pointArray
    });
    heatmap.setOptions({radius: 40});
    heatmap.setMap(map);
  }

Upvotes: 1

Related Questions