nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

PictureMarkerSymbol onLoad handler doesn't exist

JasonLevine

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

Vind meer berichten getagd met

Accepted answers

YannCabon

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>

All comments

MarthaSelig1

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

JasonLevine

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

rzufelt

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_

JasonLevine

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

YannCabon

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>

MarthaSelig1

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.