I am working on React-Leaflet and I am using markerclusture to group the markers on the map. The requirement is, when I click on the clustured bubbles I should me able to see the list of markers inside the clusture in the popup when clicked on it. I have been able to achive upto that part using the code below. But now what I want is to click on the marker name inside the popup and be able to zoom to that marker. I am new to the web dev so I might be overcomplexing a simple problem but I need to get a fix for it. Thanks in advance!!
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
const _map = useMap();
<MarkerClusterGroup
zoomToBoundsOnClick={false}
spiderfyDistanceMultiplier={1}
showCoverageOnHover={false}
onClick={(e) => {
var asset_list = e.layer.getAllChildMarkers();
var names = "";
for (
var i = 0;
i < asset_list.length;
i++ //for populating popup with the asset names under the clusture bubble
) {
for (var j = 0; j < locations.length; j++) {
if (locations[j].latitude == asset_list[i]._latlng.lat)
names += `<span>${locations[j].id} </span>`;
}
}
e.propagatedFrom.bindPopup(`${names}`).openPopup(); //want to attach a click event handler to the names list
}}
>
{locations.map((loc) => (
<div>
<CircleMarker
key={loc.id}
center={[loc.latitude, loc.longitude]}
fillColor={marker_color}
color="#fff"
fillOpacity={2}
radius={13}
zoom={[loc.latitude, loc.longitude]}
weight={3}
className="circle-marker"
></CircleMarker>
</div>
))}
</MarkerClusterGroup>