Estoy haciendo un proyecto de reacción para una aplicación de mapas de viaje. Así que uso react-map-gl y también obtuve el token de acceso y Mapbox y lo almacené en un archivo .env. Pero no puedo entender cuál es el problema que no puedo hacer que Map se muestre en mi página web. Probé casi todas las opciones mencionadas en Stackoverflow pero nada parece funcionar para mí. ¿Alguien puede ayudarme a resolver el problema y darme algunas sugerencias? ¡Seré muy apreciado! ¡Gracias de antemano!
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> ); }