Mapbox Gl - My Basic, Default Marker Won´t Show Up On The Map

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 copypast

Solution 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

Solution 2:

If you look into the source of your page, you'll see that the marker is successfully added as an empty <div class="mapbox-gl-marker" ...></div>. Yes, nothing to see here, but that's the default way it is.

Show that marker some love and give it some style.

var el = document.createElement('div');                                       
el.style.backgroundImage = 'url(https://placekitten.com/g/50/)';              
el.style.width = '50px';                                                      
el.style.height = '50px';
el.style.borderRadius = '50%';                                                     
new mapboxgl.Marker(el).setLngLat([45.702117, 42.395926]).addTo(map);

See the original source of this c&p code in this example.

Solution 3:

After carefully reading docs I realize this issue occurs because we are not importing mapbox-js.css file. Please read the docs to know how to add it https://docs.mapbox.com/mapbox-gl-js/guides/install/#quickstart.