What is the most straight forward method to write text to a custom Mapbox GL layer? See image for how it should look like: Mapbox map with static text! The text should be absolute - not moving with the map - and it should ideally utilise a custom font from e.g. Google Fonts. But the alternative of using a HTML5 2d canvas on top of the map is not an option, because I want to further modify the whole web gl context - including the text.

I know how to create a customer layer with a 2d context, and I know I could theoretically write customer shader etc. in GLGS to somehow generate text inside the context, but doing this manually this is just not feasible. I know there are libraries like PixieJS who abstract the 2d rendering, but I'm not sure if combing e.g. Mapbox GL custom layer and PixieJS is a smart way to reach a point of easily being able to draw text?

Snippet form the custom layer, how to I get render text (with absolute position), with custom font, and looking good?

var custom_layer = {
    id: 'customer-layer-1',
    type: 'custom',
    renderingMode: '2d',

onAdd: function (map, gl) {
    var vertexSource = "" +
    "uniform mat4 u_matrix;" +
    "attribute vec2 a_pos;" +
    "void main() {" +
    "    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);" +

    var fragmentSource = "" +
    "void main() {" +
    "    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);" +

How do I prevent having to write custom vertex/fragment shaders? I know there are also awesome custom layer integrations with e.g. Deck.gl which in itself offers a TextLayer, but this one is using bitmap fonts, which look really not that great.

Any tips/examples would be awesome

0 Answers