Mapbox GL - my basic, default marker won´t show up on the map

Question

lately, I started fiddling with MapBox and right now, I am trying to add the marker to the map. Not as easy as it seems. I am trying to add basic, default marker with code copypasted straight out of "Mapbox GL" reference guide. Still, it won´t show up.

This is the code I use, it cant get simpler that this...

var marker = new mapboxgl.Marker().setLngLat([45.702117, 42.395926]).addTo(map);

Does anybody have an idea why it doesnt work? Whole "not working scenario" can be seen at http://www.caucasus-trekking.com/Maps/map

Edit: Specifically, I would like to use that classic marker, round at the top and pointy at the bottom. Somjething like this - https://www.mapbox.com/help/img/android/marker-example.png

Wasnt there some default shape in Mapbox or should I create it by my own css file?

Thanks a lot

Answer 1

Somewhat strangely, it appears that the answer is that the Marker is being drawn, but there is no styling included in mapbox-gl.css to actually make it visible. It's just an invisible div.

So you need to add some CSS:

.mapboxgl-marker {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border:1px solid gray;
    background-color:lightblue;
}

See codepen: https://codepen.io/stevebennett/pen/VpPbbM