Wrong target on `leafletDirectiveMarker.click`

[arol]

I proceed like this:

1. Load an array of objects into vm.markers (779 elements)
2. Later, I filter this array reducing it to 5 elements and save it to vm.markers in the controller. The map updates automatically.
3. When I select a marker and I receive the leafletDirectiveMarker.click event, the data.leafletEvent.target.options is a completely different object than the selected. In addition this object is none of the 5 markers filtered.

Has anyone an idea of what is going on? Maybe is a bug of mine? A leaflet bug?

[tomek14]

I have the same problem too, i think it is a bug in directive. If you are using label you can check content property in leafletObject.label, and you will see that it is correct but all the rest is incorrect. I am tried to find workaround this problem but with no success.

[ErikLabree]

I'm seeing the exact same behaviour. Did anyone find a solution yet?

[sasham43]

I saw the same behavior. It seems to be referenced in https://github.com/angular-ui/ui-leaflet/issues/199

The workaround I used was to first use an object instead of an array, and to dynamically generate property names (m1, m2, etc) based on a count variable (instead of pushing to an array). The problems seems to be that if you have a marker m1, and then update it but still leave the property as m1, it 'sees' the old marker. If you instead update it to a unique key of m2, you'll be able to click your updated markers.

[chk1]

It's also in issue #512. You basically need to keep the order in the array when filtering/sorting, or else the target might be wrong, with hidden markers or things like that

[chagen19]

When the markers array is updated, the events need to be re-bound. I have fixed by adding the following at the beginning of the _updateMarker function. Maybe not an ideal solution, but it works. Note you also need to inject "leafletMarkerEvents" into the leafletMarkersHelpers service and create a named function for listenMarkerEvents.

var pathToMarker = Helpers.getObjectDotPath([name]);
//remove all listeners on the marker
marker.clearAllEventListeners();
// re-bind default events
listenMarkerEvents(marker, markerData, leafletScope, true, /*watchOptions.individual.doWatch,*/ map);
//re-bind configured events
leafletMarkerEvents.bindEvents(leafletScope.mapId, marker, pathToMarker, markerData, leafletScope, markerData.layer);

[seb-esperanto]

Thank you very much for your work chagen19 !! I've done all three changes you recommended, and was happy the problem to be solved ! Indeed, it is !!

Unfortunately a new problem appeared at the same time : Before the change, when I clicked a marker, its popup opened to show its message properly. But after the change, a marker (it seems to be the last one of the markers array) opens even without a click. And when I click on a marker, nothing happens. Indeed, when I pane the map, there seems to always be an opened marker popup, not always the same, and often not at the right position...

I've tried the changes in ui-leaflet.js 2.0.0 2016-10-04

Anyway, thank you for your valuable clue, chagen19. I think I'll simply disable popups as a quick workaround :) The most important to me is the clicks working well.

[tungtiemkk]

Hi every one, seem have a bug in leafletDirectiveMarker.click event. To resolve it, i do following:

`$scope.$on('leafletDirectiveMarker.mapId.click', function(event, args) { // Don't use this to find value of id // var id = args.leafletEvent.target.options.id; // Instead i use 'modelName':

            var selectedIndex = args.modelName;
            var id = $scope.marker[selectedIndex].id;
            console.log("Test id = " + id);
        

// And this id is alway equal value of id show on popup. // And this is my marker:

           `$scope.marker.push({
                 id: id,
                 lat: dataMap[i].Lat,
                 lng: dataMap[i].Long,
                 icon: $scope.leafIcon,
                 iconAngle: angle
                 focus: false,
                 message: dataMap[i].Id,
                 popupOptions: {
                      autoPan: false
                }
           });`

// And when have correct id, simply to find correct data store in service // Hope this help some one when use click event in angular leaflet! // Notice: if marker have not name, 'args.modelName' return index of marker in list marker // Example about name of marker is 'construction':

         `$scope.markers = {
               construction: {
                    color: 'red',
                    weight: 2,
                    latlngs: []
              } 
         };`
    })`

[vladhilko]

You can just get correct coordinates on click (args.leafletEvent.latlng) and compare this with your correct $scope.markers. This is my code on CoffeeScript

$scope.$on 'leafletDirectiveMarker.click', (event, args) ->
    latlng = args.leafletEvent.latlng
    correct_id = args.model.id

    if (latlng.lat != args.model.lat) && (latlng.lng != args.model.lng)
      $scope.markers.forEach (marker) ->
        if marker.lat == latlng.lat && marker.lng == latlng.lng
          correct_id = marker.id

    console.log correct_id

[renangiacomin]

Work's for me.

$scope.$on('leafletDirectiveMarker.mouseover', function(event, args){
            var popup = L.popup({ offset: L.point(0, -28)})
                        .setLatLng([args.leafletObject._latlng.lat, args.leafletObject._latlng.lng])
                        .setContent(args.leafletObject._popup._content);
            leafletData.getMap().then(function(map) {
                map.closePopup();
            });
            leafletData.getMap().then(function(map) {
                popup.openOn(map);
            });
});