Using a HeatMap renderer on a GraphicsLayer

TomSellsted

Greetings,

I have created an app that we use for public safety public disclosure requests.  The app uses a geoprocessing script that queries a database (not geodatabase) that returns rows that have lat/lon coordinates.  Points are then created with the attributes and added to a GraphicsLayer and drawing the layer with a SimpleRenderer to begin with.  I have added a couple of buttons that allow the user to change how the points are displayed.  This displays fine with a SimpleRenderer or UniqueValueRenderer, but won't work with a HeatmapRenderer.  There are no errors in the console, just a blank map.

I have read the documentation and there isn't anything that says a HeatmapRenderer won't work with GraphicsLayer.  I have seen some similar posts that don't actually answer this question.  The code for this seems pretty straightforward.  Here are some snippets for changing the renderers:

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">displayBasicPoints</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> marker <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">168</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> resultsRenderer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleRenderer</SPAN><SPAN class="punctuation token">(</SPAN>marker<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setRenderer</SPAN><SPAN class="punctuation token">(</SPAN>resultsRenderer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">refresh</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="punctuation token">}</SPAN>

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">displayHeatmap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultsLayer<SPAN class="punctuation token">.</SPAN>spatialReference <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> hr <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">HeatmapRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setRenderer</SPAN><SPAN class="punctuation token">(</SPAN>hr<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resultsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">refresh</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

You can also view the app at:  DEX Queries 

Thanks very much for any help!

Regards,

Tom

TomSellsted

Greetings,

I ended up contacting support to see why this wasn't possible.  The answer was that this was by design.  The renderer for a heatmap requires a schema for possible weighting fields and uses the geometry type as set in a featurelayer.  Support was also adding a documentation enhancement that would better describe that the renderer should be used with a featurelayer.

I did find that you can use a unique value renderer with a graphicslayer, so this does seem a bit inconsistent.  It would be nice to render a heatmap in a graphicslayer just based on the geometry and without the ability to use a weight field.

I am going to work on moving my table data into a feature collection that can be used with a featurelayer so it can render a heatmap.  Support pointed me to an example that will be helpful.  Feature collection | ArcGIS API for JavaScript 3.20 

Regards,

Tom