diffStyleUpdates does not reload layers

[Tenchi2xh]

Hi, thanks for the great library!

I noticed that when using diffStyleUpdates set to true and changing the style, it seems that no style.load event is generated by maplibre, resulting in all the layers not being reloaded after getting nuked.

[dimfeld]

I suspect that fixing #138 will make things work properly here.

[Tenchi2xh]

I suspect that fixing #138 will make things work properly here.

Great, thanks! A slightly modified version of the fix mentioned in that thread worked for me:

    $: map?.setStyle($isDarkTheme ? darkTheme : lightTheme, {
        transformStyle: (previousStyle, nextStyle) => {
            if (previousStyle) {
                const customLayers = previousStyle.layers.filter(l =>
                    ["line-", "fill-", "heatmap-"].some(prefix => l.id.startsWith(prefix))
                )
                const layers = nextStyle.layers.concat(customLayers)
                const sources = nextStyle.sources

                for (const [key, value] of Object.entries(previousStyle.sources || {})) {
                    if (key.startsWith("geojson-") || key.startsWith("heatmap")) {
                        sources[key] = value
                    }
                }

                return {
                    ...nextStyle,
                    sources: sources,
                    layers: layers,
                }
            }
            return nextStyle
        },
    })

Theme switching is now instant and works pretty well! Before that, without diffStyleUpdates it would take a few seconds because all the layers needed to be re-created.

I also needed to set the style prop of the MapLibre component to an empty string to avoid a DOMException: The user aborted a request in the console

[dimfeld]

That’s great! Thanks for sharing your solution :)