React useEffect and OpenLayers

[prosperva]

I have to solve a small problem which goes as so. I am able to add layers to a map using this:

const map = useMapContext();
let layer = new TileLayer({
      properties: {
        id: 'id',
        legendUrl: 'legendUrl',
      },
      visible: true,
      source: new TileWMS({
        url: 'layerUrl',
        params:{},
        crossOrigin: 'Anonymous',
      }),
    });
map.addLayer(layer);

I have read that OpenLayers directly changes the DOM whereas React deals with the virtual DOM and this causes issues. Some of the layers I am working with depend on a date selection. I have a date component and when a user changes a date, the url for example changes. I have the map in a context so it is accessible by components. My idea is to have the calendar be part of the context so it accesses the map then when a date is selected, I do the following:

• Deep copy of the layer that is affected by calendar including index where the layer is
• Modify properties that need to be modified
• Remove layer from the map
• Re-add the layer to the map

I have no tried this yet. Are there events on the map I can utilize?

[BeGj]

In angular using rxjs and NgRx I just create a new source with the updated feature list and do .setSource(newSource) on the layer. Works very well.

[behoney]

setSource(newSource) on the layer

As a React + openlayers developer, that's my pattern as well.
It requires less hook dependencies and minimum care about cleanup function.

[jwjetrifork]

How about the scenario where you want to keep your initial layer (OSM) and just add extra layers e.g. TileWMS?

[behoney]

With that context, I usually add multiple layers and adjust z-index of each layer.
TBH, I don't get what you're exactly saying about, though.

[jwjetrifork]

I apologize for being too vague.
I just started using OpenLayers with React and find it difficult to find information on how to update the map with extra layers, after the map has been created with an initial layer like OSM (OpenStreetMap).
My use case is this: I show a map of the world and after an event (user clicks a btn) i would like to show a new layer on top of the map. If the user clicks the button once again, the layer is removed and only the inital map is left.

According to the docs, it seems like it could be accomplished by calling map.addLayer() but somehow the new layer is not rendered. Thought i'd take my shot asking my question to you, since you mentioned being a React and OpenLayers dev.
Cheers.

[behoney]

@jwjetrifork As far as I understand, your issue is not about "React with Openlayers" things. It's just about Openlayers, probably.

If I were you, I would check all the layers by calling map.getlayers() and then see what happens among layers. If there's only OSM layer although I added X layer with map.addLayer(X), I gonna write debugger right before the line of map.addLayer(X) and then identify why I don't get what I expected.

[jwjetrifork]

Your assumption was completely correct.
For others struggling with this, make sure you initialize the OpenLayers instance only once - React 18's strict mode was what caught me off guard.

[BeGj]

On a second note:
Instead of overriding the source you could also instantiate the source with a FeatureCollection and remove/update/add features to this. Just write a custom function comparing the ids between your list and the features in the collection.

I just implemented it in my app, and it greatly improves integration with the Select interaction by keeping them selected even after editing features. Could be better for performance as well

[BeGj]

Here is an implementation from ChatGpt 4 which should work (I did a quick read through, but I have not tested this exact implementation):
https://chat.openai.com/share/39eb7d37-8134-45cc-a90e-fb2bd018a3aa