Heat Map on ArcGIS Viewer for Flex

MESHALALMASHAN · ‎03-07-2011

Hi,

I'm trying to implement a heat map on my ArcGIS viewer using the code posted on the following link:

http://thunderhead.esri.com/readonlyurl/HeatMapNew/srcview/

But still I'm not getting anything running yet as I'm not sure if it's compatible with the Viewer for Flex or not.

Any idea?

DannyDong · ‎09-26-2011

I tried to use my own point layer (arcgis server map service) to replace the earthquake layer as the heatmap layer. I replaced the earthquake layer url with my own url, but it returned 0 feature. What else do I need to check or modify? (I tried to remove the query part in the xml) Do I need to recompile the code? So far I just need to display the points (headmap) without query. Maybe later on I would like to query by the points' type information or a frequency attribute.

The viewer looks really nice. I am interested in customizing it for our purpose. I wonder what kind of customization needs recompilation (using flex builder), what customization is just as easy as replacing links or variables and doesn't need to recompile from source code. I am trying to find out myself, but some tips will be very helpful.

Thanks!

LloydHeberlie · ‎09-27-2011

I tried to use my own point layer (arcgis server map service) to replace the earthquake layer as the heatmap layer. I replaced the earthquake layer url with my own url, but it returned 0 feature. What else do I need to check or modify? (I tried to remove the query part in the xml) Do I need to recompile the code? So far I just need to display the points (headmap) without query. Maybe later on I would like to query by the points' type information or a frequency attribute.

The viewer looks really nice. I am interested in customizing it for our purpose. I wonder what kind of customization needs recompilation (using flex builder), what customization is just as easy as replacing links or variables and doesn't need to recompile from source code. I am trying to find out myself, but some tips will be very helpful.

Thanks!

Danny,

For your initial interest, you won't need to recompile the code. You just need to make sure that your service is returning geometry. The widget needs to do a query in order to get the points from your service so that it can render the heatmap. The initial query (1=1) will ask the service for all its features (this (number of features) is controlled by a setting on the service itself [this is mentioned in the readme]).

The "default query" (<defaultquery>1=1</defaultquery>) in the config file is what is loaded the first time the widget loads. If you want all the features in your service to display, just leave this with the "1=1" syntax.

Some things to try:
Open your service in the "Services Directory" (http://yourserver/arcgis/rest/<yourFolder>/yourService/MapServer/layerID), and issue a query with the fields you want returned. Make sure the geometry is being returned.

You could use a tool like Firebug (Firefox) or Fiddler to inspect the request/response being issued.

If you eventually want to do some customization, here's some help.
Flash Builder or any other IDE is not required, but will save you time and make you productive. I don't really know anyone that is doing command line compilation (ANT, Maven) for development other than folks that use automated compilation from a centralized source code repository.
Any changes you would like to make, other than the configuration file changes will require recompiling the widget.

Make sure you are not hiding the SHAPE field in your map document.

Lloyd

DannyDong · ‎09-27-2011

After several tries, I got flex viewer heat map working for my own layer. I realized that I had to include the <defaultquery> 1=1 </defaultquery> tag to be able to show all the points and refresh the browser.

I also got some basic query done, thanks to Lloyd's guidance on query, many thanks, guys.

I am going a little bit far now: Can I query based on two different fields (first is type, second is status, in my case). I think I would like to try and find out. Probably would need to add another query in the heatmap widgit or create another similar "widgit"? Are there better/easy ways to do multiple queries?

LloydHeberlie · ‎09-29-2011

After several tries, I got flex viewer heat map working for my own layer. I realized that I had to include the <defaultquery> 1=1 </defaultquery> tag to be able to show all the points and refresh the browser.

I also got some basic query done, thanks to Lloyd's guidance on query, many thanks, guys.

I am going a little bit far now: Can I query based on two different fields (first is type, second is status, in my case). I think I would like to try and find out. Probably would need to add another query in the heatmap widgit or create another similar "widgit"? Are there better/easy ways to do multiple queries?

If you want to make changes to the User Interface like add another input text box or dropdown, then this will require you to change the code and recompile. However if you just want to do a more complex query, then that can be done through the config file. If you modify the query template, then you can add additional parameters such as:

Magnitude > REPLACE_STR and (Num_Deaths >= 10 and Num_Deaths <= 100)

When you would then select "Mag > 2" from the UI, the following query would be issued.

Magnitude > 2 and (Num_Deaths >= 10 and Num_Deaths <= 100)

The REPLACE_STR in the "<querytemplate></querytemplate>" is used to take the values from the "<types></types" in the config file replace the "REPLACE_STR" with the value selected from the dropdown in the UI.

Hopefully this makes sense.

Lloyd

AdamRepsher · ‎09-30-2011

Hi Lloyd,

I am having one heck of a time implementing this widget! I am attempting to utilize the files in HeatMapWidgetCode\v2\HeatMapWidget\src\HeatMap in my project. I am copying the "HeatMap" folder into my Widgets folder.

I am using the default Flex Viewer 2.4 (only adding widgets-no other customization), Flash Builder 4, 4.1SDK ("use SDK default" setting in Library path-Framework linkage). The ArcGISHeatMapWidget will not build the swf in my bin-debug widget folder. The <esri_stl:ProgressMessage and HeatMapThemeView lines both show errors "Could not resolve esri_stl:HeatMapThemeView to a component implementation."

I can, however, drop the compiled SWF from your HeatMapWidgetCode\v2\HeatMapWidget\bin\bin-2.4 folder into my bin-debug widgets folder, and it works....

Any pointers would be appreciated.

Thanks,
--Adam

LloydHeberlie · ‎10-07-2011

Hi Lloyd,

I am having one heck of a time implementing this widget! I am attempting to utilize the files in HeatMapWidgetCode\v2\HeatMapWidget\src\HeatMap in my project. I am copying the "HeatMap" folder into my Widgets folder.

I am using the default Flex Viewer 2.4 (only adding widgets-no other customization), Flash Builder 4, 4.1SDK ("use SDK default" setting in Library path-Framework linkage). The ArcGISHeatMapWidget will not build the swf in my bin-debug widget folder. The <esri_stl:ProgressMessage and HeatMapThemeView lines both show errors "Could not resolve esri_stl:HeatMapThemeView to a component implementation."

I can, however, drop the compiled SWF from your HeatMapWidgetCode\v2\HeatMapWidget\bin\bin-2.4 folder into my bin-debug widgets folder, and it works....

Any pointers would be appreciated.

Thanks,
--Adam

Adam,

Sorry it took me so long to reply.
I use an external Flex Library for most of my stuff, so that's where the namespace originated.

Let's assume you have the source code in the following structure within the FlexViewer.

You'll probably want to make some additional folders under your src/widgets/HeatMap folder, if you don't intend on using your own external Flex Library Project.

Create the following folders.

src/widgets/HeatMap
src/widgets/HeatMap/layers
src/widgets/HeatMap/layers/supportClasses
src/widgets/HeatMap/events
src/widgets/HeatMap/utils
src/widgets/HeatMap/view
src/widgets/HeatMap/skins

Move the source files to the following locations.

src/widgets/HeatMap/ArcGISHeatMapWidget.mxml
src/widgets/HeatMap/ArcGISHeatMapWidget.xml
src/widgets/HeatMap/layers/ArcGISHeatMapLayer.as
src/widgets/HeatMap/layers/supportClasses/HeatMapGradientDict.as
src/widgets/HeatMap/layers/supportClasses/HeatMapPoint.as
src/widgets/HeatMap/layers/supportClasses/HeatMapGradientDict.as
src/widgets/HeatMap/events/HeatMapEvent.as
src/widgets/HeatMap/utils/ColorMatrixUtil.as
src/widgets/HeatMap/utils/StringUtil.as
src/widgets/HeatMap/view/ProgressMessage.mxml
src/widgets/HeatMap/view/HeatMapThemeView.mxml
src/widgets/HeatMap/skins/ButtonBarImageSkin.mxml
src/widgets/HeatMap/skins/ButtonBarImageButtonSkin.mxml

Make sure you correct any import references from "com.esri.stl" to "widgets.HeatMap" the import references may vary depending on how you name your widget directory structure.

The UI View components (ProgressMessage.mxml,HeatMapThemeView.mxml) under src/widgets/HeatMap/view
HeatMapThemeView.mxml has a ButtonBar with its skinClass is set to ButtonBarImageSkin.
ButtonBarImageSkin.mxml references the skinClass ButtonBarImageButtonSkin

You'll need to change the skinClass in both (HeatMapThemeView,ButtonBarImageSkin)

from 
skinClass="com.esri.stl.skins.THE_SKIN_CLASSNAME" 
to 
skinClass="widgets.HeatMap.skins.THE_SKIN_CLASSNAME"

You'll also need to modify the references to the assets in ProgressMessage.mxml,HeatMapThemeView.mxml

So you'll need to modify the source files that have references to the namespace xmlns:esri_stl="http://www.esri.com/2010/stl".

You would use local namespaces for the various view, layers, etc.
So in your implementation you would update the following reference like this...

In the ArcGISHeatMapWidget.mxml change the namespace from

xmlns:esri_stl="http://www.esri.com/2010/stl"

to

xmlns:view="widgets.HeatMap.view.*"

then update the various components that were using the esri_stl namespace

<view:HeatMapThemeView id="heatMapThemeView" 
themeLabel="{heatmapCompLabel}" theme="{heatmapTheme}" 
themeSelectionChanged="themeSelectionChangedHandler(event)" />

If you were using the ArcGISHeatMapLayer class in a widget and were referencing it through mxml rather than ActionScript, you may do something like this...

Add the namespace

xmlns:layers="widgets.HeatMap.layers.*"

change

<esri_stl:ArcGISHeatMapLayer id="heatMapLayer" url="{m_url}" 
         useAMF="true"
         outFields=""
         alpha="0.7"/>

to

<layers:ArcGISHeatMapLayer id="heatMapLayer" url="{m_url}" 
         useAMF="true"
         outFields=""
         alpha="0.7"/>

If this was helpful, let me know and I can add it to the widget documentation.

Lloyd

AdamRepsher · ‎10-07-2011

Lloyd!

Thank you so much for taking all of that time to document all of this. I will get back to this on Tuesday and let you know what I find.

--Adam

AndyCowx2 · ‎10-26-2011

Lloyd,

I used the compiled 2.4 version of the widget and am successfully querying my mapservice and getting back the correct number of rows. Unfortunately I don't see any heat rendering, the map is empty.

Any ideas where I might have gone wrong ?

Thanks,

Andy

RavinHasseea · ‎02-20-2012

I would like to show concentration of points on a map. I am thinking of a density map.

I was wondering whether the heatmap widget can give me something similar.
What api is used to create the heatmap? Do I require any external library?

Thanks

LloydHeberlie · ‎02-21-2012

I would like to show concentration of points on a map. I am thinking of a density map.

I was wondering whether the heatmap widget can give me something similar.
What api is used to create the heatmap? Do I require any external library?

Thanks

Did you take a look at the sample?
The heat map source code is not yet part of the ArcGIS API for Flex, but is included in the sample.
The sample on ArcGIS.com contains the compiled widgets for the ArcGIS Viewer for Flex and the source code needed to make any changes.
The source code and compiled widgets will show color coded areas of concentrated points.
It does require the ArcGIS API for Flex, which you can get on the Resource Center.

Hope this helps,

Lloyd
Esri Flex Team