title: Combining tooltips for multiple Leaflet markers of the same location when using GeoJSON FeatureCollections?
body: <p>We've got a Leaflet map containing markers and some of them have the same location, and we want to combine tooltips for markers of the same location. <a href="https://stackoverflow.com/questions/71362181/combining-tooltips-for-multiple-leaflet-markers-of-the-same-location">I asked about this, providing a simplified reproducible eg</a>, and a comment linked to <a href="https://stackoverflow.com/a/71038744">an answer on a different thread</a> which elegantly solved the issue with JS. Our problem now is that we barely know JS and don't know how to adapt this to our oversimplified eg.</p>
  <p>Our previous reproducible eg. built markers individually (eg. <code>L.marker([51.5, -0.4]).bindPopup(&quot;single popup&quot;).addTo(myMap);</code>), but we did this for question simplicity and our real code uses <a href="https://leafletjs.com/SlavaUkraini/examples/geojson/" rel="nofollow noreferrer">GeoJSON FeatureCollection</a>. Adapting our previous eg to use this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;style&gt;
          html,
          body {
              margin: 0px;
              height: 100%;
          }
  
          body {
              display: flex;
          }
      &lt;/style&gt;
  &lt;body&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.css&quot;
          integrity=&quot;sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==&quot;
          crossorigin=&quot;&quot; /&gt;
      &lt;script src=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.js&quot;
          integrity=&quot;sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==&quot;
          crossorigin=&quot;&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://unpkg.com/lodash@4.17.21/lodash.js&quot;&gt;&lt;/script&gt;
  
      &lt;div id=&quot;mapid&quot; style=&quot;flex: 1&quot;&gt;&lt;/div&gt;
      &lt;script&gt;var myMap = L.map(&quot;mapid&quot;);
          L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { attribution: '&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors', }).addTo(myMap);
          myMap.setView([51.5, -0.09], 10);
  
          var geojsonFeatureCollection =
          {
              &quot;type&quot;: &quot;FeatureCollection&quot;,
              &quot;features&quot;: [{
                  &quot;type&quot;: &quot;Feature&quot;,
                  &quot;geometry&quot;: {
                      &quot;type&quot;: &quot;Point&quot;,
                      &quot;coordinates&quot;: [-0.09,51.5]
                  },
                  &quot;properties&quot;: {
                      &quot;prop0&quot;: &quot;text to show in combined pop up&quot;,
                      &quot;ignore&quot;: &quot;ignore this text&quot;
                  }
              },
              {
                  &quot;type&quot;: &quot;Feature&quot;,
                  &quot;geometry&quot;: {
                      &quot;type&quot;: &quot;Point&quot;,
                      &quot;coordinates&quot;: [-0.09,51.5]
                  },
                  &quot;properties&quot;: {
                      &quot;prop0&quot;: &quot;more text to show in combined pop up&quot;,
                      &quot;ignore&quot;: &quot;ignore this text&quot;
                  }
              },
              {
                  &quot;type&quot;: &quot;Feature&quot;,
                  &quot;geometry&quot;: {
                      &quot;type&quot;: &quot;Point&quot;,
                      &quot;coordinates&quot;: [-0.4,51.5]
                  },
                  &quot;properties&quot;: {
                      &quot;prop0&quot;: &quot;single popup&quot;,
                      &quot;ignore&quot;: &quot;ignore this text&quot;
                  }
              }]
          }
  
          L.geoJSON(geojsonFeatureCollection, {
      pointToLayer: function (feature, coordinates) {
          return L.marker(coordinates);
      }
  })
  .bindPopup((layer) =&gt; layer.feature.properties.prop0)
  .addTo(myMap);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The answer that comment <a href="https://plnkr.co/edit/D7TzdaBVRvJr2sid?preview" rel="nofollow noreferrer">linked to a demo</a> which used JSON data for the points which is close to but not quite the same as FeatureCollection. It used Lodash to group items up by &quot;name&quot;, which seems a property of each JSON item: <code>var groupedData = _.groupBy(data, &quot;name&quot;);</code>, but we don't know how to do the same with the &quot;features.geometry.coordinates&quot; property of our data.</p>
  <p>How can we group GeoJSON FeatureCollection data up like this to combine markers of the same location and then customize tooltips (eg. use the text from &quot;prop0&quot; and other fields)?</p>