Skip to content
This repository has been archived by the owner on Sep 20, 2019. It is now read-only.

Impossible to detect cluster marker click event #248

Open
ghost opened this issue Apr 22, 2016 · 3 comments
Open

Impossible to detect cluster marker click event #248

ghost opened this issue Apr 22, 2016 · 3 comments

Comments

@ghost
Copy link

ghost commented Apr 22, 2016

I tried solution from here: #31
and here: #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
Copy link
Author

ghost commented Apr 23, 2016

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
Copy link
Author

ghost commented Apr 23, 2016

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.

@dasiekjs
Copy link

dasiekjs commented Jun 26, 2018

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant