I am following this guide: Adding TomTom Maps to a Modern React App.
Following is my code:
const mapElement = useRef();
const [mapLongitude, setMapLongitude] = useState(123.12);
const [mapLatitude, setMapLatitude] = useState(32.231);
const [mapZoom, setMapZoom] = useState(13);
const [map, setMap] = useState({});
useEffect(() => {
const analytics = getAnalytics(firebase);
onAuthStateChanged(auth, async (user) => {
tt = (await import('@tomtom-international/web-sdk-maps')).default
if (user) {
uid = user.uid
}
db = getFirestore(firebase);
({eventid} = router.query);
if(!eventid) {
return;
}
const docSnap = await getDoc(docRef);
if (!docSnap.exists()) {
router.push('/404');
} else {
<REDACTED>
setMapLongitude(locationCoords._long);
setMapLatitude(locationCoords._lat);
<REDACTED>
let map = tt.map({
key: process.env.NEXT_PUBLIC_TOMTOM_API_KEY,
container: mapElement.current,
center: [mapLongitude, mapLatitude],
zoom: mapZoom
});
setMap(map);
// updateMap();
return () => map.remove();
}
});
}, [router]);
This is what I see when I go into inspect element:
The map is not visible on the screen at all. I have also imported the CSS file.