topic Re: font-awesome markers in ArcGIS JavaScript Maps SDK Questions

font-awesome markers

FabianHanggi — Fri, 05 Aug 2022 21:06:20 GMT

Hello

I'd like to use font awesome icons as markers. I'm using arcgis 4.24.5.

i tried to follow this exmaple from @ReneRubalcava but it is not working

https://community.esri.com/t5/gis-blog/label-markers-for-you-arcgis-javascript-apps/ba-p/894206

i'm seeing this error in the console

request.js:5 GET https://static.arcgis.com/fonts/fontawesome-regular/61696-61951.pbf 404

Not sure why it's looking for a pbf file on static.arcgis.com

Does anyone have an example for how to use font awesome icons as symbols in a graphic?

Thank you.

Fabian

Re: font-awesome markers

BjornSvensson — Fri, 05 Aug 2022 22:33:12 GMT

That Rene sample is 7 years old with a very different version of the JavaScript API. It does not apply to recent versions.

For symbolizing points, you have four options: SimpleMarkerSymbol , PictureMarkerSymbol , TextSymbol and CIMSymbol .

To specify a font for TextSymbol for clientside layers, the fonts supported depends on if you are using SceneView or MapView. For SceneView, the font needs to be installed on the client machine. For MapView, supported fonts are hosted on https://static.arcgis.com/fonts. Based on your error it seems like you are using MapView. The supported fonts are listed at https://developers.arcgis.com/javascript/latest/labeling/#fonts-for-featurelayer-csvlayer-and-streamlayer

https://developers.arcgis.com/javascript/latest/labeling/ has more info about font support.

Re: font-awesome markers

FabianHanggi — Wed, 10 Aug 2022 18:25:48 GMT

Hi Bjorn

Thank you for your reply.

Yes I am using Mapview.

Since font awesome is not listed as a supported font I guess there's no way to use it with a TextSymbol?

I have one solution but don't like it very much. I download the svg file from fontawesome web site and put it into my public folder (e.g. mine is called truck-solid.svg) then use it like this this

const track = new Track({

view: view,

graphic: new Graphic({

symbol: {

type: "picture-marker",

size: "12px",

color: "green",

url: "truck-solid.svg",

outline: {

color: "#efefef",

width: "1.5px"

}

}),

useHeadingEnabled: false

});

Any better solutions for using fontawesome would be appreciated.

Thank you

Fabian

Re: font-awesome markers

Noah-Sager — Mon, 15 Aug 2022 17:28:41 GMT

Hi @FabianHanggi, unfortunately, Bjorn is correct and there is not a good way to use font awesome in a 2D MapView. It would work in a 3D SceneView as described in the Labeling guide page.