alex3165
New version (5.0.0) does not show Features when loading the component for the first time
With version 4.8.6, everything works fine, but the latest version (5.0.0) does not show any Feature for any Layer when first rendering the Map component. However, after using an onClick event function on the Map, it can update the coordinates of a Feature and then the Feature appears on the map.
I am seeing this issue as well. I thought it had to do with the way I was loading the CSS, but I tried via an import as well as just including it in the <head> and I still am getting a blank map on first load.
Only problem now is that when I downgrade back to 4.8.6 my onClick events stop firing on the layers, whereas updating to 5.0.0 worked 😕 ... I'll see if there's something I can figure out here.
Same problem also fixed by moving to 4.8.6. Also pop-ups are broken and render below the map.
I can also confirm this. Installed 5.0.0 as a first-time user and spent the next hours staring at my code, the examples, and the docs. installing [email protected] finally displayed my Layers. A true show stopper this bug, wow.
I can also confirm this. Installed
5.0.0as a first-time user and spent the next hours staring at my code, the examples, and the docs. installing[email protected]finally displayed myLayers. A true show stopper this bug, wow.
Oof. Yeah, I haven't been able to dig into this any further to figure out what it could be.
I can also confirm this. Installed
5.0.0as a first-time user and spent the next hours staring at my code, the examples, and the docs. installing[email protected]finally displayed myLayers. A true show stopper this bug, wow.
Me too. This issue is a breaking change and the map isn't fit for purpose at the moment in 5.0.0 so I would urge swift remediation. Especially if you're using something like the latest Next.JS which disallow global CSS import from node_modules so you can't just revert back to 4.8.6
@alex3165 This is another issue with Mapbox v5.0.0 and I assume it is caused by this commit.
I'm using Next.js. When I change a code that causes a hot reload on the map component ( example: changing the markers ) all the features are displayed properly, but as soon as I refresh the page all the features disappear from the map.
Finally, I found the source of this issue. as I mentioned before, this issue is caused by this merge request of the v5.0.0. The file causing this issue is map-events.ts. If you replace this file with the v4.8.6 one, the issue is fixed. I did not research why the v5.0.0 map-events.ts causes this issue, but if I find the main source of this bug, I'll try to submit a pull request to fix it.
Encountered this issue as well on Next.js v10.0.1. I ended up copying the lib-esm folder from v4.8.6 into my project. I tried forking v4.8.6 and removing the style import, but couldn't get builds working on my machine. Pulling the build folder from v4.8.6 into my project directly (into a vendor/react-mapbox-gl directory) removed the disallow global CSS import from node_modules error since I was no longer referencing an npm package.
Not a long-term fix, but works for anybody who's encountering it.
Also having this problem with create react app 4, version 5.1.1 of this lib.
Any updates with this? quite a breaking change, I've tried changing the map-events.ts file but that doesn't seem to fix the issue.
@alex3165, @mklopets things seem a little quiet in this repo. Would you have a moment to look at this issue and maybe point us in a direction? I'm happy to offer some of my time to dig into this but I'd love to hear from you that the change would be accepted.
@Georift a PR would be greatly appreciated indeed. Sorry about the silence, everybody.
@Georift a PR would be greatly appreciated indeed. Sorry about the silence, everybody.
No worries! Appreciate the fast reply. I'll take a look into it this weekend.
Current work around would be downgrading your local react-mapbox-gl to v4.8.6
This is also a workaround, but I set onStyleLoad to change the zoomLevel an imperceptible amount and the features look like they load normally.
const [zoomLevel, setZoomLevel] = useState(12);
return (
<Map
containerStyle={{
height: '100%',
width: '100%',
}}
center={points[activeIndex]}
zoom={[zoomLevel]}
onStyleLoad={() => setZoomLevel(12.001)}
movingMethod="flyTo"
>
As @Mahdi-Esbati mentioned, the error stems from map-events.ts and I believe this is the errant line:
https://github.com/alex3165/react-mapbox-gl/commit/669bd387a900686a855a8a501c1bdc2600c8d03c#diff-d2e7ea38f9a45638da94987edfdc9ac3a96fbeebe504301bc0d9b9825989a63fR139
The check should be:
listeners[eventKey] && typeof currentProps[eventKey] === 'function'
The way i've fixed it in my use case is like this: https://github.com/alex3165/react-mapbox-gl/issues/927#issuecomment-786056166
This is also a workaround, but I set onStyleLoad to change the zoomLevel an imperceptible amount and the features look like they load normally.
@wallstar Thanks for this tip!
Seems like it's the the setZoomLevel causing a re-render that gets the Features to render, the state you update doesn't even need to be linked to the Map itself. At least that's what I found in my use case.
@Georift a PR would be greatly appreciated indeed. Sorry about the silence, everybody.
No worries! Appreciate the fast reply. I'll take a look into it this weekend.
Current work around would be downgrading your local
react-mapbox-glto v4.8.6
The current workaround does not work with Next.
Still no PR ??? This issue is really frustrating...
@baedyl, it would be great if you could make a PR. Thanks for looking into it!
@cloudlena I would love to make a PR fixing this issue... Unfortunately, all the workarounds provided in this thread (and others) don't seem to resolve the issue on our end. So, right now I have no clue how to solve this problem. Mapbox seemed like a good alternative to google maps but we might consider switching back.