PictureMarkerSymbol Source

1807
4
03-13-2013 11:17 AM
JasonLevine
Occasional Contributor II
Is there a way to source a PictureMarkerSymbol to something other than a url? For example, I've loaded an HTMLImageElement that I'd like to use as the image for my PictureMarkerSymbol, but the API says the PictureMarkerSymbol requires a url string, not an object.  The reason I'm trying to do it this way is that my image is fairly large and takes a while to load; I'd like to attach a loadComplete event that fires when the image is finished loading.  If I load it as an HTMLImageElement, I can do this; however, the PictureMarkerSymbol does not have an onLoad even that fires when the image is finished loading.

Thanks for your help,
Jason
0 Kudos
4 Replies
ReneRubalcava
Frequent Contributor
So do you already display the HTMLImageEl on the page and it will also be the PictureMarkerSymbol?
It should be cached anyway once it's loaded once, but if you want to alleviate that issue of network calls, you can encode the image as base64 string and use that instead.
A couple of resources
http://www.base64-image.de/
http://webcodertools.com/imagetobase64converter

Then set image src as "data:image/png;base64,<insert base64 string here>"

I haven't used this for a PictureMarkerSymbol, but use it in other places.

This works in most browsers, but with IE, only IE8 and up I think.
0 Kudos
JasonLevine
Occasional Contributor II
Hi Rene,
I've loaded the image into an HTMLImageElement object, but haven't added it to the document yet.

I just need a way to source the PictureMarkerSymbol to the object instead of a URL.  Does the javascript api even allow for this?
0 Kudos
MichaelFaulcon1
New Contributor

I too am facing a similar issue.

How can I create a PictureMarkerSymbol using raw image data?

I have a service that creates custom imagery and would like to be able to provide the base64 string instead of having to save the file to the server and making the client fetch the file using a url.

0 Kudos
MichaelFaulcon1
New Contributor

It looks like my function to fetch the image data was failing to return the full result.

0 Kudos