Angular-Leaflet heatmap data update

Question

I'm using the Angular-Leaflet directive to display a heatmap, and I want the data to evolve through time. My code looks like:

getData().then(function (data) {
    $scope.heat.index = 0;
    $scope.heat.data = data;
    $scope.layers.overlays.heat = {
        name: "Heatmap",
        type: "heat",
        data: $scope.heat.data[$scope.heat.index],  // data is a dictionary, not an array
        visible: true
    };
    $scope.$watch('heat.index', function (new_index) {
        $scope.layers.overlays.heat.data = $scope.heat.data[new_index];
    });
});

However, when I change data.index (through a slider), nothing happens. What could be going on? I know that Angular-Leaflet supports this behavior because of this Github issue where someone added it.

user5714726 user5714726 · Accepted Answer · 2017-10-13T14:16:40

leafletData.getMap().then(function (map) {
  map.eachLayer(function (layer) {
    if (layer.options.layerName == 'heatmap') {
       layer.setLatLngs(newHeatmapData);
    }
  })
})

This worked for me.

Leaflet.heat provides a redraw() method but that didn't work for me.

Angular-Leaflet heatmap data update

1 Answers