1

I'm trying to get a map to display using this documentation:

https://github.com/visgl/react-map-gl/blob/7.0-release/examples/get-started/basic/app.js https://visgl.github.io/react-map-gl/docs/get-started/get-started

import * as React from 'react';
import Map, {Marker} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

function App() {
  const MAPBOX_TOKEN = process.env.NEXT_PUBLIC_MY_MAPBOX_API_TOKEN;
  return (
    <Map
      initialViewState={{
        latitude: 41.5801,
        longitude: -71.4774,
        zoom: 14
      }}
      style={{width: 800, height: 600}}
      mapStyle="mapbox://styles/mapbox/streets-v9"
      mapboxAccessToken={MAPBOX_TOKEN}
      >
    </Map>
  );
}

export default App;

I also have a .env.local file with

NEXT_PUBLIC_MY_MAPBOX_API_TOKEN="api_key here"

The map does not display in the browser. In the browser console, I get an error https://api.mapbox.com/styles/v1/mapbox/streets-v9?access_token=no-token. So I think for some odd reason, react is not sending over the mapboxAccessToken through the Map component. No idea why.

I'm also going to paste the full console here in case I missed anything: browser console

I have also tried to paste the api key directly into mapboxAccessToken. Also tried using REACT_APP_MAPBOX_ACCESS_TOKEN instead. No luck. This is getting ridiculous and I am starting to think they decommissioned react-map-gl.

sriracha76
  • 21
  • 2

1 Answers1

0

Had the same issue, mine stopped sending after I updated the react-map-gl dependency. Got it working again by downgrading using the following:

npm i react-map-gl@7.0.19

Hope this helps.

Luke Gilbert
  • 1