Style editing performance tips

[orangemug]

When building an app with maplibre-gl-js/mapbox-gl-js you can just throw a new style at it and it does an "internal diff" updating the style from what has changed. This appears to be slow in ol-mapbox-style currently I'm just calling

apply(mapInstance, newStyle)

In maplibre-gl-js only the layer that's updated changes. Whereas we get a full, fairly slow, re-render in ol-mapbox-style. Anybody any ideas would I go about making this quicker?

[ahocevar]

Implementing a complete internal diff mechanism is planned, but lacks funding or code contributions. But some important building blocks of an internal diff are already available and can help with the use cases you mentioned:

updateMapboxLayer(mapInstance, newLayerStyle)
addMapboxLayer(mapInstance, newLayerStyle, beforeLayerId)
removeMapboxLayer(mapInstance, layerStyleOrId)
updateMapboxSource(mapInstance, sourceId, newSourceDef)

[orangemug]

Maybe a first step could be instead of a total style diff, either

• Object equality - apps often use immutable objects anyway so layer === newLayer would do
• shouldLayerUpdate hook - to defer updates, allow the controlling app to decide to defer render

Either of those could be a first step towards what (maplibre/mapbox)-gl-js does.

[ahocevar]

There is a diff module in the style-spec package, and the aforementioned functions are already there. The task ahead is combining the two to achieve a diff. If you can contribute code or funds, it would be appreciated to move this effort forward.

[orangemug]

Thanks, I don't have any funds at the moment as I'm between jobs hacking on Maparatus. I'd like to contribute to this as a part of that work, but other tasks in the short term will take priority, like #10 (comment).