topic Re: Infowindow for graphics layer in ArcGIS Viewer for Flex Questions

Infowindow for graphics layer

codyhughes — Tue, 26 Apr 2011 19:23:21 GMT

ok so the backstory is this...
i have a widget that upon selection of certain options it creates a graphics layer based on lat longs that were stored in an arraycollection. my issue is that upon clicking on that graphic on the map(lets call it gr) inside that graphics layer (call it gl) i want to display all attributes that the gr contains ideally like the identify widget so as not to have to format the "info pop up" too much or at all if i dont have to. I can not for the life of me figure out how to populate the popup .
on creation of each of the gr's i add event listener for a click on it which works.
so i guess my problem is which do i use....popup, infowindow, identitytask
and how would i implement it. could any one please help me out and at least steer me in the direction of a sample that does this. cus i have looked at alot of esri samples and they are all in mxml and i need it in actionscript. oh and im using flexviewer 2.3

my gl creation loop
if(FullArfInfoArr.length > 0){
for (var i:int = 0;i<RecCnt-1;i++){
 if(!isNaN(FullArfInfoArr.getItemAt(i).fltSiteLON) && !isNaN(FullArfInfoArr.getItemAt(i).fltSiteLAT)){
 var point:MapPoint = new MapPoint(FullArfInfoArr.getItemAt(i).fltSiteLON,FullArfInfoArr.getItemAt(i).fltSiteLAT);
 var ptGraphic:Graphic = new Graphic(point);
ptGraphic.geometry = WebMercatorUtil.geographicToWebMercator(point);
ptGraphic.symbol = symMain;

ptGraphic.addEventListener(MouseEvent.CLICK,mapClickHandler);

graphicsLayer.add(ptGraphic);};

Re: Infowindow for graphics layer

codyhughes — Tue, 26 Apr 2011 21:04:01 GMT

is there a reason why the infowindowrenderer code i have below does not show any attributes of the graphic?
if(FullArfInfoArr.length > 0){
 for (var i:int = 0;i<RecCnt-1;i++){
 if(!isNaN(FullArfInfoArr.getItemAt(i).fltSiteLON) && !isNaN(FullArfInfoArr.getItemAt(i).fltSiteLAT)){
 var point:MapPoint = new MapPoint(FullArfInfoArr.getItemAt(i).fltSiteLON,FullArfInfoArr.getItemAt(i).fltSiteLAT);
 var ptGraphic:Graphic = new Graphic(point);
 ptGraphic.geometry = WebMercatorUtil.geographicToWebMercator(point);
 ptGraphic.symbol = symMain;
 ptGraphic.addEventListener(MouseEvent.CLICK,mapClickHandler);
 graphicsLayer.add(ptGraphic);
 }
 var infoWindowRenderer:ClassFactory = new ClassFactory(PopUpRenderer);
 infoWindowRenderer.properties = {popUpInfo: new PopUpInfo};
 graphicsLayer.infoWindowRenderer = infoWindowRenderer;
 };

Re: Infowindow for graphics layer

RobertScheitlin__GISP — Tue, 26 Apr 2011 21:11:48 GMT

Cody,

Where are you setting your graphics attributes?

ptGraphic.attributes = {field1: "hello", field2: "goodbye"};

Re: Infowindow for graphics layer

codyhughes — Tue, 26 Apr 2011 21:14:02 GMT

Cody,

Where are you setting your graphics attributes?

ptGraphic.attributes = {field1: "hello", field2: "goodbye"};

i had tried this before adding the graphic:
ptGraphic.attributes = FullArfInfoArr.getItemAt(i);

but it still does not pull anything.

Re: Infowindow for graphics layer

codyhughes — Tue, 26 Apr 2011 21:15:39 GMT

so as of right now all i get is a blank info pop up with the zoom and close button, but no info

Re: Infowindow for graphics layer

RobertScheitlin__GISP — Tue, 26 Apr 2011 21:22:56 GMT

Cody,

Look at the SearchWidget.mxml and the createSearchResults function and the configurePopUpInfo functions for code examples.

Re: Infowindow for graphics layer

codyhughes — Tue, 26 Apr 2011 21:35:08 GMT

Cody,

Look at the SearchWidget.mxml and the createSearchResults function and the configurePopUpInfo functions for code examples.

ok so maybe im just being a noob, but i have an arraycollection with the data in it. do i need to reformat that data like in the create results? also im not using a query at all. i cant just pass an array/arraycollection to the attributes?

Re: Infowindow for graphics layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:45:49 GMT

Cody,

If you look at the PopUpInfo documentation you have basically 2 choices use the description or popUpFieldInfos. The SearchWidget.mxml uses the createSearchResults to concatenate all the attributes and field names into a content string with line breaks. you could also use something like this example that builds popUpFieldInfos:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags">
      
 <fx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
  @namespace esri "http://www.esri.com/2008/ags";
  esri|PopUpRenderer
  {
   skinClass:ClassReference('myPopUp.myPopUpRendererSkin')
  }
 </fx:Style>
 <fx:Script>
  <![CDATA[
   import com.esri.ags.geometry.Extent;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.webmap.PopUpRenderer;
   import com.esri.ags.webmap.supportClasses.PopUpFieldFormat;
   import com.esri.ags.webmap.supportClasses.PopUpFieldInfo;
   import com.esri.ags.webmap.supportClasses.PopUpInfo;
   import com.esri.ags.webmap.supportClasses.PopUpMediaInfo;
   
   import myPopUp.myPopUpRendererSkin;

   private function initCLayer():void
   {
    var popUpInfo:PopUpInfo = new PopUpInfo();
    var pFieldInfos:Array = new Array();
    
    var pFieldInfo:PopUpFieldInfo;
    pFieldInfo = new PopUpFieldInfo();
    pFieldInfo.fieldName = "DESCRIPTION";
    pFieldInfo.format = new PopUpFieldFormat();
    pFieldInfos.push(pFieldInfo);
    
    pFieldInfo = new PopUpFieldInfo();
    pFieldInfo.fieldName = "ONLINE";
    pFieldInfo.format = new PopUpFieldFormat();
    pFieldInfos.push(pFieldInfo);
    
    pFieldInfo = new PopUpFieldInfo();
    pFieldInfo.fieldName = "LAST_UPDATED";
    pFieldInfo.format = new PopUpFieldFormat();
    pFieldInfos.push(pFieldInfo);
    
    pFieldInfo = new PopUpFieldInfo();
    pFieldInfo.fieldName = "URL";
    pFieldInfo.format = new PopUpFieldFormat();
    pFieldInfos.push(pFieldInfo);
    
    popUpInfo.popUpFieldInfos = pFieldInfos;
    
    var pMediaInfos:Array = new Array();
    var pMediaInfo:PopUpMediaInfo = new PopUpMediaInfo();
    pMediaInfo.caption = "Latest Image {LAST_UPDATED} online: {ONLINE}";
    pMediaInfo.type = "image";
    pMediaInfo.imageLinkURL = "{URL}";
    pMediaInfo.imageSourceURL = "{URL}";
    pMediaInfos.push(pMediaInfo);
    popUpInfo.popUpMediaInfos = pMediaInfos;
    popUpInfo.title = "{DESCRIPTION}"
    var popUpRenderer:ClassFactory = new ClassFactory(PopUpRenderer);
    popUpRenderer.properties = {popUpInfo:popUpInfo};
    cLayer.infoWindowRenderer = popUpRenderer;
   }
  ]]>
 </fx:Script>
 <esri:Map id="myMap" level="4" load="myMap.centerAt(new MapPoint(-11713000, 4822000))">
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  <esri:FeatureLayer id="cLayer" outFields="[URL,DESCRIPTION,LAST_UPDATED,ONLINE]" load="initCLayer()"
   url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/MapServer/2"/>
 </esri:Map>
</s:Application>

Re: Infowindow for graphics layer

codyhughes — Wed, 27 Apr 2011 14:27:31 GMT

ok so im almost there. and thank you so much for your help!! what i have so far is close, but i need to get the field name out of an array collection. Im trying to use the trace method but that gives me an error when i try and pass that traced value to a string var. am i missing something?

public function configurePopUpInfo(i:int):PopUpInfo{
    var popUpInfo:PopUpInfo = new PopUpInfo;

    popUpInfo.title = "{strSiteName}";

    var value:String = "";
    var fName:String = "";
    var content:String ="";

    for each (var item:Object in FullArfInfoArr.getItemAt(i)){
     for (var field:String in item){
      fName = trace(field);
      value = trace(item[field]);
      //content += trace(field) + ":" + trace(item[field]) + "\n";
     }
     popUpInfo.description += fName + ":" + value + "\n";
    }
    //popUpInfo.description = content;
    return popUpInfo;
   }

Re: Infowindow for graphics layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:45:52 GMT

Cody,

The trace command is only for debugging and tells Flash Bulder to output the value to the outputs window.

Try this:

   private function configurePopUpInfo(i:int):PopUpInfo{
    var popUpInfo:PopUpInfo = new PopUpInfo;
    
    popUpInfo.title = "{strSiteName}";
    
    for each (var item:Object in FullArfInfoArr.getItemAt(i)){
     for (var field:String in item){
      popUpInfo.description += field + ": " + item[field] + "\n";
     }
    }
    return popUpInfo;
   }

Re: Infowindow for graphics layer

codyhughes — Sat, 11 Dec 2021 20:45:55 GMT

Cody,

The trace command is only for debugging and tells Flash Bulder to output the value to the outputs window.

Try this:

   private function configurePopUpInfo(i:int):PopUpInfo{
    var popUpInfo:PopUpInfo = new PopUpInfo;
    
    popUpInfo.title = "{strSiteName}";
    
    for each (var item:Object in FullArfInfoArr.getItemAt(i)){
     for (var field:String in item){
      popUpInfo.description += field + ": " + item[field] + "\n";
     }
    }
    return popUpInfo;
   }

so the problem is that it does not make it to the for loop. the item is actually returning the field's value so it skips the for loop .

Re: Infowindow for graphics layer

RobertScheitlin__GISP — Wed, 27 Apr 2011 15:01:24 GMT

Cody,

Can you post the function that makes the FullArfInfoArr?

Re: Infowindow for graphics layer

codyhughes — Wed, 27 Apr 2011 15:04:05 GMT

Cody,

Can you post the function that makes the FullArfInfoArr?

the creation is :
[Bindable]public var FullArfInfoArr:ArrayCollection = new ArrayCollection;

the population of data is from a webservice results :

public function gotFullArfInfo(e:ResultEvent):void{
    if(e.result.Tables.Table.Rows.length > 0){
     var table:* = e.result.Tables.Table.Rows;
     FullArfInfoArr = table;
     buildGLayer(1);
    }
   }

should i convert the ac into a feature set? then try that? i might have more options

Re: Infowindow for graphics layer

RobertScheitlin__GISP — Wed, 27 Apr 2011 15:12:24 GMT

Cody,

Have you done a trace of the FullArfInfoArr

trace(StringUtil.toString(FullArfInfoArr));

to see what the structure of the data looks like?

Re: Infowindow for graphics layer

codyhughes — Wed, 27 Apr 2011 15:20:26 GMT

Cody,

Have you done a trace of the FullArfInfoArr
trace(StringUtil.toString(FullArfInfoArr));
to see what the structure of the data looks like?

is this what you mean?

FullArfInfoArr.getItemAt(i) = mx.utils.ObjectProxy (@c8eb601)
dispatcher = flash.events.EventDispatcher (@c857ba1)
dtRequestReceived = <Fri Mar 25 17:44:00 GMT-0700 2011> (@c407481)
dtTimestamp = <Mon Apr 4 22:28:25 GMT-0700 2011> (@d4b4561)
EVENT_FK = 22 [0x16]
EVENT_ID = 2
fltSiteLAT = 47.asd
fltSiteLON = -122.sadf235467
ID = 677 [0x2a5]
_id = null
_item = Object (@a778911)
dtRequestReceived = <Fri Mar 25 17:44:00 GMT-0700 2011> (@c407481)
dtTimestamp = <Mon Apr 4 22:28:25 GMT-0700 2011> (@d4b4561)
EVENT_FK = 22 [0x16]
EVENT_ID = 2
fltSiteLAT = 47.791228
fltSiteLON = -122.235467
ID = 677 [0x2a5]
Source_FK = 0
Status = "ASSIGNED"
strAssistanceDescription = "sadfasdfasdf"
strPSMA_PCN = "7"
strRequestorEmail = "asdf"
strRequestorName = "asdf"
strRequestorOrganization = "asdf"
strRequestorPhone = "asdf"
strSiteAddress = "adsfasdfst sw"
strSiteCity = "bothell"
strSiteCountyFIPS = "asdf"
strSiteName = "sadf"
strSiteState = "wa"
strSiteStatus = "Denied"
strSiteZip = "asdf"
strSOW = "asdf"
strState = "WA"
strStateFedRequest = "asdf"
strStatusComments = "test"
strUsername = "asd\\asdf"
notifiers = Object (@a778779)
object = Object (@a778911)
propertyList = [] (@c8e9f11)
proxyClass = Object (@8a4cd21)
_proxyLevel = -1 [0xffffffff]
Source_FK = 0
Status = "ASSIGNED"
strAssistanceDescription = "asdfadsfasdfadsfadsf."
strPSMA_PCN = "7"
strRequestorEmail = "asdfadsfasdf.asdf"
strRequestorName = "asdfasdf"
strRequestorOrganization = "asdfasdf"
strRequestorPhone = "asdfsadf"
strSiteAddress = "asdfasdf"
strSiteCity = "asdfl"
strSiteCountyFIPS = "asdfasdf"
strSiteName = "asdfasdf"
strSiteState = "wa"
strSiteStatus = "Denied"
strSiteZip = "asdf"
strSOW = "asdfasdfasdfasdfasdfadsf to perform the ...."
strState = "WA"
strStateFedRequest = "Federal"
strStatusComments = "test"
strUsername = "adsfasdf\\asdf"
type = null
_type = null
uid = "asdf-asdf-91D9-asdf-asdf"

Re: Infowindow for graphics layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:45:57 GMT

Cory,

Maybe try :

   private function configurePopUpInfo(i:int):PopUpInfo{
    var popUpInfo:PopUpInfo = new PopUpInfo;
    
    popUpInfo.title = "{strSiteName}";
    
    for each (var item:Object in FullArfInfoArr){
     for (var field:String in item){
      popUpInfo.description += field + ": " + item[field] + "\n";
     }
    }
    return popUpInfo;
   }

Re: Infowindow for graphics layer

codyhughes — Sat, 11 Dec 2021 20:46:00 GMT

Cory,

Maybe try :

   private function configurePopUpInfo(i:int):PopUpInfo{
    var popUpInfo:PopUpInfo = new PopUpInfo;
    
    popUpInfo.title = "{strSiteName}";
    
    for each (var item:Object in FullArfInfoArr){
     for (var field:String in item){
      popUpInfo.description += field + ": " + item[field] + "\n";
     }
    }
    return popUpInfo;
   }

thats alot closer... but it gives me all the results of the ac. i only need the ones at the specific index... btw... you are awesome i really appreciate all the help

Re: Infowindow for graphics layer

codyhughes — Wed, 27 Apr 2011 16:14:49 GMT

ok i got it finally!!! And thank you very much for all your great help!!!! here is the popupconfig solution for passing an ac to a graphic.attributes

popupconfig function:

public function configurePopUpInfo():PopUpInfo{
 var popUpInfo:PopUpInfo = new PopUpInfo;

 popUpInfo.title = "Site Name: " + "{strSiteName}";
 var content:String = "";
 //now build giant string to pass as attributes for point
 content = "Event: {event_name} \n"
 content += "ArfID: " + " {EVENT_ID}" + " \n";
 content += "Site Status: {strSiteStatus} \n";
 content += "Site Address: {strSiteAddress} \n";
 content += "Site City: {strSiteCity} \n";
 content += "Site State: {strSiteState} \n";
 content += "Site Zip: {strSiteZip} \n";
 content += "Site County FIPS: {strSiteCountyFIPS} \n";
 popUpInfo.description = content;
 return popUpInfo;
 }

this works because i am passing an arraycollection to the graphic.attributes. also if you just want to loop through the entire a.c. you can use the below code instead of the manual build of the content string:

for each(var item:Object in FullArfInfoArr){
 for (var fld:String in item){
content += " " + fld + ": {" + fld + "}\n "
}
}

its basically the same as the first code just it loops through all the fields.

also here is the setup for the info window that is inside the loop of creating the graphicslayer:
var infoWindowRenderer:ClassFactory = new ClassFactory(PopUpRenderer);
infoWindowRenderer.properties = {popUpInfo: configurePopUpInfo()};
graphicsLayer.infoWindowRenderer = infoWindowRenderer;
hope this helps explain my solution. Again thanks for all the help rscheitlin!