MapBox: plusieurs markers personnalisés

Créer votre carte initiale

<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>

Ajouter vos markers dans un Json
Noté l’ajout d’une catégorie

<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');

 var geojson ={
              type: 'FontaineCollection',
              features: [{
                  
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.14091, 46.20634]
                },
                properties: {
                  title: 'Fontaine de Saint-Gervais',
                  description: 'Eglise de Saint-Gervais',
                  category:'potable'
                }
                
              },
               {
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.14921, 46.20035 ]
                },
                properties: {
                  title: 'Fontaine du Bourg-de-Four',
                  description: 'Place du Bourg-de-Four',
                    category:'potable'
                }
               },
               {
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.15237, 46.20413]
                },
                properties: {
                  title: 'Fontaine des 4 saisons',
                  description: 'Jardin anglais',
                 category:'non-potable'
                }
                
              }]
            }; 

   

</script>

Convertissez vos markers en un éléments html 

<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');

        var geojson ={
              type: 'FontaineCollection',
              features: [{
                  
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.14091, 46.20634]
                },
                properties: {
                  title: 'Fontaine de Saint-Gervais',
                  description: 'Eglise de Saint-Gervais',
                  category:'potable'
                }
                
              },
               {
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.14921, 46.20035 ]
                },
                properties: {
                  title: 'Fontaine du Bourg-de-Four',
                  description: 'Place du Bourg-de-Four',
                    category:'potable'
                }
               },
               {
                type: 'Fontaine',
                geometry: {
                  type: 'Point',
                  coordinates: [6.15237, 46.20413]
                },
                properties: {
                  title: 'Fontaine des 4 saisons',
                  description: 'Jardin anglais',
                 category:'non-potable'
                }
                
              }]
            }; 

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

          // create a HTML element for each feature
          var el = document.createElement('div');
          el.className = 'marker' + ' ' + marker.properties.category;

          // make a marker for each feature and add to the map
          new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .addTo(map);
        });

        
</script>

Grâce à cet élément el.className = ‘marker’ + ‘ ‘ + marker.properties.category; la catégorie est passée comme classe supplémentaire… et donc il est possible d’attribuer un style différent

Stylez l’élément html dans votre css

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

.marker.non-potable{
    background-color: red;
}

Référence: https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/