New version (5.0.0) does not show Features when loading the component for the first time

kaligrafy commented 4 years ago

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.

JulienMelissas commented 4 years ago

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.

kaligrafy commented 4 years ago

Markers works fine though...

JulienMelissas commented 4 years ago

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.

grillorafael commented 4 years ago

Having the same issue. Changed back to 4.8.6 and it works again

spina-a-d commented 4 years ago

Same problem also fixed by moving to 4.8.6. Also pop-ups are broken and render below the map.

gl03 commented 4 years ago

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 react-mapbox-gl@4.8.6 finally displayed my Layers. A true show stopper this bug, wow.

JulienMelissas commented 4 years ago

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 react-mapbox-gl@4.8.6 finally displayed my Layers. 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.

Nostin commented 4 years ago

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 react-mapbox-gl@4.8.6 finally displayed my Layers. 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

Mahdi-Esbati commented 4 years ago

@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.

Mahdi-Esbati commented 4 years ago

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.

conordavidson commented 4 years ago

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.

dispatchr1 commented 3 years ago

Also having this problem with create react app 4, version 5.1.1 of this lib.

JClackett commented 3 years ago

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.

Georift commented 3 years ago

@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.

mklopets commented 3 years ago

@Georift a PR would be greatly appreciated indeed. Sorry about the silence, everybody.

Georift commented 3 years ago

@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

wallstar commented 3 years ago

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"
    >

SiddharthMantri commented 3 years ago

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

rustygloves commented 3 years ago

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.

Ahmdrza commented 2 years ago

is there any update on this issue?

baedyl commented 2 years ago

@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

The current workaround does not work with Next.

Still no PR ??? This issue is really frustrating...

cloudlena commented 2 years ago

@baedyl, it would be great if you could make a PR. Thanks for looking into it!

baedyl commented 2 years ago

@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.

baedyl commented 2 years ago

For anyone coming across this issue, you can try using this react wrapper instead. It's a much better alternative and the markers are displayed correctly.

Andrewdddobusiness commented 1 month ago

For anyone coming across this issue, you can try using this react wrapper instead. It's a much better alternative and the markers are displayed correctly.

You da goat for this - bless

alex3165 / react-mapbox-gl

New version (5.0.0) does not show Features when loading the component for the first time #904