Select to view content in your preferred language

Multiple Symbols on Feature Layer Cluster Flare

3982
9
03-04-2011 09:07 AM
JoshObrecht
Regular Contributor
For a feature layer, I have set up different symbols for unique values.  I would like this to be the case also when a user flares a cluster out.  I can't seem to get anything other than the small version of the cluster symbol. 

I would like it to be something similar to what is found here: http://thunderheadxpler.blogspot.com/2010/08/image-flare-symbol-for-clustered.html.  However, I would like it to be with feature layer.  I tried to work this into my code, but was not able to get it to work.

Is this even possible?
Tags (2)
0 Kudos
9 Replies
JoshObrecht
Regular Contributor
Has anyone attempted to try this and can pass some pointers?
0 Kudos
JesseMetcalfe
Emerging Contributor
Hello Guys, I am also looking for the same functionality for ArcGIS Flex Viewer 2.x
0 Kudos
HaroldBostic
Frequent Contributor
Ok, I just wrote a whole lot and accidentally closed my browser:

I have not completed my solution but this should get you pretty close

This is all based off the FlareApp example posted on Mansour's blog (see previous post for reference)

Reference the cluster in your main app as you normally would but use ImageFlareSymbol:

<text:TextFormat id="tf"
       font="Arial"
       size="14"/>
  <esri:FlareSymbol id="flareSymbol" textFormat="{tf}" backgroundColor="#FFFFFF"/>
  <flare:ImageFlareSymbol id="imageFlareSymbol" flareMaxCount="10" textFormat="{tf}" backgroundColor="#FFFFFF"/>
  <esri:WeightedClusterer id="clusterer" symbol="{imageFlareSymbol}" />


In the updateDisplayList in class ImageFlareElement change
const graphicSymbol:ImageFlareElementSymbol = graphic.symbol as ImageFlareElementSymbol

to

const graphicSymbol:ImageFlareElementSymbol = new ImageFlareElementSymbol();

At this point you should be able to run your app and see the error.png for all your flare elements

Inside the draw function of graphicSymbol (aka ImageFlareElementSymbol) you can do anything you want.  Mansour has other examples about how to create custom symbols (under previous years)

I just used the attributes parameter to help me determine which image I want to use like so:


override public function draw(sprite:Sprite, geometry:Geometry, attributes:Object, map:Map):void
    {
        const mapPoint:MapPoint = geometry as MapPoint;
        const bitmapData:BitmapData = bitmapDataDict[href];
  if (href == null)
  {
   switch (attributes.[YourAttribute])
   {
    case "Case 1":
     href = "images/image1.png"
     break;
    case "Case 2":
     href = "images/iamge2.png"
     break;
    case "Case 3":
     href = "images/image3.png"
     break;
    case "Case 4":
     href = "images/image4.png"
      break;
    default:
     href = "images/default.png";
     break;
     
   }
  
  }

.......

For my purposes, I went ahead and passed the attributes to the drawPoint function and added textElements (the numbers you see in the attached image) to the sprite as well

The attached image demonstrates my progress thus far.

Hope this helps.  Let me know if you have questions
0 Kudos
JoshObrecht
Regular Contributor
I cannot get the symbol to flare out and actually it shuts a lot of the application down when it tries.  I have it set up within the declaration of the feature layer, i.e.

<esri:FeatureLayer id="myGraphicsLayer" url="{url}"
     clusterer="{clusterer}" outFields="*" graphicAdd="fLayer_graphicAddHandler(event)"
        definitionExpression="city not like ''">

Even if I take at the graphicAdd function, it still does not work.  Any ideas?
0 Kudos
HaroldBostic
Frequent Contributor
Yes, my apologies, at the very top of the draw function in ImageFlareElementSymbol you need to add
 
  //<!--Added by Alex Begin handle href being null -->
  if (href == null)
  {
   href = "assets/error.png"
  }
Otherwise it's going to try to create a bitmapdata object with not image

Let me know if you have any more issues
0 Kudos
JoshObrecht
Regular Contributor
Alright we're closer now.  The points show the flare action, with the spoked lines.  However the markers we are setting with href still are not drawing.  The href is recognized as I can see that it is properly set to the location of the image.
0 Kudos
JoshObrecht
Regular Contributor
It appears that it is not recognizing a height or width for the image within bitmapData.
0 Kudos
HaroldBostic
Frequent Contributor
What type of image are you using, can you send it so I can test it on my end?

Also, if you email me alex_bostic@urscorp.com I'll send you my sample project.  I tried to upload it here but 3MB is too large
0 Kudos
ASCOLASCOL
Emerging Contributor
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()
at ImageFlareElement/updateDisplayList()
at ImageFlareContainer/updateDisplayListFlare()
at ImageFlareContainer/updateDisplayList()
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.
0 Kudos