font-awesome markers

94
3
a week ago
FabianHanggi
New Contributor II

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

Tags (3)
0 Kudos
3 Replies
BjornSvensson
Esri Regular Contributor

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-stream...

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

FabianHanggi
New Contributor II

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
0 Kudos
Noah-Sager
Esri Regular Contributor

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.

0 Kudos