I have tried using the react-map-gl library but that didn't work. I have done what is shown here in the docs: https://docs.mapbox.com/mapbox-gl-js/guides/ but it doesn't work for me. Here is my code:
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
mapboxgl.accessToken =
"here i put my api key";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v12",
center: [-74.5, 40],
zoom: 9,
});
export default function Home() {
return <div id="map" />;
}
and when I run it I get this error:
TypeError: Cannot read properties of undefined (reading 'mark')
complaining about this line:
const map = new mapboxgl.Map({...
I have tried to modify the webpack to handle loading worker files which I don't think should be neccessary anyway but that didn't work either.
If you have any idea, help would be much appreciated :)
My code before the map was working:
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
mapboxgl.accessToken =
"ACCESS_TOKEN";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v12",
center: [-74.5, 40],
zoom: 9,
});
export default function Home() {
return <div id="map" />;
}
My code after the map worked:
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { useEffect, useRef } from "react";
import styles from "../styles/index.module.scss";
export default function Home() {
const mapContainer = useRef<any>(null);
const map = useRef<mapboxgl.Map | any>(null);
useEffect(() => {
mapboxgl.accessToken =
"ACCESS_TOKEN";
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: "mapbox://styles/mapbox/streets-v12",
center: [-1.46389, 53.296543],
zoom: 13,
});
}, []);
return (
<div id="map">
<div className={styles.style1} ref={mapContainer} />
</div>
);
}