Map not showing up when using react-map-gl and create-react-app

Question

I am using create react app, along with react-map-gl. I just need the map to show up on the screen right now but all it does is show the mapbox logo and have a blank space where the map should be. Here is my main .js file:

    import './App.css';
    import ReactMapGL from 'react-map-gl';
    import React, {useState} from 'react';

    function App() {
      const [viewport, setViewport] = useState({
        width: 400,
        height: 400,
        latitude: 38.958630,
        longitude: -77.357002,
        zoom: 10
      });
      return (
        <div className="TextStuff">
          <ReactMapGL {...viewport}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}>MAPPPPP</ReactMapGL>
        </div>
      );
    }

    export default App;

It can be linked to the react-map-gland mapbox-gl version. What version do you use? — TheTisiboth
– TheTisiboth, Commented Dec 20, 2021 at 16:35
I am using version 2.6.1 for mapbox-gl and version 6.1.18 for react-map-gl — Linxs
– Linxs, Commented Dec 20, 2021 at 16:42
And is your token valid ? Did you defined it in some .env file ? Do you get any error in the console? — TheTisiboth
– TheTisiboth, Commented Dec 20, 2021 at 16:43
Yeah my token is valid, I checked with there thing api.mapbox.com/v4/mapbox.satellite/… and I do not get any console errors — Linxs
– Linxs, Commented Dec 20, 2021 at 16:46
And you are sure it is not undefined when passing it to the ReactMapGL component? — TheTisiboth
– TheTisiboth, Commented Dec 20, 2021 at 16:47

TheTisiboth · Accepted Answer · 2021-12-20 17:50:47Z

1

After investigating, I came to the conclusion that your token is not properly passed to your component, through the process.env. I created a reproducible example, with a working token, and it is working like a charm. I am getting the same result as you when providing an invalid token. So I guess that you are getting and undefined token, or something like this.

Following this tutorial, you should have an .env file, where you store your token like this: REACT_APP_MAPBOX_TOKEN=MYTOKEN

Try to log out your process.env.REACT_APP_MAPBOX_TOKEN, to see what you are getting.

But what I suspect, is that you put the .env file in your src folder. But you shouldn't put it there. Instead, put it at the root of your project, and then restart your server. This way, you should get your token correctly.

edited Dec 20, 2021 at 17:50

answered Dec 20, 2021 at 17:20

TheTisiboth

1,7011 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Linxs Over a year ago

THANK YOU SO MUCH! I think I did something stupid and I didn't have my .env inside my actual app directory.

Collectives™ on Stack Overflow

Map not showing up when using react-map-gl and create-react-app

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related