title: How to set multiple markers on same coordinates with mapbox?
body: <p>I use mapbox GL to referenced video games company based in Africa. All these company are placed on a map : <a href="https://africangamingnetworks.com/" rel="noreferrer">https://africangamingnetworks.com/</a></p>
  
  <p>When I have multiple markers with same coordinate for example two companies in Yaounde in Cameroon, mapbox shows just the first one, because they have the same latitude and longitude.</p>
  
  <p>How could I do to show all markers with same coordinates ?</p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>&lt;%@ include file="/init.jsp"%&gt;
  &lt;div class="shadow row"&gt;
      &lt;div class=" col-12 rounded-sm " id='map'
          style='height: 800px;'&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;script&gt;
      mapboxgl.accessToken = 'pk.eyJ1Ijoia29zdGVkIiMWQzbXA3M2ZxYmd5MnkifQ.faOl-gGzibR9yMpZ-i7FTQ';
      var map = new mapboxgl.Map({
          container : 'map',
          style : 'mapbox://styles/mapbox/streets-v11',
          zoom : 2
      // starting zoom
      });
  
      // Add zoom and rotation controls to the map.
      map.addControl(new mapboxgl.NavigationControl());
  
      var studioListComplete = [];
  
      &lt;c:forEach var="studio" items="${studioList}"&gt;
  
      studioListComplete
              .push({
                  "type" : "Feature",
                  "properties" : {
                      "description" : "&lt;strong&gt;${studio.studioName} (${studio.country})&lt;/strong&gt; &lt;br/&gt;&lt;br/&gt;" + 
                                      "${studio.studioDescription}&lt;br/&gt;&lt;br/&gt;"+
                                      "&lt;strong&gt;City : &lt;/strong&gt;${studio.city}&lt;br/&gt;"+
                                      "&lt;strong&gt;Number of employees : &lt;/strong&gt;${studio.numberOfEmployees}&lt;br/&gt;"+
                                      "&lt;strong&gt;Phone : &lt;/strong&gt;${studio.phoneNumber}&lt;br/&gt;&lt;br/&gt;"+
  
                                      "&lt;a href=\"${studio.webSiteUrl}\" target=\"_blank\"&gt;Please visit our website&lt;/a&gt;",
                      "icon": "rocket"
                  },
                  "geometry" : {
                      "type" : "Point",
                      "coordinates" : [ "${studio.longitude}",
                              "${studio.latitude}" ]
                  }
              });
      //var marker = new mapboxgl.Marker()
      //.setLngLat(["${studio.longitude}", "${studio.latitude}"])
      //.addTo(map);
      &lt;/c:forEach&gt;
  
      console.log(studioListComplete);
  
      map.on('load', function() {
          // Add a layer showing the places.
          map.addLayer({
              "id" : "places",
              "type" : "symbol",
              "source" : {
                  "type" : "geojson",
                  "data" : {
                      "type" : "FeatureCollection",
                      "features" : studioListComplete
                  }
              },
              "layout" : {
                  "icon-image" : "{icon}-15",
                  'icon-size': 1,
                  "icon-allow-overlap" : true
              }
          });
  
          // When a click event occurs on a feature in the places layer, open a popup at the
          // location of the feature, with description HTML from its properties.
          map.on('click', 'places', function(e) {
              var coordinates = e.features[0].geometry.coordinates.slice();
              var description = e.features[0].properties.description;
  
              // Ensure that if the map is zoomed out such that multiple
              // copies of the feature are visible, the popup appears
              // over the copy being pointed to.
              while (Math.abs(e.lngLat.lng - coordinates[0]) &gt; 180) {
                  coordinates[0] += e.lngLat.lng &gt; coordinates[0] ? 360 : -360;
              }
  
              new mapboxgl.Popup().setLngLat(coordinates).setHTML(description)
                      .addTo(map);
          });
  
          // Change the cursor to a pointer when the mouse is over the places layer.
          map.on('mouseenter', 'places', function() {
              map.getCanvas().style.cursor = 'pointer';
          });
  
          // Change it back to a pointer when it leaves.
          map.on('mouseleave', 'places', function() {
              map.getCanvas().style.cursor = '';
          });
      });
  &lt;/script&gt;
  
  &lt;style&gt;
      //Style is here
  
  &lt;/style&gt;
  </code></pre>