viewport-mercator-project: assertion failed. about react-map-gl-geocoder

[Lnleite]

That is because your latitude and longitude are incorrect. So it is not a real place you have set.

[jlubeck]

Good news is that your demo code works fine on my environment... so I guess I'll start replacing stuff line by line until I find the culprit...

I'll let you know what I find, and thanks again for your help

[SamSamskies]

@jlubeck could you provide more info so that I can try to replicate this issue? Some things that may help is your search query that is causing it to crash, what browser you are using, etc. If you could provide an example using an online code editor like Code Sandbox http://codesandbox.io, that would be even more helpful.

[jlubeck]

Ok, this is weird...

Here is my code: https://codesandbox.io/s/7v21m7yxq

That exact code works on codesandbox but not on my site...

Any ideas how can I get to the bottom of this?

I'm running on Google Chrome. Search Query is "Teatro Colon"

[jlubeck]

Ok... progress... I figured out why it was crashing. When clicking on one of the results, the onClick event from the Map was being called as well but without coordinates. Why without coordinates? Because the map is disappearing after selecting a result.

The DOM for the Map is still there, but the style has a width and height of 0px. So strange.... Specially that it doesn't happen on the codesandbox

[SamSamskies]

Not sure. You could make your click handler more robust by checking if the coordinates exist before doing anything.

Having a width and height of 0px for the map will probably cause things to explode when using my Geocoder component. I'll look into adding code to prevent that from happening.

[jlubeck]

The thing is that it only happens when selecting an option from your Geocoder... not when clicking elsewhere on the map...

I'm trying to get to the bottom of this, but now Chrome is not stopping on my breakpoints... grrrrr

[SamSamskies]

I can look into stopping the result click from bubbling up to the map, but I'm not sure when I'll get around to it.

For now, I don't see a downside to checking if the coordinates exist in your click handler. I'm guessing that will fix your problem.

[jlubeck]

The downside is that my map is turning blank :D
I already tried removing the click handler altogether, and the map is turning blank after selecting a result from the Geocoder

[jlubeck]

BTW, thank you for responding so quickly!

[SamSamskies]

When I go to your Code Sandbox example, the map is blank before I even enter a search query. There may be a bug with your state management. It's even blank if I remove the Geocoder component. The state of your Map component is intermittently undefined when I console log it in the render function.

[jlubeck]

That's weird. I don't see it blank and I see the logs on the render function just fine:

[SamSamskies]

Disregard my comment about the state being undefined intermittently in your Code Sandbox example. It was actually a console.log that was in the componentDidUpdate function that was printing undefined. I got the map to show up by removing your mapStyle. Maybe I don't have permissions to access the mapStyle that you're using.

[jlubeck]

Well... you can mark this one as glitch... no other words for it... I started with your example code. Replacing line by line. I finished... Everything is working fine... Don't know wether to be happy or outraged haha

Sorry for wasting your time. Looks like a great library! I'll make sure to double check more thoroughly next time.

Thanks!

[SamSamskies]

No problem. Let me know if any issues pop up.