Flexviewer clustering add popup windows





Install Atom behind corporate proxy 08th July, 2016

Simple editing using an ArcGIS Online web map 08th April, 2013


Flexviewer clustering add popup windows

Posted on .

Esri has a very nice example of feature layer clustering  in the API samples. In the newest flexviewers they have included the ability to add clusters out of the box. Great! The only real limitation is that out of the box there is no ability to use popups on the flare elements.

In this post I will show you a quick and dirty way to add popups to the flare elements. This should allow you to get by until they are natively supported in the viewer. A quick break down of the clustering sample.

Step 1. Adds a FlareMouseEvent.FLARE_CLICK event to a feature layer.

Step 2. Responds to that event with the showInfoWindow() function.

Step 3. Enjoy!

Now that we understand the basic logic we can get started. First we need to add that event listener on feature layers. MapManager contains this function:

private function addLayerToMap(layerObject:Object):void{}

inside that function we find the case for featurelayer:

case "feature":{
var featureLayer:FeatureLayer = new FeatureLayer(url);

Alright. With that found lets add the event listener. On a fresh install I added it to line 657. This may be different for you.

featureLayer.addEventListener(LayerEvent.LOAD_ERROR, layer_loadErrorEvent);
featureLayer.addEventListener(LayerEvent.LOAD, layer_loadEvent);
//Add the event listener found below
featureLayer.addEventListener(FlareMouseEvent.FLARE_CLICK, flareClickHandler);

Now we need to create our flareClickHandler function.

private function flareClickHandler(event:FlareMouseEvent):void
{"happy days");

Some final steps to make sure this worked. Make sure you added all of the imports into map manager.

import mx.controls.Alert;

And the super obvious step of ensuring that you have a cluster layer defined in your config.xml. Also make sure that the type is set to flare and not simple.

<layer label="San Franscisco 311" type="feature" url="" popupconfig="popups/PopUp_311.xml" visible="true"> <clustering mingraphiccount="2" sizeinpixels="80"> <clustersymbol type="flare" alpha="1" alphas="0.7,0.8,1" bordercolor="0xFFFFFF" color="0xFF4242" colors="0xFF837E,0xFF4242,0xFF4242" flaremaxcount="10" size="90" sizes="30,60,90" textcolor="0x000000" textsize="14" weights="10,100,200"/> </clustering> </layer>

with that done we can now add in an info window like the sample. Remember that this post is to get you started and not to go into the finer details of your popup. First we will add to our flareClickHandler function.

private function flareClickHandler(event:FlareMouseEvent):void
    //"happy days");
    showInfoWindow(event.graphic, event.stageX, event.stageY);

and then we need to create the showInfoWindow function. Notice that this function is almost identical to that in the API sample. I changed label with content, created the TextArea (since we are not doing it in mxml) and then I added the close button. That is it.

private function showInfoWindow(gr:Graphic, stageX:Number, stageY:Number):void
	var myTextArea:TextArea = new TextArea;
	myTextArea.textFlow = TextFlowUtil.importFromString(
	        '<span fontWeight="bold">State Name: </span>' + gr.attributes.STATE_NAME + '<br/>'
		+ '<span fontWeight="bold">Age (5-17): </span>' + gr.attributes.AGE_5_17 + '<br/>'
		+ '<span fontWeight="bold">Age (18-64): </span>' + gr.attributes.AGE_18_64 + '<br/>'
		+ '<span fontWeight="bold">Age (65 and above): </span>' + gr.attributes.AGE_65_UP);
	map.infoWindow.content = myTextArea;
	map.infoWindow.closeButtonVisible = true;, stageY));

Last step for this post is to double check our imports again. We are using the text flow and textflow util so we will need to add them into our import block.

import spark.components.TextArea;
import spark.utils.TextFlowUtil;

That was easy… Where to go from here? Well obviously I am not using the viewer popup or config in this sample. There is also room for improvement to keep only the core logic needed in the mapmanager in the mapmanager. The list could go on and on.

Thank you for reading. If this was helpful follow us on Twitter. Also…Stay tuned for a lot more posts on the Esri Flex and JavaScript API’s.


Author Andrew Leane

Posted at 12:23 am February 10, 2012.

Cool, was just hunting around for how to do this, and works well thanks!


Author Jeffrey Smith

Posted at 10:16 pm February 15, 2012.

Thanks a bunch for the information, and the web-site truly looks awesome. Exactly what wp design are you using?


Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (2) ...