0

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;

The map should be appearing here, as you can see the mapbox logo pops up, but the mapp does not

Amila Senadheera
  • 12,229
  • 15
  • 27
  • 43
Linxs
  • 15
  • 5
  • It can be linked to the react-map-gland mapbox-gl version. What version do you use? – TheTisiboth Dec 20 '21 at 16:35
  • I am using version 2.6.1 for mapbox-gl and version 6.1.18 for react-map-gl – Linxs Dec 20 '21 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 Dec 20 '21 at 16:43
  • Yeah my token is valid, I checked with there thing https://api.mapbox.com/v4/mapbox.satellite/page.html?access_token=MYTOKEN and I do not get any console errors – Linxs Dec 20 '21 at 16:46
  • And you are sure it is not undefined when passing it to the ReactMapGL component? – TheTisiboth Dec 20 '21 at 16:47
  • Yes I am, I don't think it would be able to show the mapbox logo and have it be sized properly if it was, I was having that problem earlier but I didn't have mapbox-gl installed properly – Linxs Dec 20 '21 at 16:49
  • I don't think that you set the token correctly. Could you show how do you try to do it please? – TheTisiboth Dec 20 '21 at 17:25

1 Answers1

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.

TheTisiboth
  • 1,431
  • 1
  • 6
  • 13
  • THANK YOU SO MUCH! I think I did something stupid and I didn't have my .env inside my actual app directory. – Linxs Dec 21 '21 at 00:57