How to create a heatmap from overlapping polygons using ArcGIS Server JavaScript API?

Question

Using the ArcGIS Server JavaScript API version 4.18, how can I visually highlight areas with high concentrations of overlapping polygons, such as these historical cyclone tracks?

enter image description here

In addition I need to give higher weighting to more severe cylones based on a numerical attribute (HazardValue, as shown in the legend).

The ArcGIS Server JavaScript API contains a HeatMapRenderer, which looks promising but is only suitable for points.

If possible I would like to find a front-end solution rather than creating a raster on the server (I plan to add the ability to filter the polygons and would like the heatmap to regenerate dynamically based on the selection, which seems more suitable to front-end processing).

• Vince: The last time I needed to do that, I wrote an SOE geoprocessing service in ArcObjects Java, and rigged the JS client to send it the request and render the result.
• Stephen Lead: @Vince thanks, I'm hoping to avoid needing to use the back-end but it's good to know you had it working if it comes to that
• Dror Bogin: I think you would either need to use opacity like in your photo or create a point layer from your polygons and then use HeatmapRenderer, since each polygon has its own value you can create a "csv" layer (like the one used in this example) from the points and the value and use the heatmap renderer.
• Stephen Lead: @DrorBogin there you go, proof that it works ;)

Answer 1

In the end I wrote a Python script to create a mesh of points to represent each polygon, then used the aforementioned HeatMapRenderer to display them:

enter image description here

I was surprised to see the bright yellow hot-spot above Western Australia, which wasn't as apparent from the base polygons, even with a transparency. Which I guess demonstrates the benefit that this visualisation brings....

• Mahmoud Adel: brilliant work Stephen
• sal: That looks like what a need. Care to share some pointers on how you designed your python code?
• Stephen Lead: @sal I don't have the code handy at the moment. But from memory the Python script created a series of evenly-spaced points, say 10km apart on a grid. Then I clipped the grid with each polygon to give a new dataset consisting of evenly-spaced points representing that polygon. Overlaying all of the clipped-points-layers gives an approximation of the overall density of events occurring at each grid point location.