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

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; } } }

Web URL to *.png file for PictureMarkerSymbol

ChristianBischof

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:

<SPAN class="keyword token">var</SPAN> markerSymbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"picture-marker"</SPAN><SPAN class="punctuation token">,</SPAN>
          url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://www.myurltothepicture.com/img/mypicture.png"</SPAN><SPAN class="punctuation token">,</SPAN>
          height<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"60px"</SPAN><SPAN class="punctuation token">,</SPAN>
          width<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"60px"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

What works, but isn't what I need:

<SPAN class="keyword token">var</SPAN> markerSymbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"picture-marker"</SPAN><SPAN class="punctuation token">,</SPAN>
          url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"local/path/to/png/symbol.png"</SPAN><SPAN class="punctuation token">,</SPAN>
          height<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"60px"</SPAN><SPAN class="punctuation token">,</SPAN>
          width<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"60px"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

Trouver plus de publications taguées avec

Accepted answers

Egge-Jan_Pollé

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:
Make certain that the image is hosted on a CORS enabled server.
Use an image hosted on the same domain as the application.
Install a proxy.

More info here: PictureMarkerSymbol | ArcGIS API for JavaScript 4.15

HTH,

Egge-Jan

All comments

Egge-Jan_Pollé

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:
Make certain that the image is hosted on a CORS enabled server.
Use an image hosted on the same domain as the application.
Install a proxy.

More info here: PictureMarkerSymbol | ArcGIS API for JavaScript 4.15

HTH,

Egge-Jan

ChristianBischof

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<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://i.stack.imgur.com/ILTQq.png"</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Egge-Jan_Pollé

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

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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