Refreshing symbols

[oyvindi]

I got a case where the style document has 3 different sources, hence multiple layers are created.

The application has two different pages, using the same tiles but with different styles. When creating a new Map(), then using apply() for the vector tiles, the new instance of the map renders tiles with the same style as the previous instance. That is, until I zoom to somewhere else outside the "home-extent", when it starts to display correct colors (and of course, when I refresh the entire page)

Seems like the symbols are being cached somewhere, but can't figure a way to clear this.

I'm using the most recent versions of ol-mapbox-style and OpenLayers.

[ahocevar]

There is an icon image cache, but a new one is created for each call to stylefunction, and that is called when you call apply as well. Can you share your code in a codepen or codesandox or similar?

[oyvindi]

That would require some work, as there is a lot of code divided in multiple files and functions.

Condensed down, this is actually what's been done on a new map instance:

const layerGroup = new LayerGroup()
const style = isDarkMode ? nightModeStyle : normalStyle
olms.apply(layerGroup, style)
const layers = olMap.getLayers()
layers.insertAt(0, layerGroup)

EDIT: Forgot to mention that I'm using apply(), due to multiple sources in the mapbox style doc. This results in multiple layers obviously, which I dump into a LayerGroup.

There is an icon image cache, but a new one is created for each call to stylefunction, and that is called when you call apply as well. Can you share your code in a codepen or codesandox or similar?

[oyvindi]

Update: Since style2 is basically a copy of style1, the layer.id will be the same on both style docs (just tampering with the colors).

When renaming layer.id in style2 to e.g 'style/${layer.id}', this works as expected.

So yep, seems like there is indeed cache mechanisms at play.

[ahocevar]

So what you can try to do is give style2 a different id than. Because that's part of the cache key.

style1:

{
  "version": 8,
  "id": "style1",

style2:

{
  "version": 8,
  "id": "style2",

[oyvindi]

The MapBox style specification does not mention id at root level ?

We're using a 3rd party supplier for the service, and the style doc does not have an id either..

[ahocevar]

If there is no id present, you should be fine - ol-mapbox-style will auto-generate one. You're right, the id is not documentetd, but is set by many style providers (including MapTiler).

I think in order to reproduce this, it will be best if you can provide a simple example that shows the problem. Because to this point, I have not been able to reproduce the problem.

[oyvindi]

This particular service is hosted on an ESRI server, for reference.

I'll see if I get the time create an example to reproduce this.

Until further, I worked around this as explained above:

• I got a copy of the original style doc from the provider locally, with customizations (removed layers etc)
• I create additional styles based on the original (altered programmatically), where I simply prefix the layer ID's: '${prefix}/${layer.id}'

That's a low effort solution that seems to work fine for now, producing the same result as you're proposing. I loop the layers anyway when processing the paint section.