Text labels not showing for certain vector tile layers

[gavinr]

Issue summary

When using Esri Leaflet Vector to add vector tile basemap layers in other languages, on some langauges (like Arabic) the text labels do not show on in the layer.

Italian is working:

See web map 4d1c336e57504552a04552600122f96a:

• See how the font is loaded correctly on ArcGIS Online: https://www.arcgis.com/apps/mapviewer/index.html?webmap=4d1c336e57504552a04552600122f96a
• Take the layer ID from that web map, add it to a leaflet map using L.esri.Vector.vectorTileLayer("bd47af4aad0847909b3ccd255a429092").addTo(map);: https://jsbin.com/resuqol/3/edit?html,output
  • Expected: layer loads just like in ArcGIS Online
  • Actual: layer loads just like in ArcGIS Online ✅

Arabic is not working:

See web map 8e0c793963b74220b0d18bbd332372cc:

• See how the font is loaded correctly on ArcGIS Online: https://www.arcgis.com/apps/mapviewer/index.html?webmap=8e0c793963b74220b0d18bbd332372cc
• Take the layer ID from that web map, add it to a leaflet map using L.esri.Vector.vectorTileLayer("3942a6195c51412c8bb75f1fe82d9a5d").addTo(map);: https://jsbin.com/xafutow/2/edit?html,output
  • Expected: layer loads just like in ArcGIS Online
  • Actual: text not loading ❌

Potential Cause

If you look at the style root.json, you'll see that text-font is an array, and the layer should "Fall back" to the second font if the first one is not found.

Is it possible that this "falling back" to Arial Unicode MS Regular is not happening and thus the font is not showing?

[jwasilgeo]

We indeed manipulate the text-font here in the source Util helper function: https://github.com/Esri/esri-leaflet-vector/blob/v3.1.1/src/Util.js#L161-L171

Which is used by the L.esri.Vector.vectorTileLayer here: https://github.com/Esri/esri-leaflet-vector/blob/v3.1.1/src/VectorTileLayer.js#L72

The mapbox style spec says it can be an array of strings: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-symbol-text-font

@patrickarlt do you recall the reason we decided to only keep the 1st? And can we change this to keep any/all that exist in the incoming style object?