Bug: Background maps do not load correctly

[SannaJokela]

NSL terrain map & OSM do not load when zooming, cache issue?

[SannaJokela]

Here is a gif what happens. When changing to another background layer, the background does not keep up and goes crazy, ping @Rikuoja

[Rikuoja]

Console reports TypeError: undefined is not an object (evaluating 't.layout.get')

at maplibre-gl.js

                this._sortAcrossTiles = "viewport-y" !== t.layout.get("symbol-z-order") && !t.layout.get("symbol-sort-

so this is some kind of a problem with maplibre. Will investigate.

[Rikuoja]

Happens whenever selecting the last layer in the menu. Probably too few items in the menu or something.

[Rikuoja]

Nope. Actually happens

1) when selecting default style in the menu again, OR 2) first selecting another style, then selecting any other style.

Does not occur when selecting the same style again.

[Rikuoja]

Nothing wrong with the style props passed to map component IMO. This seems to happen in between passing the props after the style is loaded, when requestAnimationFrame is called:

[Rikuoja]

Aha! This is an error in (some) of our map layers on top of the basic style.

When there are no symbol layers, only the base map style, this doesn't happen.

[Rikuoja]

Narrowing down the problem one layer at a time.

[Rikuoja]

Okay, so this happens if the OSM layers OR the stop layers are active.

So apparently a problem with layer styles with icons.

[Rikuoja]

But not a problem with basic layer styles with icons.

More specifically, this only happens when a symbol layer is added at render with react-map-gl <Layer>. When the same symbol layer is present in the base map style, maplibre renders fine without crashing.

[Rikuoja]

Could be somehow related to/ similar to old bug https://github.com/alex3165/react-mapbox-gl/issues/320

[Rikuoja]

Also, icons are missing in styles other than the basic style. We should load the icons so that they are present in all styles. Might have something to do with this bug?

[Rikuoja]

Aha! styleDiffing={false} prop to MapGL will fix this, so apparently this is a bug when diffing styles with missing images.

At style reload, the style will lose any images (they are only loaded on first load), and probably style diff crashes due to this.

So to make icons work in all styles, let's also add them here whenever the style changes.

[Rikuoja]

Could not reproduce the bug with maplibre and same library versions in https://codesandbox.io/s/misty-cache-12khjj?file=/src/index.js

Perhaps the bug is a combination of style diffing with a style that is set dynamically in code? In tarmo, we cannot set the style file directly by style url, we 1) first load the style JSON, then 2) insert the correct api key, and then 3) set the style asynchronously.

Perhaps this confuses the styleDiffing?

With normal styles, maplibre works correctly and yields

Unable to perform style diff: Unimplemented: setSprite..  Rebuilding the style from scratch. 

when reloading a style which has added images.

Therefore, styleDiffing will be false anyway, since we always set the images dynamically on top of the existing style.