How do you render this? #1
Description
I followed the instructions, so my my-map.jsx code looks like this:
import React, { useEffect } from 'react'
import './my-map.css'
import mapboxgl from 'mapbox-gl'
function MyMap() {
let mapContainer
useEffect(() => {
const myAPIKey = process.env.REACT_APP_GEOAPIFY_KEY
const mapStyle = 'https://maps.geoapify.com/v1/styles/osm-carto/style.json'
const initialState = {
lng: 11,
lat: 49,
zoom: 4,
}
const map = new mapboxgl.Map({ // What are we supposed to do with this?
container: mapContainer,
style: `${mapStyle}?apiKey=${myAPIKey}`,
center: [initialState.lng, initialState.lat],
zoom: initialState.zoom,
})
}, [mapContainer])
return <div className="map-container" ref={(el) => (mapContainer = el)}></div>
}
export default MyMapWhen I run this, I see a map for a nanosecond, then the page is blank. It probably has something to do with the map variable, i.e., the new mapboxgl.Map object, not being used in any way. Please explain how to render this.
Additional note: After I created this issue, I found the tutorial in the docs here and although the app is built slightly differently, it still has the same exact problems. There is an object created in the useEffect function that is never called, and it won't render. Also, the network calls to get the style result in a 401 unauthorized response, even with a valid API key. Another thing wrong is there is a ref parameter in the render <div> but there was never a createRef or useRef object created, so that ref is not doing anything as far as I can tell. I tried creating a useRef with the provided function, but that did not work.