Look at using style transform function to restore added styles when switching base style

[dimfeld]

Just spotted https://github.com/maplibre/maplibre-gl-js/issues/2587#issuecomment-1997263712, possibly a simpler implementation

Originally posted by @dabreegster in https://github.com/dimfeld/svelte-maplibre/issues/60#issuecomment-1997269010

Currently we do some tracking of what's been added on top of the base style, and once the new style loads we re-add it. This method wouldn't be too different, but would probably require a bit less bookkeeping and would likely also reduce some flicker since the new base style and the added styles would probably be loaded together.

[selenecodes]

For user trying to accomplish this right now:

<GeoJSON data={data} id="myprefix-geodata">
  <CircleLayer
    paint={{
      "circle-color": "red",
      "circle-opacity": 0.5,
      "circle-radius": 2,
    }}
  />
</GeoJSON>

map.setStyle(styleObject, {
  transformStyle: (previousStyle, nextStyle) => {
    const custom_layers = previousStyle.layers.filter(layer => layer.source.startsWith('myprefix-'));
    const layers = nextStyle.layers.concat(custom_layers);
    const sources = nextStyle.sources;
    for (const [key, value] of Object.entries(previousStyle.sources)) {
      if (key.startsWith('myprefix-')) {
        sources[key] = value;
      }
    }
    return {
      ...nextStyle,
      sources: sources,
      layers: layers
    };
  }
});