Mapbox GL - mon marqueur de base par défaut n'apparaîtra pas sur la carte

Question

récemment, j'ai commencé à jouer avec MapBox et maintenant, j'essaie d'ajouter le marqueur à la carte. Pas aussi facile qu'il n'y paraît. J'essaie de ajouter basique, le marqueur par défaut avec le code copypasted tout droit de "Mapbox GL" reference guide. Pourtant, ça ne se montrera pas.

Ceci est le code que je l'utilise, il ne peut pas obtenir plus simple que cela ...

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

Est-ce que quelqu'un a une idée pourquoi il ne fonctionne pas? On peut voir tout le «scénario non fonctionnel» à http://www.caucasus-trekking.com/Maps/map

Éditer: Spécifiquement, je voudrais utiliser ce marqueur classique, rond en haut et pointu en bas. Quelque chose comme ça - https://www.mapbox.com/help/img/android/marker-example.png

N'y avait-il pas une forme par défaut dans Mapbox ou devrais-je le créer avec mon propre fichier css?

Merci beaucoup

Answer 1

Un peu étrange, il semble que la réponse est que le marqueur est en cours d'élaboration, mais il n'y a pas de style inclus dans MapBox-gl.css pour rendre réellement visible. C'est juste un div invisible.

Vous avez donc besoin d'ajouter un peu de CSS:

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

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

Answer 2

Si vous regardez dans la source de votre page, vous verrez que le marqueur est ajouté avec succès en tant que vide <div class="mapbox-gl-marker" ...></div>. Oui, rien à voir ici, mais c'est la manière par défaut.

Montrez ce marqueur un peu d'amour et donnez-lui du 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); 

Voir la source originale de ce c & code p dans this example.