ui-leaflet icon indicating copy to clipboard operation
ui-leaflet copied to clipboard

Impossible to detect cluster marker click event

Open ghost opened this issue 9 years ago • 3 comments

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:

  1. When I click on cluster marker it doesn't work first time.
  2. 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.

ghost avatar Apr 22 '16 20:04 ghost

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);
}

ghost avatar Apr 23 '16 09:04 ghost

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.

ghost avatar Apr 23 '16 14:04 ghost

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,
          }
        };
      });

dasiekjs avatar Jun 26 '18 09:06 dasiekjs