ui-leaflet
ui-leaflet copied to clipboard
Impossible to detect cluster marker click event
I tried solution from here: https://github.com/angular-ui/ui-leaflet/issues/31 and here: https://github.com/angular-ui/ui-leaflet/issues/146 But or I don't know how to use it or those solutions doesn't work anymore. Can somebody explain me please how to detect cluster click event?
What I am trying to do is to avoid zoom on cluster click and show popup instead. I made a little progress but still doesn't have all functioning:
leafletData.getMap().then(function (map) {
var layers = map._layers;
angular.forEach(layers, function (layer, key) {
if ('_gridClusters' in layer) {
layer.on('clusterclick', function (e) {
var map = e.target._map;
children = e.layer.getAllChildMarkers();
latlng = e.latlng;
e.target.getVisibleParent(e.layer.getAllChildMarkers()[0]).bindPopup("content").openPopup();
});
}
});
});
This have two issues:
- When I click on cluster marker it doesn't work first time.
- When I click on cluster marker it shows popup but still make a zoom and popup close immediately
Also I am not sure if I implement it like this that this is a good (angular) way.
Also the docs on leaflet.cluster state:
var markers = L.markerClusterGroup({
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: false
});
How to set this properties on this directive? Also forgot to mention how I make markers:
var markers = [];
loop... {
var nm = {
group: 'london',
lat: parseFloat(obj.Latitude),
lng: parseFloat(obj.Longitude)
};
markers.push(nm);
}
And if do something like this it works but it is not part of scope.
http://plnkr.co/edit/pq0203gY6XEB77sAnC1s?p=preview
For example$scope.markers is undefined but I have markers on map and I can't filter them because this implementation is out of angular.
Solution for set Cluster properties (for another users - i know that this issue has 2 years...)
set cluster properties in markers groupOption
vm.markers = users.map((user) => {
vm.bounds.push([user.realLatitude, user.realLongitude]);
return {
lat: user.realLatitude,
lng: user.realLongitude,
group: `group_${_timeStamp}`, //must set groupName
groupOption: { //you can set cluster properties in `groupOption`
showCoverageOnHover: false,
spiderfyOnMaxZoom: false,
}
};
});