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>
F12(Firefox) orCtrl+Shift+I(Chrome) and head to the console or the debugger. It's common to typeconsole.log(your_variable)to have the current state ofyour_variableshow up in the console. Or you can set breakpoints in the debugger and go through your code step by step.