CODEWITHSUNDEEP
mapboxmapbox-gl-js
Stephen Lead
Stephen Lead

Reputation: 1976

'use of "text-field" requires a style "glyphs" property' when using a plain background

I'm using a plain background, rather than using a MapBox style, as per this answer

var map = new mapboxgl.Map({
    container: 'map',
    style: {
      version: 8,
      sources: {},
      layers: [
        {
          id: 'background',
          type: 'background',
          paint: {'background-color': 'white'}
        }
      ]
    }
});

I've added a GeoJSON point layer and I'm trying to label it:

'layout': {
  'text-field': ['get', 'name'],
  'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
},

If I use a standard MapBox style for the map, the layer is correctly labelled. But if I use the aforementioned blank basemap, this layer returns the error:

use of "text-field" requires a style "glyphs" property

Searching this error message shows that I need to add a glyphs option:

"glyphs":"mapbox://fonts/mapbox/{fontstack}/{range}.pbf" or "glyphs":"https://fonts.openmaptiles.org/{fontstack}/{range}.pbf"

However, neither of these options prevents the error message, and the layer is not labelled.

What is the correct syntax for the glyphs parameter when using an empty basemap?

Upvotes: 5

Views: 4262

Answers (3)

Nick K9
Nick K9

Reputation: 4675

I ran into this error when I accidentally attempted to set my map's style to undefined. The problem went away when I fixed the bug and instead provided a legitimate mapbox:// style URL.

Upvotes: 0

Titan
Titan

Reputation: 6040

I copied this for my style option and it worked fine with no errors when I previously had the same error as you:

{
  "version": 8,
  "name": "Empty",
  "metadata": {
    "mapbox:autocomposite": true
  },
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "sources": {},
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "rgba(0,0,0,0)"
      }
    }
  ]
}

https://github.com/mapbox/mapbox-gl-styles/blob/master/styles/empty-v8.json

Upvotes: 4

Stephen Lead
Stephen Lead

Reputation: 1976

As a workaround, I created a new Blank style in MapBox Studio and used that as the basemap. After this, the labels appeared correctly.

enter image description here

var map = new mapboxgl.Map({
  style: mapbox://styles/my-blank-map,
  ...
})

I'd still like to know if there's a programmatic way to do this using the MapBox GL-JS API though.

Upvotes: 0

Related Questions