topic Re: Text Symbol Bug in 4.10 with icons in ArcGIS JavaScript Maps SDK Questions

Text Symbol Bug in 4.10 with icons

BrandonFlessner — Fri, 10 Dec 2021 20:14:57 GMT

I'd like to use Font Awesome or Bootstrap Glyphicons as point text symbols. This used to work in previous versions of the API but now throws an error: "Couldn't find font glyphicons-halflings-regular. Falling back to Arial Unicode MS Regular" Here is a sample:

https://codepen.io/anon/pen/eXwRvR

Relevant code:

const textSymbol = {
        type: "text", // autocasts as new TextSymbol()
        color: "#7A003C",
        text: "\ue021", // glyphicon home
        font: { // autocasts as new Font()
          size: 36,
          family: "Glyphicons Halflings"
        }
      };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If you change "4.9" to "4.10" on line 17 in the codepen sample, it will break. Any ideas??

Re: Text Symbol Bug in 4.10 with icons

Noah-Sager — Wed, 27 Mar 2019 22:08:55 GMT

Hi Brandon. At version 4.10, we converted all layers in 2D MapViews to use WebGL. As part of this, we had a breaking change with the TextSymbol and Esri Icon Fonts:

https://developers.arcgis.com/javascript/latest/guide/release-notes/index.html#breaking-changes

Note that font family name has changed to "calcite-web-icons", and the TextSymbol now expects a resource in .pbf format. Also the default directory for finding these .pbf files will be https://static.arcgis.com/fonts

Soon you will have the ability to publish your own .pbf files, but until then, I don't think you will be able to work with the resource above. Hope this helps.

-Noah

Re: Text Symbol Bug in 4.10 with icons

_____ — Tue, 25 May 2021 23:54:01 GMT

Re: Text Symbol Bug in 4.10 with icons

Noah-Sager — Wed, 07 Oct 2020 16:11:56 GMT

The link is just for clarification. It is not accessible directly. If you load an app with fonts (except for MapImageLayer), you will see requests to that url accessing .pbf font files. More info here: Labeling | ArcGIS API for JavaScript 4.16

Re: Text Symbol Bug in 4.10 with icons

_____ — Tue, 25 May 2021 23:54:12 GMT

Re: Text Symbol Bug in 4.10 with icons

MarcBate — Fri, 20 Nov 2020 16:02:36 GMT

Open the svg in a text editor and copy the value of the path attribute, then use a marker symbol and use that string as its path property. You can then set the color of the marker symbol.

For svg taken from fonts, you will need to flip it horizontally and then again vertically (I used Illustrator), but I'm assuming there are other tools out there to do that.