Community
Select to view content in your preferred language

Posting marker to Mapbox GL map

167
1
03-12-2025 03:39 AM
RichardSon
by
Emerging Contributor
‎03-12-2025 03:39 AM

I'm following tis tutorial about Mapbox GL and Flesk, which has been going great until the step to add markers to the map. I've tried distilling it to make it as simple as possible, but it's still not working.

I'm a JavaScript newbie and i want to add some feature related to map inside my modzbig website and at a loss for the best way to debug a JavaScript map.

Does anyone have ideas on the best way to debug JavaScript, or can anyone see any obvious errors going on here?

 

<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.css' rel='stylesheet' />
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <style>
            body { margin:0; padding:0; }
            #map { position:absolute; top:0; bottom:0; width:100%; }
       .marker {
          background-image: url('mapbox-icon.png');
          background-size: cover;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          cursor: pointer;
        }
        </style>
    </head>
    <body>
        <div id='map'></div>
        <script>
            mapboxgl.accessToken = '{{ ACCESS_KEY }}';
            var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v9',
                center: [-18.73, 65.0],
                zoom: 5
            });
            map.scrollZoom.disable();
             // create a HTML element for each feature
          var el = document.createElement('div');
          el.className = 'marker';

          // make a marker for each feature and add to the map
          new mapboxgl.Marker(el)
            .setLngLat([-18.73, 65.0])
            .addTo(map);

    </script>
    </body>
</html>

 

Tags (1)
0 Kudos
1 Reply
CodyPatterson
by MVP Regular Contributor
MVP Regular Contributor
‎03-12-2025 04:03 AM

Hey @RichardSon 

Looks pretty good so far! Javascript has a pretty good set of debugging functions that are like prints in Python, place a few around the code to see where exactly the error may be happening. Along with that, I assume that the access token may be the issue, as if it is incorrect, then you'll be out of luck no matter what until it's fixed. Here's a version of your code with some debugging:

<script>
    console.log("Access token (raw):", '{{ ACCESS_KEY }}');
    
    mapboxgl.accessToken = '{{ ACCESS_KEY }}';
    console.log("Mapbox access token is:", mapboxgl.accessToken);

    try {
        console.log("Map created");
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v9',
            center: [-18.73, 65.0],
            zoom: 5
        });

        map.scrollZoom.disable();
        console.log("Map created and scrollZoom disabled.");

        var el = document.createElement('div');
        el.className = 'marker';
        console.log("Marker element created.");

        // Add marker
        new mapboxgl.Marker(el)
            .setLngLat([-18.73, 65.0])
            .addTo(map);
        console.log("Marker added to map at [-18.73, 65.0].");

    } catch (e) {
        console.error("Error creating map or adding marker:", e);
    }
</script>

This should hopefully clear up some issues at at least! Could you also link the tutorial?

Cody

0 Kudos