Web URL to *.png file for PictureMarkerSymbol

1419
4
Jump to solution
06-22-2020 02:27 AM
ChristianBischof
Esri Contributor

I am trying to achieve the following:

I'd like to use a png file as the marker symbol for my PictureMarkerSymbol, but it seems like it's only possible with local png files

What doesn't work, but I'd like to achieve:

var markerSymbol = {
          type: "picture-marker",
          url: "https://www.myurltothepicture.com/img/mypicture.png",
          height: "60px",
          width: "60px",
};

What works, but isn't what I need:

var markerSymbol = {
          type: "picture-marker",
          url: "local/path/to/png/symbol.png",
          height: "60px",
          width: "60px",
};

Does anybody know if this is generally not possible, or am I doing something wrong?

I'm using JS API 4.15

Thanks in advance for your help

0 Kudos
1 Solution

Accepted Solutions
Egge-Jan_Pollé
MVP Regular Contributor

Hi Christian Bischof,

Yeah, the easiest way is to use an image hosted on the same domain as the application. That works, as you have already noted.

Alternatively:

To avoid CORS issues with this symbol, do one of the following:

More info here: PictureMarkerSymbol | ArcGIS API for JavaScript 4.15 

HTH,

Egge-Jan

View solution in original post

4 Replies
Egge-Jan_Pollé
MVP Regular Contributor

Hi Christian Bischof,

Yeah, the easiest way is to use an image hosted on the same domain as the application. That works, as you have already noted.

Alternatively:

To avoid CORS issues with this symbol, do one of the following:

More info here: PictureMarkerSymbol | ArcGIS API for JavaScript 4.15 

HTH,

Egge-Jan

ChristianBischof
Esri Contributor

Thanks Egge-Jan Pollé‌ then I got it right, but it's not possible to simply add something like this to the url property?

url: "https://i.stack.imgur.com/ILTQq.png"
0 Kudos
Egge-Jan_Pollé
MVP Regular Contributor

Hi Christian Bischof,

No, apparently not... When your image is hosted in a different domain as the application, you should make sure that the server the image is hosted on is CORS enabled. Or you should install a proxy...

When I tried this sometime ago (Aan de slag met ArcGIS JavaScript - CSV bestand toevoegen), I ended up using the most simple solution: I copied the image to my own server. I did not (not yet) get one of the other two options to work, so I am not able to give you any insights into these...

BR,

Egge-Jan

ChristianBischof
Esri Contributor

Thanks Egge-Jan Pollé‌ that's exactly what I've done right now, because it's the easiest way.