topic Re: Report bug in ESRI tutorial (ArcGIS API for JavaScript) in ArcGIS JavaScript Maps SDK Questions

Report bug in ESRI tutorial (ArcGIS API for JavaScript)

MichelleJean — Sat, 11 Dec 2021 19:35:11 GMT

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

Re: Report bug in ESRI tutorial (ArcGIS API for JavaScript)

KellyHutchins — Sat, 11 Dec 2021 19:35:14 GMT

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.

    .esriLocationResultSymbol {
      background-image: url(images/flag.png);
      background-repeat: no-repeat;
      width: 28px;
      height: 28px;
    }‍‍‍‍‍‍

Re: Report bug in ESRI tutorial (ArcGIS API for JavaScript)

MichelleJean — Sat, 11 Dec 2021 19:35:16 GMT

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

Re: Report bug in ESRI tutorial (ArcGIS API for JavaScript)

KellyHutchins — Sat, 11 Dec 2021 19:35:19 GMT

Sure try this css instead

    .esriLocationResultSymbol > svg{
      width:32px;
      height:32px;
    }
     .esriLocationResultSymbol > svg > path{
      transform:scale(0.75);
     }‍‍‍‍‍‍‍

Re: Report bug in ESRI tutorial (ArcGIS API for JavaScript)

MichelleJean — Wed, 17 May 2017 11:01:21 GMT

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

Re: Report bug in ESRI tutorial (ArcGIS API for JavaScript)

KellyHutchins — Wed, 17 May 2017 16:24:06 GMT

Which version of IE?

Re: Report bug in ESRI tutorial (ArcGIS API for JavaScript)

MichelleJean — Wed, 17 May 2017 20:17:39 GMT

I tested it both on Internet Explorer 9 and 11.

Here is the JSBin.

Re: Report bug in ESRI tutorial (ArcGIS API for JavaScript)

KellyHutchins — Wed, 17 May 2017 23:06:38 GMT

I don't know of a fix for IE but the developer has a fix for this issue that will be part of the next release of the JSAPI (due UC time-frame). Once the next release is live you will no longer need the custom css above and it should work in all supported browsers.

Re: Report bug in ESRI tutorial (ArcGIS API for JavaScript)

MichelleJean — Thu, 18 May 2017 10:15:51 GMT

Thank you Kelly