react-map-gl | React Component Library for Mapbox GL JS | Map library

I was following lama dev youtube channel's video for using mapbox in reactjs. But when I run the reactjs script, my map component is empty.

video: https://youtu.be/9oEQvI7K-rA

source code: https://github.com/safak/youtube/tree/mern-travel-app

my code

An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

I want help to identify this error in production.

The same code is running well in localhost

here is my code

I'm trying to zoom-in on a set of coordinates using react-map-gl. To do so, the library encourages us to use React's Refs. When instantiating the component in render, I'm passing down a ref that should hold the underlying MapBox map object. I managed to make the behavior work. Only problem: it's highly inconsistent.

I'm calling a method called setCamera in componentDidUpdate. But it only works on the initial load. If I reload the page, I've got an error from Gatsby. If I close the error it will work again. Up until the next reload.

The error is that this.mapRef.current is null. I tried to put a conditional to verify that the value isn't null before trying to access it, however this cause the animation to just never work. No matter how many times I reload, it will never be performed. Whereas without the conditional it could at least work half the time before crashing. So this already is a mystery in itself and if someone has an idea for why such behavior can happen, I'm all ears.

Still, I wasn't discouraged and tried to put the call to setCamera in a setTimeout and yes, it works! Even putting a very low timeout like 1 makes the code work 95% of the time. But I'm unsatisfied with it, because I understand that putting that kind of timers isn't what I'm supposed to do and to make things worse, it doesn't fix the issue consistently.

My understanding of the problem is that MapRef is still not set in componentDidUpdate for some reason. It's being set sometimes later. I don't know if React supports threading or if some kind of async witchcraft is deceiving me behind the scenes, but what I'm wondering is when am I guaranteed for my ref to be properly set? Where or how should I write this code?

Thank you in advance to anyone who can help me on that. 🙂

Here's my sample code:

I am struggling getting Image from react-map-gl to work with my Next.js application.

To narrow it down, I have tried to port over the example from the official documentation (https://urbica.github.io/react-map-gl/#/Components/Image):

Currently I'm using "react": "17.0.2" and I have installed "react-markdown": "^7.0.1" via npm i react-markdown I'm using this package to display my rich text that I'm fetching from my Strapi CMS. I have used the following code to display the content:

I am looking to be able to zoom to bounds when my component mounts.

I know this vanilla JS code can achieve the zoom to bounds, but not sure how to massage this into the React code below (I think a need a REF?):

I try to set up an react app with an integrated map of mapbox. When I start the app, it says that the access token isn't valid. But I used the public token on the website.

I've built a React app with a map component which renders a map. I tried to add a marker, but the marker keeps moving when I zoom. What is causing this to happen?

I'm trying to style a single GeoJSON source with different line colors based on a feature property using react-map-gl, and I can't find a way to get set the color of lines in a smart way.

Most of all, I would love to apply a function on the dataset to return the color of my own choosing based on a feature property value, but so far I haven't fount anything about it. If you know about it, please point in my direction:)

If I have the following GeoJSON: