Certain lat/lngs, zoom and styles throws error: Cannot read properties of null (reading 'point')

[willheslam]

maplibre-gl-js version: 2.1.9

browser: Chrome 100.0.4896.127 on OSX

Steps to Trigger Behavior

Certain lng lat coordinates, with certain zoom settings, e.g.

{
        style: 'https://api.maptiler.com/maps/basic/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
        center: [4.908376, 52.366014],
        zoom: 20
}

cause maplibre to throw an error whilst rendering:

Uncaught TypeError: Cannot read properties of null (reading 'point')

It seems to be dependent on specific latlngs and zoom and styles.
For example, zoom 19 or 21 doesn't trigger the error, nor does 19.9 or 20.6 (but 20.5 does)
Using the 'streets' style
'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
doesn't trigger the error but 'basic' does.

Here's a screenshot from jsfiddle:

and here's a screenshot from the app I first encounted this bug with (using react-map-gl as a layer on top of maplibre-gl)

It's specifically coming from these lines:

    for (const glyph of placedGlyphs) {
        addDynamicAttributes(dynamicLayoutVertexArray, glyph.point, glyph.angle);
    }

Logging out placedGlyphs results in

[
    {
        "point": {
            "x": 12304.450428946711,
            "y": 23700.84536864106
        },
        "angle": 8.59940111024864,
        "path": [
            {
                "x": 12320,
                "y": 23684
            },
            {
                "x": 12304.450428946711,
                "y": 23700.84536864106
            }
        ]
    },
   ...
    null,
    null,
    null,
    null,
   ...
    {
        "point": {
            "x": 12352.048734854137,
            "y": 23649.28053724135
        },
        "angle": 2.316215803069055,
        "path": [
            {
                "x": 12320,
                "y": 23684
            },
            {
                "x": 12352.048734854137,
                "y": 23649.28053724135
            }
        ]
    }
]

and the null items come specifically from this line:

            placedGlyphs.push(placeGlyphAlongLine(fontScale * glyphOffsetArray.getoffsetX(glyphIndex), lineOffsetX, lineOffsetY, flip, anchorPoint, tileAnchorPoint, symbol.segment,
                lineStartIndex, lineEndIndex, lineVertexArray, labelPlaneMatrix, projectionCache, rotateToLine));

inside the function placeGlyphAlongLine this condition is occurring:

        // offset does not fit on the projected line
        if (currentIndex < lineStartIndex || currentIndex >= lineEndIndex)
            return null;

It's unclear if this is ever expected to happen as I don't have a good understanding of the code, but given items inside placedGlyphs can in some circumstances be null, addDynamicAttributes(dynamicLayoutVertexArray, glyph.point, glyph.angle); is unsafe - either there shouldn't be nulls in the array, or nulls need to be checked for and handled appropriately - I suspect the former though I'm not sure what the context is.

My best guess is there is some kind of geometry at the coords and zoom level I described that triggers this problem.

Link to Demonstration

This JS bin demonstrates the problem, but you'll need to open the dev console to see the error:

https://jsbin.com/jociwic/1/edit?html,output

You should see:

or alternatively with jsbin:

Create a JS fiddle from https://maplibre.org/maplibre-gl-js-docs/example/simple-map/
and set the JS to

   var map = new maplibregl.Map({
       container: 'map',
       style: 'https://api.maptiler.com/maps/basic/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
       center: [4.908376, 52.366014],
       zoom: 20   			
   });

[HarelM]

placeGlyphALongALine was recently changed in order to allow placing symbols up right for every letter.
Can you check if you can reproduce this in earlier versions?

[willheslam]

With versions 2.1.8, 2.1.7, 2.1.6, 2.1.1, 2.1.0, 2.0.0, 1.15.2, 1.14.0, I get the same error.

[HarelM]

Ok, thanks, this means this is not new.
If you have more time to investigate why point is null it would help a lot to push this forward.

[HarelM]

@klokan can you check if maptiler API key is blocking jsbin? I can't seem to be able to see the provided example.
@willheslam let me know if you can reproduce this with a simpler style, maybe a geojson that demonstrates this exact problem...?

[ragnarok56]

We ran into this same problem today, so this is still an issue with 4.7.1. Troubleshooting ended up with the same conclusion as @willheslam, its unsafe to assume that first/last glyphs being placed is sufficient to render the remaining glyphs.

In our particular case, we're using openmaptiles styles and I was able to update the style for the name attributes for the layer that was causing the error from {name:latin}\n{name:nonlatin} to just {name:latin} (for reference, https://github.com/openmaptiles/osm-bright-gl-style/blob/master/style.json#L1871) and that seemed to fix it, but its a feels bad type of fix because I'm not sure where else this could pop up unexpectedly.