CSVLayer doesn't show HeatMap in Angular 6

Question

I am using ArcGIS JavaScript 4.8 API and I have integrated the CSVLayer to an Angular 6 application but it is not showing up any heat map. The legend shows that it is getting renderer data and heatmap is added as renderer. But no heatmap is getting shown.

But when I click on the map where I am expecting the heatmap, I can see the PopupTemplate showing my data. An image is given below:

When I zoom into my CSV layer, I can see the points on the map which I have created by replacing heatmaprenderer with simplerenderer on scale event. Screenshots are given below:

No Heatmap:

After Zooming in on CSV Layer (Top one):

Also, I converted an example from the ArcGIS Website to an Angular component and tried to show it on the website. But it is also not showing up any data. I used 'Create a scale-dependent visualization text' example from here. Sandbox Code is here.

My code is on GitHub. (https://github.com/SiddharthMishraPersonal/arcgis-csvlayer-example) In the above images, you can see that the second map is not showing any heat map.

Please let me know if I am doing something wrong.

Answer 1

HeamapRenderers do support CSVLayers on 4.8, if WebGL is enabled.

The HeatmapRenderer renders point FeatureLayers and CSVLayers as a raster surface, emphasizing areas with a high density of points. This renderer uses a Gaussian Blur to determine the strength of the influence of each point over an area determined by the blurRadius. A Gaussian, or normal, distribution is used to spread the color of the point so it appears to be a fuzzy circle.

Make sure you have WebGL enabled by adding the snippet below to your application.

<script>
  var dojoConfig = {
    has: {
      "esri-featurelayer-webgl": 1
    }
  };
</script>

Answer 2

The HeatmapRenderer only works with WebGL-enabled FeatureLayer, and at version 4.8 one of the limitations for WebGL-support is listed as:

Layers created from feature collections or client-side graphics are not supported. https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#webgl-rendering This limitation should hopefully go away at next release (version 4.9).

So, to make it work, we need to include below JavaScript code in index.html file for Angular 2+ product:

<script>
var dojoConfig = {
  has: {
    "esri-featurelayer-webgl": 1
  }
};

I fixed the project and pushed the changes to the project.

I posted the same question to the Esri GeoNet Community and they answered it quite fast. You can find their answer here.