I am using LeafletJS to draw rental houses on a map (using openstreetmap too) and i'm using Leaflet.markercluster to group these markers on a marker cluster, until the user zooms in the map.
On the grouped icons i show the number of the rental houses that are grouped in that cluster, and i want to draw a circle when you put the mouse on that grouped icon. The circle size depends on the number of markers grouped, and i need the center of that circle in the same location of my marker cluster.
My problem is that i can't get the location of the cluster marker, i tried to catch the onMouseOver event and the location that i get it's the location of the first marker of the group.
In my ideal case, i need the cluster marker icon in the middle of all grouped markers and the radius of that circle will cover all of the grouped markers position but my problem now is, how to get the grouped marker position.
This is my markercluster code.
var markers = new L.MarkerClusterGroup();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = L.marker(new L.LatLng(a[0], a[1]), {
title: title
});
var htmlPopUp = '<div><span class="marker-count">'+title+'</span></div>';
marker.bindPopup(htmlPopUp);
markers.addLayer(marker);
}
map.addLayer(markers);
//Create circleMarker for on Hover
var circleMarker = L.circle([-9999,-9999], "-1").addTo(map);
markers.on('clustermouseover', function (a) {
var circleRadius = a.layer.getAllChildMarkers().length *10000 / Math.pow(map.getZoom(), 3);
circleMarker.setLatLng([a.layer._cLatLng.lat,a.layer._cLatLng.lng]);
circleMarker.setRadius(circleRadius);
});
addressPoints contains latitude and longitude points for the markers
This should be simple, try:
markers.on('clustermouseover', function (e) {
console.log(e.latlng);
}