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>
