Image Flare Symbol For Clustered Graphics
This is a long overdue post following the clustering post where I wanted each flare element in a cluster symbol to flare to a different image symbol when the flare expands out. In addition, the default flare symbol expands upon a rollover mouse event, by me giving you the source code, you can customize it to expand on click, double click, shift click, whatever you want - you have the source code. The same applies to the flare elements. The ImageFlareSymbol has the same properties as the basic FlareSymbol but has two additional properties (backgroundWeights, backgroundColors) to color code the clusters based on their weight value. Each cluster is composed of one or more Graphic instance. In this implementation, each graphic must be symbolized with an instance of ImageFlareElementSymbol. The latter has a property ‘href’ that reference a bitmap url that will be displayed as a flare element. Here is a sample application to show the image flare in action. And like usual, here is the source code.
Tweet
Tweet
Comments
In the example, symbols are set on the graphics directly. Is it possible to set a symbol or renderer (UniqueValueRenderer) on the FeatureLayer instead of setting the symbol on each graphic?
I love this code and am using it in an AIR project. I am running into one very strange issue though. If I set the ClusterGraphics attributes then I will sometimes get an error in the ImageFlareContainer that the clusterer is null. Do you have any suggestions?
Robert Scheitlin
Thanks. If you don't mind I have one more issue/question. I am dynamically adding and removing graphics from the cluster and need to update the cluster weight and have it reflected in the text on the cluster graphic. I tried to add a changeWatcher to the weight property but it must not be bindable. I also gave a stab at extending the cluster so I could fire some event when the clusters weight was changed but the cluster does not inherit form an item that has eventDispatcher. Do you have any suggestions?
Robert Scheitlin
m_textField.text = cluster.weight.toString();
m_textField.x = m_textField.textWidth * -0.5 - 2;
m_textField.y = m_textField.textHeight * -0.5 - 1;
Hope this helps
OK I had the "m_textField.text = cluster.weight.toString();" already, so your second comment says call refresh... On what? I tried just calling refresh on the graphics layer. Do I need to call it on the clusterGraphic? If so how do I get a reference to the graphic that the cluster is assigned to?
Robert Scheitlin
I am actually adding more graphics to the graphics property of the com.esri.ags.clusterers.supportClasses.Cluster that I get a reference to from a FlareMouseEvent.
I did add the code as you said and then looked though all the graphics and refreshed them (as I can't seem to find how to get a reference to just the clusterGraphic that the cluster is attached to) and it DOES NOT refresh the text as you mentioned that it _should_. Any other ideas?
Thanks for helping with this as it stands right now I remove each cluster graphics and re-add it so that I can get it updated.
Robert Scheitlin
UPDATE. The text changes to the new weight value, but only after you mouse over and then back out.
Robert Scheitlin
Can I request a blog on clustering and the use of mini charts to display parameters on point locations?
I have always loved the birdeye mini charts..
you can find them here: http://birdeye.googlecode.com/svn/branches/ng/examples/demo/BirdEyeExplorer.html
Thought you should know in case it’s a bug.
flare:ImageFlareSymbol id="imageFlareSymbol" backgroundColors="[0xFF6900,0xFF9F00]"
backgroundWeights="[100,1000]" borderColor="0xFFFFFF"
borderThickness="2" ringDistanceStart="40"/>
flare:ImageFlareElementSymbol id="biomass" href="assets/i_biomass.png"/>
flare:ImageFlareElementSymbol id="solar" href="assets/i_solar.png"/>
flare:ImageFlareElementSymbol id="wind" href="assets/i_wind.png"/>
esri:WeightedClusterer id="clusterer" symbol="{imageFlareSymbol}" sizeInPixels="5"/>
Have you gotten a chance to get this working with a weighted cluster? If not, what would be the starting point for implementation?
Thanks for your time
Mansour, feel free to rip it apart
http://forums.arcgis.com/threads/25133-Multiple-Symbols-on-Feature-Layer-Cluster-Flare?p=100802#post100802
I would do the same but not with ImageFlareElementSymbol but SimpleMarkerSymbol.
So he returned in the following code function updateDisplayList:
const layerSymbol:Symbol = getLayerSymbol(flareContainer);
if (layerSymbol)
{
layerSymbol.draw(m_sprite, graphic.geometry, graphic.attributes, null);
}
This plant has this line:
layerSymbol.draw(m_sprite, graphic.geometry, graphic.attributes, null);
I get this error:
TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
at com.esri.ags.symbols::SimpleMarkerSymbol/draw()[C:\checkout\flex_api2\api\src\com\esri\ags\symbols\SimpleMarkerSymbol.as:346]
at ImageFlareElement/updateDisplayList()[C:\Documents and Settings\francois\Adobe Flash Builder 4.5\SIGColbert\src\com\esri\flare\ImageFlareElement.as:150]
at ImageFlareContainer/updateDisplayListFlare()[C:\Documents and Settings\francois\Adobe Flash Builder 4.5\SIGColbert\src\com\esri\flare\ImageFlareContainer.as:239]
at ImageFlareContainer/updateDisplayList()[C:\Documents and Settings\francois\Adobe Flash Builder 4.5\SIGColbert\src\com\esri\flare\ImageFlareContainer.as:246]
at mx.core::UIComponent/validateDisplayList()
at mx.managers::LayoutManager/validateDisplayList()
at mx.managers::LayoutManager/doPhasedInstantiation()
at mx.managers::LayoutManager/doPhasedInstantiationCallback()
Can you help me?
Thank you.
I would do the same but not with ImageFlareElementSymbol but SimpleMarkerSymbol.
So he returned in the following code function updateDisplayList:
const layerSymbol:Symbol = getLayerSymbol(flareContainer);
if (layerSymbol)
{
layerSymbol.draw(m_sprite, graphic.geometry, graphic.attributes, null);
}
This plant has this line:
layerSymbol.draw(m_sprite, graphic.geometry, graphic.attributes, null);
I get this error:
TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
at com.esri.ags.symbols::SimpleMarkerSymbol/draw()[C:\checkout\flex_api2\api\src\com\esri\ags\symbols\SimpleMarkerSymbol.as:346]
at ImageFlareElement/updateDisplayList()[C:\Documents and Settings\francois\Adobe Flash Builder 4.5\SIGColbert\src\com\esri\flare\ImageFlareElement.as:150]
at ImageFlareContainer/updateDisplayListFlare()[C:\Documents and Settings\francois\Adobe Flash Builder 4.5\SIGColbert\src\com\esri\flare\ImageFlareContainer.as:239]
at ImageFlareContainer/updateDisplayList()[C:\Documents and Settings\francois\Adobe Flash Builder 4.5\SIGColbert\src\com\esri\flare\ImageFlareContainer.as:246]
at mx.core::UIComponent/validateDisplayList()
at mx.managers::LayoutManager/validateDisplayList()
at mx.managers::LayoutManager/doPhasedInstantiation()
at mx.managers::LayoutManager/doPhasedInstantiationCallback()
Can you help me?
Thank you.
Hello,
I would do the same but not with ImageFlareElementSymbol but SimpleMarkerSymbol.
So he returned in the following code function updateDisplayList:
const layerSymbol:Symbol = getLayerSymbol(flareContainer);
if (layerSymbol)
{
layerSymbol.draw(m_sprite, graphic.geometry, graphic.attributes, null);
}
This plant has this line:
layerSymbol.draw(m_sprite, graphic.geometry, graphic.attributes, null);
I get this error:
TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
at com.esri.ags.symbols::SimpleMarkerSymbol/draw()[C:\checkout\flex_api2\api\src\com\esri\ags\symbols\SimpleMarkerSymbol.as:346]
at ImageFlareElement/updateDisplayList()[C:\Documents and Settings\francois\Adobe Flash Builder 4.5\SIGColbert\src\com\esri\flare\ImageFlareElement.as:150]
at ImageFlareContainer/updateDisplayListFlare()[C:\Documents and Settings\francois\Adobe Flash Builder 4.5\SIGColbert\src\com\esri\flare\ImageFlareContainer.as:239]
at ImageFlareContainer/updateDisplayList()[C:\Documents and Settings\francois\Adobe Flash Builder 4.5\SIGColbert\src\com\esri\flare\ImageFlareContainer.as:246]
at mx.core::UIComponent/validateDisplayList()
at mx.managers::LayoutManager/validateDisplayList()
at mx.managers::LayoutManager/doPhasedInstantiation()
at mx.managers::LayoutManager/doPhasedInstantiationCallback()
Can you help me?
Thank you.