Select to view content in your preferred language

Cluster Popup with click arrows

843
1
Jump to solution
06-05-2013 11:57 AM
AaronPerry
Occasional Contributor
How do I use esri:WeightedClusterer to cluster graphics and get a popup like the image below (which is from an operational layer in the flex viewer)?  In my app, I don't get any popups for the cluster symbols, only for the flares.

[ATTACH=CONFIG]25032[/ATTACH]

Thanks,
Aaron
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
AaronPerry
Occasional Contributor
I used this sample which is buried in What's New for the API making it, in my opinion, hard to find, but Google found it when I asked for "esri:infoWindowRenderer popup":

http://resources.arcgis.com/en/help/flex-api/samples/index.html#/Display_popups_programmatically/01n...

This sample showed me how to build and assign PopUpRenderer as the infoWindowRenderer for my widget's graphics layer.  I had been building an infoWindowRenderer for each individual graphic coming back from the query response using a VBox, but that didn't assign a popup to the cluster symbols.  By applying it to the layer, it appears to attach to any graphics including the cluster symbols.

While I was implementing this, I learned to read in specific values from the config file and loop accordingly, so the popup title and fields are now configurable from the widget's config file.  This really helped me get a handle on how to use the config file in a loop. 

This is my init function. You can compare it to the sample above to see how it differs. The main difference is the loop for the PopUpFieldInfo items in the config and getting the title from config instead of explicitly building them in the init.

   // this function called when the widget's configuration is loaded    private function init():void    {     // build the layer to hold the graphics     graphicsLayer = new GraphicsLayer();     graphicsLayer.visible = false;     graphicsLayer.renderer = new SimpleRenderer(mySymbol);     graphicsLayer.clusterer = clusterer;     map.addLayer(graphicsLayer);          // get pop-up fields from the config file     xmlPopupFields = configXML.popup.fields.field;     xmlPopupTitle = configXML.popup.title;          // array to hold popup fields for assignment to popUpFieldInfos     var popupFields:Array = [];       // Create the pop-up field infos from each field in the config XML     for each (var field:Object in xmlPopupFields)     {      var popupFieldInfo:PopUpFieldInfo = new PopUpFieldInfo();      popupFieldInfo.fieldName = field.name;      popupFieldInfo.label = field.alias;      popupFieldInfo.visible = true;      popupFields.push(popupFieldInfo);     }      // Create the pop-up info     var popUpInfo:PopUpInfo = new PopUpInfo();          // Tell the pop-up info about the field name template     popUpInfo.title = "{" + xmlPopupTitle + "}";     popUpInfo.popUpFieldInfos = popupFields;          // Create the class factory     var popUpRenderer:ClassFactory = new ClassFactory(PopUpRenderer);     // Set the "popUpInfo" key     popUpRenderer.properties = { "popUpInfo": popUpInfo };          // Set the info window renderer to use the pop-up renderer     graphicsLayer.infoWindowRenderer = popUpRenderer;          // get counties starts the init chain of events     getCounties();    }


Hopefully this will help somebody else who is trying to do something similar.

Aaron

View solution in original post

0 Kudos
1 Reply
AaronPerry
Occasional Contributor
I used this sample which is buried in What's New for the API making it, in my opinion, hard to find, but Google found it when I asked for "esri:infoWindowRenderer popup":

http://resources.arcgis.com/en/help/flex-api/samples/index.html#/Display_popups_programmatically/01n...

This sample showed me how to build and assign PopUpRenderer as the infoWindowRenderer for my widget's graphics layer.  I had been building an infoWindowRenderer for each individual graphic coming back from the query response using a VBox, but that didn't assign a popup to the cluster symbols.  By applying it to the layer, it appears to attach to any graphics including the cluster symbols.

While I was implementing this, I learned to read in specific values from the config file and loop accordingly, so the popup title and fields are now configurable from the widget's config file.  This really helped me get a handle on how to use the config file in a loop. 

This is my init function. You can compare it to the sample above to see how it differs. The main difference is the loop for the PopUpFieldInfo items in the config and getting the title from config instead of explicitly building them in the init.

   // this function called when the widget's configuration is loaded    private function init():void    {     // build the layer to hold the graphics     graphicsLayer = new GraphicsLayer();     graphicsLayer.visible = false;     graphicsLayer.renderer = new SimpleRenderer(mySymbol);     graphicsLayer.clusterer = clusterer;     map.addLayer(graphicsLayer);          // get pop-up fields from the config file     xmlPopupFields = configXML.popup.fields.field;     xmlPopupTitle = configXML.popup.title;          // array to hold popup fields for assignment to popUpFieldInfos     var popupFields:Array = [];       // Create the pop-up field infos from each field in the config XML     for each (var field:Object in xmlPopupFields)     {      var popupFieldInfo:PopUpFieldInfo = new PopUpFieldInfo();      popupFieldInfo.fieldName = field.name;      popupFieldInfo.label = field.alias;      popupFieldInfo.visible = true;      popupFields.push(popupFieldInfo);     }      // Create the pop-up info     var popUpInfo:PopUpInfo = new PopUpInfo();          // Tell the pop-up info about the field name template     popUpInfo.title = "{" + xmlPopupTitle + "}";     popUpInfo.popUpFieldInfos = popupFields;          // Create the class factory     var popUpRenderer:ClassFactory = new ClassFactory(PopUpRenderer);     // Set the "popUpInfo" key     popUpRenderer.properties = { "popUpInfo": popUpInfo };          // Set the info window renderer to use the pop-up renderer     graphicsLayer.infoWindowRenderer = popUpRenderer;          // get counties starts the init chain of events     getCounties();    }


Hopefully this will help somebody else who is trying to do something similar.

Aaron
0 Kudos