Select to view content in your preferred language

PictureMarkerSymbol onLoad handler doesn't exist

1097
6
Jump to solution
02-25-2013 07:12 AM
JasonLevine
Deactivated User
Hello Flex experts,
I have a picture marker symbol that I'm assigning to a graphic; I then add my graphic to a graphicsLayer that is already added to the map.  For example, I'm sourcing the picture marker symbol to a url image:
<esri:PictureMarkerSymbol      id="pms_by_url"      source="http://resources.arcgis.com/en/help/flex-api/samples/01nq/assets/warningsmall.gif"/>


Everything works correctly when I add the graphic to the graphicsLayer.  However, in some occasions, my image is a little large, and there is some lag time between when the graphic is added to the map and when the image for the symbol is finished loading.  The result is that the graphic is added to the graphicsLayer and nothing happens until the image is finished loading.  The user looks at the blank map for a few seconds until all of a sudden, BOOM, the image just appears on the map.  Unfortunately, there doesn't appear to be an onLoad event for the PictureMarkerSymbol.  In HTML, when you have an image object that sources to url, the onLoad event fires when the image is finished loading;  how can I get the same functionality out of the PictureMarkerSymbol? I'd like to display some sort of loading icon while the PictureMarkerSymbol is loading, and then turn it off once it's completely loaded.

I've tried using the updateEnd event on the graphicsLayer itself, but it doesn't take into account the symbol for the graphic; it fires immediately after the graphic is added to the layer.

Thanks for your help,
Jason
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
YannCabon
Esri Contributor
Hi,

Indeed the PictureMarkerSymbol doesn't dispatch event when its source is loaded.
What you can do is to prior load the image using an Loader then pass its content as the source of the PMS.

<?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"                applicationComplete="applicationCompleteHandler(event)"                minHeight="600"                minWidth="955">     <fx:Script>         <![CDATA[             import com.esri.ags.symbols.PictureMarkerSymbol;                          import mx.core.UIComponent;             import mx.events.FlexEvent;             import mx.managers.PopUpManager;              protected function applicationCompleteHandler(event:FlexEvent):void             {                 var loader:Loader = new Loader();                 loader.load(new URLRequest("http://resources.arcgis.com/en/help/flex-api/samples/01nq/assets/warningsmall.gif"));                 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteHandler);             }              protected function loadCompleteHandler(event:Event):void             {                 // source is loaded                 var loaderInfo:LoaderInfo = event.target as LoaderInfo;                 var pmsSource:Bitmap = loaderInfo.content as Bitmap;                 var pms:PictureMarkerSymbol = new PictureMarkerSymbol(pmsSource);                                  // For the example                 var swatch:UIComponent = pms.createSwatch();                 PopUpManager.addPopUp(swatch, this);                 PopUpManager.centerPopUp(swatch);             }                      ]]>     </fx:Script> </s:Application>

View solution in original post

0 Kudos
6 Replies
MarthaSelig1
Emerging Contributor
Any solutions? I need this, too. I am displaying some large georeferenced map images, which can take many seconds to load. So far, I haven't found a way to get feedback from the picturemarker symbol about how the load process is coming, so I can't show a progress bar to indicate something is happening.

Any thoughts on this or alternative methodologies? Many of these maps overlap partly or completely, so merging them into a raster doesn't seem workable.

Thanks in advance,
Martha
0 Kudos
YannCabon
Esri Contributor
Hi,

Indeed the PictureMarkerSymbol doesn't dispatch event when its source is loaded.
What you can do is to prior load the image using an Loader then pass its content as the source of the PMS.

<?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"                applicationComplete="applicationCompleteHandler(event)"                minHeight="600"                minWidth="955">     <fx:Script>         <![CDATA[             import com.esri.ags.symbols.PictureMarkerSymbol;                          import mx.core.UIComponent;             import mx.events.FlexEvent;             import mx.managers.PopUpManager;              protected function applicationCompleteHandler(event:FlexEvent):void             {                 var loader:Loader = new Loader();                 loader.load(new URLRequest("http://resources.arcgis.com/en/help/flex-api/samples/01nq/assets/warningsmall.gif"));                 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteHandler);             }              protected function loadCompleteHandler(event:Event):void             {                 // source is loaded                 var loaderInfo:LoaderInfo = event.target as LoaderInfo;                 var pmsSource:Bitmap = loaderInfo.content as Bitmap;                 var pms:PictureMarkerSymbol = new PictureMarkerSymbol(pmsSource);                                  // For the example                 var swatch:UIComponent = pms.createSwatch();                 PopUpManager.addPopUp(swatch, this);                 PopUpManager.centerPopUp(swatch);             }                      ]]>     </fx:Script> </s:Application>
0 Kudos
JasonLevine
Deactivated User
Hi Yann,
Thank you for putting me on the right track.  I think this will work, but I'm receiving a security error at this line:
var imageSource:Bitmap = loaderInfo.content as Bitmap;


The error is: SecurityError: Error #2122

I believe this is a crossdomain.xml issue, but I'm not sure how to resolve it.

Any ideas?

Thanks,
Jason
0 Kudos
RhettZufelt
MVP Notable Contributor
you could just download the warning.gif to your src/assets/images folder and source it from there.  That will tell you (and resolve) if it is a crossdomain issue.

R_
0 Kudos
JasonLevine
Deactivated User
I solved my problem... Prior to the load, I needed to create a LoaderContext object, and pass it into the load function:
var loaderContext:LoaderContext = new LoaderContext();
loaderContext.allowCodeImport = true;
loaderContext.checkPolicyFile = true;
loader.load(new URLRequest(MYURL),loaderContext);


Once the crossdomain.xml file was added to the server that contains my images, I no longer received the security error.

Thanks again for your help,
Jason
0 Kudos
MarthaSelig1
Emerging Contributor
Thank you both! Using your suggestions, I'm happy to report that my maps are loading with progress bars to let viewers know that something is happening. This is great, thanks,

Martha
0 Kudos