Cannot use text-field layers on third party maps

[daumann]

Apparently drawing text labels is only possible if using a Mapbox basemap?

When using another map provider (such as stamen or osm), upon adding a layer which uses text-field, it throws:

Error: layers.symbols.layout.text-field: use of "text-field" requires a style "glyphs" property

Here is a working example with a mapbox vector tile source for the basemap:
http://jsfiddle.net/brianssheldon/wm18a33d/27/
And here is the same code, just with another basemap provider (here: osm, but same behavior with stamen):
http://jsfiddle.net/wm18a33d/38/

Is there a workaround? This would completely derail using mapbox-gl in my project if true.

[daumann]

adding "glyphs": "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf" works.

[kannes]

For others getting stuck on this, you need to add the "glyphs" property on the same level as "sources" and "layers". And you need to use a provider that has the fonts you use. For example for Mapbox example derivations you probably want "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf".

[simison]

For OSM and other non Mapbox layers, see:

https://openmaptiles.org/docs/style/mapbox-gl-style-spec/
https://github.com/openmaptiles/fonts

They're served from Github via "glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf" where fontstack will be font name from https://github.com/openmaptiles/fonts/tree/gh-pages — for example "Open Sans Bold", when defined in your layer like so:

{
  // ...
  layout: {
    'text-font': ['Open Sans Bold'],
  },
}

[kolen]

You should add layers which render text only after main style is loaded, i.e. in map.on("styledata", …)

[adholmgren]

For others getting stuck on this, you need to add the "glyphs" property on the same level as "sources" and "layers". And you need to use a provider that has the fonts you use. For example for Mapbox example derivations you probably want "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf".

I can't figure out the layers in Python. Has anyone gotten this to work with a Python implementation?

[Kysumi]

For anyone stumbling into this issue in the future.

#4808 (comment)

This comment is correct, you can load the glyphs from that address.

Here is a simple example of using it

import {
  MapStyle,
} from "react-map-gl/maplibre";

const Base: MapStyle = {
  version: 8,
  name: "Style",
  glyphs: "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
  sources: {},
  layers: [],
};

map.addLayer({
          id: "icon-layer",
          type: "symbol",
          source: sourceId,
          layout: {
            "icon-image": "demo",
            "icon-size": 1,
            "icon-allow-overlap": true,

            // https://github.com/openmaptiles/fonts/blob/gh-pages/fontstacks.json
            "text-font": ["Open Sans Bold"],
            "text-field": ["get", "name"],
            "text-size": ["step", ["zoom"], 0, 17, 15],
            "text-overlap": "cooperative",
          },
          paint: {
            "text-color": "white",
            "text-halo-color": "black",
            "text-halo-width": 2,
          },
        });

You can find the list of available fonts that can be used here
https://github.com/openmaptiles/fonts/blob/gh-pages/fontstacks.json

[Khaldor48]

Thank you!!! I was stuck on this problem for many hours. It will be very helpful to show some error or warning, that it cannot be rendered due font settings. I was missing the combination of
glyphs: 'http://fonts.openmaptiles.org/{fontstack}/{range}.pbf',

and available font setting for that symbol layer

'text-font': ['Open Sans Bold'],

It is crucial to have both in place, otherwise you get no feedback from map and you will be stuck as I was :)