Capturing cluster click events with markercluster and angular-leaflet-directive
I am playing with angular-leaflet-directive , and get the names of the markers with a right click. I just listen to the event leafletDirectiveMarker.click
and then access the args.markerName
.
The angular-leaflet directive also works with markercluster , so I can cluster markers that have the same coordinates or those that are near. However, I would like to do the following, but it is not clear from the documentation on how to do this:
-
Double click on the cluster to enlarge . Currently, one click on the cluster will enlarge the markers. see example .
-
How to listen for click event on cluster and get all marker names in cluster . The documentation for a cluster cluster has a cluster event:
markers.on('clusterclick', function (a) { console.log('cluster ' + a.layer.getAllChildMarkers().length); });
But I'm not sure which event I should be listening to using the angular-leaflet directive.
source to share
Regarding your first question, you will have to hook up a doubleclick and pass the fire ('click') command to it after overriding the normal click event. Probably more problems than its really worth, especially on mobile devices - and not something that I can easily solve.
As for your second question, I just solved it.
$scope.openMarker
is an event reference ng-click
in my jade template that is tied to ng-repeat
that pulls images and their id from the database.
$scope.openMarker = function(id) {
var _this = [];
_this.id = id;
leafletData.getMarkers()
.then(function(markers) {
$scope.london = {
lat: $scope.markers[_this.id].lat,
lng: $scope.markers[_this.id].lng,
zoom: 19
};
var _markers = [];
_markers.currentMarker = markers[_this.id];
_markers.currentParent = _markers.currentMarker.__parent._group;
_markers.visibleParent = _markers.currentParent.getVisibleParent(markers[id]);
_markers.markers = markers;
return _markers;
}).then(function(_markers){
if (_markers.visibleParent !== null) {
_markers.visibleParent.fire('clusterclick');
} else {
_markers.currentMarker.fire('click');
}
return _markers;
}).then(function(_markers){
_markers.currentParent.zoomToShowLayer(_markers.markers[ _this.id ], function() {
$scope.hamburg = {
lat: $scope.markers[_this.id].lat,
lng: $scope.markers[_this.id].lng,
zoom: 19
};
if (_markers.currentMarker !== null) {
_markers.currentMarker.fire('click');
} else {
_markers.visibleParent.fire('clusterclick');
_markers.currentMarker.fire('click');
}
});
});
};
You can read more about how I arrived at this solution here on github .
source to share
Like many people, I also had a long search with no results. While experimenting with another method I came across this:
$timeout(function(){
leafletData.getLayers().then(function(layers) {
$scope.markerClusterGrp = layers.overlays.locations;
var clusters = $scope.markerClusterGrp.getLayers();
$scope.markerClusterGrp.on('clustermouseover', function (a) {
var clusterObjects = a.layer.getAllChildMarkers();
console.log(clusterObjects);
});
$scope.markerClusterGrp.on('clusterclick', function (a) {
var clusterObjects = a.layer.getAllChildMarkers();
console.log(clusterObjects);
});
});
},1000);
It works the same way, the difference is that it takes a while for all markers to wait for the layer to be displayed (my understanding, correct me if not :-)).
I hope this helps anyone looking for an angular solution. Don't forget to include $timeout
in your controller dependencies.
source to share