Leaflet layer doesn't handle dynamic data very well

[patrickarlt]

I have been able to reproduce some strange results by constantly adding data to the heatmap. here is what it looks like...

If you add this code to the map and click a few times you will start to notice that that you no longer have a nice continuous heatmap and that points start to layer on top of each other rather then merge together.

Here is the code I added to the leaflet demo.

function getRandomLatLng(map) {
  var bounds = map.getBounds(),
    southWest = bounds.getSouthWest(),
    northEast = bounds.getNorthEast(),
    lngSpan = northEast.lng - southWest.lng,
    latSpan = northEast.lat - southWest.lat;

  return new L.LatLng(
      southWest.lat + latSpan * Math.random(),
      southWest.lng + lngSpan * Math.random());
}

map.on("click", function(){
  var data = []
  for (var i = 200 - 1; i >= 0; i--) {
    var latlng = getRandomLatLng(map);
    data.push({
      lat: latlng.lat,
      lon: latlng.lng,
      value: 1
    })
  }
  heatmapLayer.setData(data);
});

I guess I would like to know if this is an issue specific to the leaflet layer or specific to core library. I really need to be able to add data dynamically for the HeatMap layer I want to do for Esri Leaflet https://github.com/Esri/esri-leaflet/issues/22 which would requires pulling data down from a web service and adding to the heatmap dynamically.

[jasperfirecai2]

I personally don't seem to have this issue. this is what defines my data (it's slightly more complicated than what you need but nonetheless this works):

GeoJSON = GeoJSONlist[dataindex]; //update the requested featurelist
                                    initdropdown(true); //important to make a comparison later
                                    for (var i = 0; i !== GeoJSON.features.length; i++) {
                                        var feature = GeoJSON.features[i]; //get a singular feature
                                        if (feature.properties.competence === select.options[parseInt(selected)].textContent) {
                                            //IF the feature is from the competence we want to see, add it to the data that will be displayed
                                            Data.push({lat: feature.geometry.coordinates[0], lng: feature.geometry.coordinates[1], mag: feature.properties.mag / 10});
                                            // the three relevant items
                                        }
                                    }

Most relevant line:

Data.push({lat: feature.geometry.coordinates[0], lng: feature.geometry.coordinates[1], mag: feature.properties.mag / 10});

followed by

heat.setData(data);

I can even draw data on in case you'd like to test that:

// draw with mouse
                            mymap.on({
                                movestart: function () {
                                },
                                moveend: function () {
                                },
                                mousemove: function (e) {
                                    if (draw) {
                                        heat.addData(e.latlng);
                                    }
                                },
                                'click': onMapClick
                            });

(where draw is determined by a button)