React-mapbox-gl: ReactMapboxGl style switching: The layer 'layer-1' does not exist in the map's style and cannot be queried for features.

[iop280]

<ReactMapboxGl
      style={getMapStyle()}
>
  <Layer
    type="line"
    layout={{ 'line-cap': 'round', 'line-join': 'round' }}
  >
    <Feature coordinates={props.coordinates} />
  </Layer>
</ReactMapboxGl>

If I have the layer object, the following error is produced when I switch Map styles (getMapStyle() returns a different style...in this case it's from 'mapbox://styles/mapbox/streets-v9' to 'mapbox://styles/mapbox/satellite-streets-v9')
"The layer 'layer-1' does not exist in the map's style and cannot be queried for features."

There's also the following error trace:

Uncaught TypeError: Cannot read property 'forEach' of undefined
    at e.Layer._this.onMouseMove (eval at <anonymous> (bundle.js:10513), <anonymous>:76:21)
    at e.Evented.fire (eval at <anonymous> (bundle.js:10483), <anonymous>:237:700)
    at h (eval at <anonymous> (bundle.js:10483), <anonymous>:183:1330)
    at HTMLDivElement.a (eval at <anonymous> (bundle.js:10483), <anonymous>:183:788)

[alex3165]

Hey would you mind to send me a link ? JSFiddle or git repository with an example that run into this ?

[z0d14c]

I think I understand this error. unfortunately i do not think that layers and such are removed before the style switching code executes, causing these errors. we solved this in our project by unmounting all of our layers before changing styles, although more "native" support of this behavior would be preferable.

[lamuertepeluda]

Same issue here, though I didn't get the solution from @z0d14c .

<ReactMapboxGl ref="map" accessToken={ KEY } center={ center } onMoveEnd={ this.onMoveEnd } containerStyle={ { ...style, ...CONTAINER_STYLE } } style={ mapStyle } {...mapProps} >
  { children }
</ReactMapboxGl>

Suppose children is any layer, or multiple layers, e.g.

<Layer type="circle" id="position-marker" beore="position-marker-accuracy" paint={ POSITION_CIRCLE_PAINT }>
  <Feature coordinates={ userPosition } onMouseEnter={ onMouseEnter } onMouseLeave={ onMouseLeave } onClick={ onClick } />
</Layer>

when the prop mapStyle changes you get a lot of

The layer 'position-marker' does not exist in the map's style and cannot be queried for features.
Evented.fire @ mapbox-gl.js:237
t.queryRenderedFeatures @ mapbox-gl.js:127
e.queryRenderedFeatures @ mapbox-gl.js:211
Layer._this.onMouseMove @ layer.js:81
Evented.fire @ mapbox-gl.js:237
h @ mapbox-gl.js:183
a @ mapbox-gl.js:183

Uncaught TypeError: Cannot read property 'forEach' of undefined - Src/URLhttp://localhost:8080/index.js - Line: 123634 - Column: 21 TypeError: Cannot read property 'forEach' of undefined
    at e.Layer._this.onMouseMove (layer.js:82)
    at e.Evented.fire (mapbox-gl.js:237)
    at h (mapbox-gl.js:183)
    at HTMLDivElement.a (mapbox-gl.js:183)

May be also related https://github.com/mapbox/mapbox-gl-draw/issues/512

[alex3165]

Hey @lamuertepeluda if you can reproduce the bug using https://github.com/alex3165/react-mapbox-gl-debug that would be very helpful for me to debug then

[lamuertepeluda]

Ok @alex3165 tomorrow I'll try to reproduce this issue with react-mapbbox-gl-debug and I'll post my workaround as well, which I just tried and works (but it's ugly).

I think it's what @z0d14c mentioned (i.e. unmount children, load style, remount children after onStyleLoad event).

[lamuertepeluda]

Ok @alex3165 , I post here both the problem and my workaround/solution using react-mapbox-gl-debug, but I think there is definitely something wrong with the mapbox events fired on style change.
App.zip

In App.zip you will find:
App_with_errors.jsx --> reproduces the issue
App.jsx --> workaround

Copy and paste the code into your setup.
Once started, press the top-left "Switch Style" button.

[lamuertepeluda]

Can the styledataloading event come to rescue?

[lamuertepeluda]

[may be off-topic here] but probably also an handler for the map load event can be helpful

[alex3165]

I dived into this issue, it is actually a major issue, the problem is that when we change the style of the map, all the layers and sources added previously using setLayer or setSource are removed. This 2 methods are used on the Layer component and Source component respectively.

There is 2 workaround possible I would say:

• Posting an issue on mapboxgl and see if there is a way to "reattach" the layers and sources created to the new style
• Re-attaching everything when the style change at the react-mapbox-gl level by passing an attribute in the context between the map and the layer signaling that the style has been updated and the layer has to be "reattached" to the new style.

Thanks @lamuertepeluda for reproducing the bug, it has been very helpful 👍

[lamuertepeluda]

@alex3165 you're welcome.

I think you could put on the proposed workaround n.2 while waiting for an answer to workaround n.1. What do you think about it?

Since it's internal to the the react-mapbox-gl component, it should be transparent to users.

[alex3165]

I was playing with mapbox-gl and found out that the problem is actually coming from react-mapbox-gl, I will work on it asap.

https://jsfiddle.net/alex3165/acr3ykz5/

[z0d14c]

@alex3165 is that supposed to be throwing errors? im not getting any errors from that fiddle.

[z0d14c]

btw this issue (or a very similar one) will also manifest itself not just when changing styles, but also for example:

1. Be on page A
2. Navigate to Page B which has a element with various s and such in it
3. Quickly navigate to page A before all of the sources have been successfully added/loaded on to the map. ReactMapboxGL will be unmounted, causing all of the children to be unmounted, resulting in these errors being thrown.

[z0d14c]

this PR fixes the previously described issue for me, although im not 💯 on whether it fixes these types of issues overall.

[z0d14c]

Cancelling the PR above ^ because I realized something else was the problem.

[brycebigger]

Same problem here- need to select a different map style on the fly. Is there a way to remove everything from the map and then change styles. I'm using Redux for state, so it's no big deal to add all items back to the map. Or any other ideas?

[z0d14c]

@brycebigger essentially the way we do it is by using a flag to hide all of the map components like etc. until the style is done loading.

[alex3165]

I couldn't find any good solution for now, so I removed the logic to update the style as it doesn't work anyway. If anyone has a good solution for that, feel free to open a PR.

[z0d14c]

@alex3165 i left a comment but i think your change is breaking for those of us who were using the workaround of making sure our layers were removed, changing the style, then adding them back. I know that may not be a good reason to keep the functionality, but I think its worth mentioning as I won't be able to upgrade to the newest version of this library without finding a fix.

[alex3165]

@z0d14c Ok I am sorry for that I reverted it back with the version 1.5.2

[z0d14c]

@alex3165 thanks for the quick response, i will try to find some time this weekend to work on identifying a more robust fix for this problem.