Text Symbol Bug in 4.10 with icons

938
6
Jump to solution
03-27-2019 12:06 PM
BrandonFlessner
Occasional Contributor

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??

1 Solution

Accepted Solutions
Noah-Sager
Esri Regular Contributor

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

View solution in original post

6 Replies
Noah-Sager
Esri Regular Contributor

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

View solution in original post

not_esri
Occasional Contributor III

Your fonts link is broken.

0 Kudos
Noah-Sager
Esri Regular Contributor

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 

0 Kudos
not_esri
Occasional Contributor III

Noah, I have a question for you.

I'm updating an old web map from 4.9 to 4.16, and I used a Graphic with a Text Symbol to display vehicle locations colored by truck type on the map.

Before I just used FontAwesome:

 

var vehicleSymbol = {
    type: 'text',
    color: color,
    text: '',
    font: {
        size: 22,
        family: 'FontAwesome',
    },
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

 

Which worked great, but now that's broken. 

Do you have any advice on the cleanest way to show a truck symbol and be able to change it's color?

Thanks

0 Kudos
MarcBate
Occasional Contributor

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.

0 Kudos
not_esri
Occasional Contributor III

I'll have to give that a try.

I ended up creating different colors of the same icon, which I'd like to avoid.

 

for (vehicle of vehicles) {
	...
	let color = vehicleArray[vehicle.name][1];
	...
	let vehicleSymbol = {
	    type: 'picture-marker',
	    url: `static/images/avl/${color}.svg`,
	    width: '30px',
	    height: '30px',
	};
	...
}

 

0 Kudos