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

Report bug in ESRI tutorial (ArcGIS API for JavaScript)

MichelleJean

There is a problem with the icons in the Measurement widget with custom symbols tutorial.

The symbol for the Location tool is so small you can hardly see it even after replacing the URL with the full link adress:

esri.symbol.PictureMarkerSymbol("https://developers.arcgis.com/javascript/3/samples/widget_measureworld/images/flag.png",24,24);‍‍‍

Using a SimpleMarkerSymbol instead of the PictureMarkerSymbol will not show the symbol at all (neither in Sandbox or localhost):

var pms = new esri.symbol.SimpleMarkerSymbol();
pms.setSize(28);
pms.setPath("M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z");
pms.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_PATH);‍‍‍‍‍‍‍‍‍‍‍‍

Is there a way to make this tutorial work ?

Thank you,

Michelle

Encuentra más publicaciones etiquetadas con

Accepted answers

khutchins

One option for enlarging the symbol that appears in the measure dialog is to set the image using css. Here's an example of the css you'd need to add to the style section of the sample code.

&nbsp;&nbsp;&nbsp; <SPAN class="selector token">.esriLocationResultSymbol</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-image</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="url token">url(images/flag.png)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-repeat</SPAN><SPAN class="punctuation token">:</SPAN> no-repeat<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 28px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 28px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

MichelleJean

Hi Kelly Hutchins‌

The css works on all browsers except Internet Explorer.

When inspecting the code lines with the Developer Tool, the lines are there.

But for whatever reason they just don't have any effect.

Is there anything I could do to make the ESRI tutorial work on Internet Explorer?

Thank you,

Michelle

khutchins

Sure try this css instead

&nbsp;&nbsp;&nbsp; <SPAN class="selector token">.esriLocationResultSymbol > svg</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>32px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>32px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="selector token">.esriLocationResultSymbol > svg > path</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">transform</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="token function">scale</SPAN><SPAN class="punctuation token">(</SPAN>0.75<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

MichelleJean

Hi Kelly Hutchins‌ ,

Thank you, this css fixes the picture marker symbols.

Is it possible to use it with ESRI SimpleMarkerSymbol mentioned above in the question?

var pms = new esri.symbol.SimpleMarkerSymbol();
pms.setSize(28);
pms.setPath("M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z");
pms.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_PATH);

Not sure how to reference the background-image url in this case...

Thank you,

Michelle

khutchins

One option for enlarging the symbol that appears in the measure dialog is to set the image using css. Here's an example of the css you'd need to add to the style section of the sample code.

&nbsp;&nbsp;&nbsp; <SPAN class="selector token">.esriLocationResultSymbol</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-image</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="url token">url(images/flag.png)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-repeat</SPAN><SPAN class="punctuation token">:</SPAN> no-repeat<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 28px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 28px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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