MapBox: un marker personnalisé

<div id='map' style='width: 100%; height: 100vh'></div>
<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');
        
</script>

<div id='map' style='width: 100%; height: 100vh'></div>
<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');


// Markers Json
var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [6.14091, 46.20634]
    },
    properties: {
      title: 'Fontaine',
      description: 'Saint-Gervais'
    }
  }]
};


</script>

<div id='map' style='width: 100%; height: 100vh'></div>
<script>
        mapboxgl.accessToken = 'votrecodepersonnelquevousdevezrestreindre';
        
        var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/...',
        zoom: 13,
        center: [6.1430, 46.2048]
        });
        
        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl(),'bottom-right');

// Markers Json
var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [6.14091, 46.20634]
    },
    properties: {
      title: 'Fontaine',
      description: 'Saint-Gervais'
    }
  }]
};

// add markers to map
geojson.features.forEach(function(marker) {

  // 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(marker.geometry.coordinates)
    .addTo(map);
});

        
</script>

.marker {
  background-image: url('images/VZA.svg');
  background-size: cover;
  background-color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}