Estoy usando mapbox para crear un estilo y generar una clave para un clon de air bnb. Arriba a la derecha, haga clic en compartir (si sigue el enlace) es donde puede obtener los datos, como el token de acceso y el estilo. Pero la maldita cosa no se renderiza. Me tiene desconcertado.
repositorio completo : los principales archivos de interés son pages>search.js , components>Map.js y next.config.js
La sección particular de código que "debería" ejecutar el código es la siguiente.
//Search.js page <section className="hidden xl:inline-flex xl:min-w-[700px]"> <Map searchResults={searchResults}/> </section> //Map.js const [viewport, setViewport] = useState({ width: '100%', height: '100%', latitude: center.latitude, longitude: center.longitude, zoom: 8 }); return <ReactMapGL mapStyle="mapbox://styles/aman-janwani/cks0lbl27149917pd1q6fvduq" mapboxApiAccessToken={process.env.mapbox_key} {...viewport} onViewportChange={(nextViewport) => setViewport(nextViewport)} > {searchResults.map(result => ( <div key={result.long}> <Marker longitude={result.long} latitude={result.lat} offsetLeft={-20} offsetTop={-10} > <p role="img" onClick={() => setSelectedLocation(result)} className='cursor-pointer text-2xl animate-bounce' aria-label="push-pin" > 📌 </p> </Marker> </div> //next.config.js module.exports = { images: { domains: ['links.papareact.com'], }, env: { mapbox_key: "pk.eyJ1IjoiYW1hbi1qYW53YW5pIiwiYSI6ImNrczBpM2gxbTFrcm8ydXFqamtybzJtYW8ifQ.EcMfJu_XkFN2RMfGUvX8zw" } };