CODEWITHSUNDEEP
reactjsmapbox
Paul.07
Paul.07

Reputation: 11

Mapbox Map doesn´t load after react build

my mapbox doesn´t work after I built my react-app. On localhost everything works fine, so I guess, it can´t be anything wrong with my access-token. Do you have any idea or had a similar issue before?

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

const ProjectTemplate = (props) => {

const [map, setMap] = useState(null);
const mapContainer = useRef(null);

useEffect(() => {
    mapboxgl.accessToken = '--accessToken--';
    const initializeMap = ({ setMap, mapContainer }) => {
        const map = new mapboxgl.Map({
            container: mapContainer.current,
            style: "mapbox://styles/paul0711/cke1dpmlf0sua19nxso3b1zm7",
            center: [props.lon, props.lat],
            zoom: 17
        });

        map.on("load", () => {
            setMap(map);
            map.resize();
            map.addControl( new mapboxgl.NavigationControl() );
            map.addControl(new mapboxgl.GeolocateControl({ trackUserLocation: true }));
            new mapboxgl.Marker({ color: "#575656", scale: 1.5})
                .setLngLat([props.lon, props.lat])
                .addTo(map);
        });
    };

    if (!map) initializeMap({ setMap, mapContainer });
}, [props.lat, props.lon, map]);

return( <div className='project__template__map' ref={el => (mapContainer.current = el)} /> )
}

Cheers guys!

Upvotes: 0

Views: 212

Answers (1)

Paul.07
Paul.07

Reputation: 11

Found the solution! It is a bug from mapbox. You have to use the version 1.13.0.

Upvotes: 1

Related Questions