javascriptnode.jsmapboxmapbox-gl-jsmapbox-gl

MapBox: Uncaught ReferenceError: mapboxgl is not defined

Im using MapBox in one of my web aplicatins, nad my goal is to render a basic map on the page.

I have the following script:

<script>
mapboxgl.accessToken = mapToken;
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9 // starting zoom
    });
</script>

and to display the map, I use:

<div id='map' style='width: 400px; height: 300px;'></div>

The problem is, when I try to load the page, nothing happens and I get the following error: Uncaught ReferenceError: mapboxgl is not defined

Solution

  • I fixed the problem just by including this:

    <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css' rel='stylesheet' />

    in the head of the HTML file.