0
214
VistasEl mapa no aparece cuando se usa react-map-gl y create-react-app
Estoy usando la aplicación create react, junto con react-map-gl . Solo necesito que el mapa aparezca en la pantalla en este momento, pero todo lo que hace es mostrar el logotipo de mapbox y tener un espacio en blanco donde debería estar el mapa. Aquí está mi archivo principal .js:
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; 
1 Respuestas
Responde la pregunta0
Después de investigar, llegué a la conclusión de que su token no se pasa correctamente a su componente, a través de process.env . Creé un ejemplo reproducible , con un token de trabajo, y funciona de maravilla. Obtengo el mismo resultado que usted al proporcionar un token no válido. Así que supongo que estás obteniendo un token indefinido, o algo así.
Siguiendo este tutorial , debe tener un archivo .env , donde almacena su token de esta manera: REACT_APP_MAPBOX_TOKEN=MYTOKEN
Intente cerrar la sesión de su process.env.REACT_APP_MAPBOX_TOKEN , para ver lo que está obteniendo.
Pero lo que sospecho es que .env el archivo .env en tu carpeta src. Pero no deberías ponerlo ahí. En su lugar, colóquelo en la raíz de su proyecto y luego reinicie su servidor. De esta manera, debería obtener su token correctamente.