I am doing react project for a travel map app. So I use react-map-gl and also got the Access Token and Mapbox and stored it in .env file. But I cannot figure out what is the issue that I can't get Map to display on my webpage. I tried almost all the options mentioned in Stackoverflow but nothing seems to work for me. Can somebody help me to solve the issue and give me some suggestions? I Will be much appreciated! Thanks in Advance!
import { useState } from "react";
import ReactMapGL, { Marker } from "react-map-gl";
function App() {
const [viewport, setViewport] = useState({
width: "100vw",
height: "100vh",
latitude: 46,
longitude: 17,
zoom: 4,
});
return (
<div className="App">
<ReactMapGL
{...viewport}
mapStyle="mapbox://styles/mapbox/ckszotu58a7dz17qh8ysv970j"
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
onViewportChange={(nextViewport) => setViewport(nextViewport)}
>
<Marker
latitude={48.858093}
longitude={2.294694}
offsetLeft={-20}
offsetTop={-10}
>
<div>You are here</div>
</Marker>
</ReactMapGL>
</div>
);
}