0

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

I'm a JavaScript newbie and at a loss to the best way to debug a JavaScript map.

Does anyone have ideas on best way to debug JavaScript, or can anone 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>
  • Debugging Javascript is usually done in your browser in the Developer Tools. Press F12 (Firefox) or Ctrl+Shift+I (Chrome) and head to the console or the debugger. It's common to type console.log(your_variable) to have the current state of your_variable show up in the console. Or you can set breakpoints in the debugger and go through your code step by step. – Stefan Jan 18 at 10:27
0

Update: I didn't have the marker visualization hosted locally, changing the CSS to background-image: url('http://maps.google.com/mapfiles/ms/icons/red-dot.png');

Made the code work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.