MapBox: plusieurs markers personnalisés avec Infobox On Click

<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)
            .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
            .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
            .addTo(map);
        });

        
</script>

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}