0

Using http://bl.ocks.org/danswick/a4de5c170c04fdd38bb4 and https://www.mapbox.com/mapbox-gl-js/example/cluster/ I made a Mapbox GL JS map.

  • It has no vector tiles basemap but raster tiles.
  • It has vector data from GeoJSON points that get clustered.

Now the text labels for the clusters are broken:

evented.js:109 Error: layers.cluster-count.layout.text-field: use of "text-field" requires a style "glyphs" property

I assume that this is because I have no vector style and thus no vector style for "glyphs".

https://github.com/mapbox/mapbox-gl-js/issues/4808 says I should add:

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

which I did. My map definition ends up like this:

var map = new mapboxgl.Map({
    container: 'map',
    style: {
        "version": 8,
        "sources": {
            "simple-tiles": {
                "type": "raster",
                "tiles": [
                    "http://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png"
                ],
                "tileSize": 256,
            }
        },
        "glyphs": "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf"
        "layers": [{
            "id": "simple-tiles",
            "type": "raster",
            "source": "simple-tiles",
            "minzoom": 0,
            "maxzoom": 22
        }]
    },
    center: [10.447683, 51.163375],
    zoom: 6
});

But all I get are lots of errors

evented.js:109 Error: Error: Error at Actor.receive (actor.js:81)

How can I get text to work?

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

did not have the font I used. I had to find a different provider. It works just fine with

"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.