We've got a Leaflet map containing markers and some of them have the same location:
<!DOCTYPE html>
<style>
html, body { margin: 0px; height: 100%;}
body { display: flex; }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<div id="mapid" style="flex: 1"></div>
<script>var myMap = L.map("mapid");
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',}).addTo(myMap);
myMap.setView([51.5, -0.09], 10);
L.marker([51.5, -0.09]).bindPopup("text for combined pop up").addTo(myMap);
L.marker([51.5, -0.09]).bindPopup("more text for combined pop up").addTo(myMap);
L.marker([51.5, -0.4]).bindPopup("single popup").addTo(myMap);
</script>
</html>
We'd like markers of the same location to be combined into a single marker with the tooltip being the combined tooltip of both (eg. "text for combined pop up<br>more text for combined pop up").
The only way we've found to address multiple popups of the same location is with Leaflet Markercluster, but this only clusters markers shown closely to each other. We don't want clusters of multiple markers but rather one marker with a tooltip containing the content of multiple markers' tooltips only if their locations exactly match.
We can't find any solutions for this anywhere and we're wondering if we're overlooking something or if Markercluster can be configured to somehow do this. Do we have any options? Would this be better addressed by more advanced JS in the creation of the markers itself?