Error on Draw component when the style of the map is changed dynamically
First of all, thanks for your work on the mapbox related libraries you've develop!
Describe the bug
When you change the style of the map dynamically and you are using the drawing component, a bug occurs in which the draw instance becomes null so that when calling a method an error is generated and the Draw component does not work as expected
I have been looking at this issue and found that the error is caused by this line.
I am working on an application with intensive use of maps and drawings in which we decided to migrate from https://github.com/alex3165/react-mapbox-gl/ to this mapbox wrapper so I was looking at the differences between both libraries to see what the error could be, I found that in react-mapbox-gl the loading state of the map component is not changed when the map style is updated (see line), if that instruction is removed, the drawing tools work correctly, it seems that the process of unmounting and mounting again the child components of the map causes this problem.
Changing this:
if (newMapStyle !== prevMapStyle) {
this.setState({ loaded: false }, () => this._map.setStyle(newMapStyle));
}
To this, fixes the issue and is not causing any trouble in our app.
if (newMapStyle !== prevMapStyle) {
this._map.setStyle(newMapStyle);
}
To Reproduce I've prepared an example to reproduce this issue here.
Steps to reproduce the behavior:
- Draw a polygon (everything works perfectly)
- Click on the upper button that says
change theme - Try to draw a polygon (any figure will do)
At the 3rd step the reference to the MapboxDraw instance is null which makes imposible to finish drawing the polygon because methods of the draw instance are being called on each click so errors are thrown.
Expected behavior
A change in the map style should not affect map child components like the Draw component.
If you're ok with this solution I can send a PR to fix this issue.