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

[KellyHutchins · Accepted solution]

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

[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

[KellyHutchins]

Sure try this css instead

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

[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

[KellyHutchins]

Which version of IE? 

[MichelleJean]

I tested it both on Internet Explorer 9 and 11.

Here is the JSBin.

[KellyHutchins]

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. 

[MichelleJean]

Thank you Kelly