leafletDirectiveMarker disable focus when user click outside the map

Question

I have a click function on the marker which will enable the marker popup. But when the user clicks outside the map I want to disable this focus. How to do this?

$scope.$on('leafletDirectiveMarker.click', function (event, args) {

            $scope.markers['m' + args.model.value.id].focus = true;

            createTemplateForPopup(args.model.value);
        });

score 1 · Answer 1 · answered Jul 06 '18 at 07:43

You can simply listen to a window event and disable all focus on click:

$window.addEventListener('click', function(e) {
  $scope.markers.forEach(function(marker) {
   marker.focus = false;
  });
});

You might prevent default to not trigger the window click when someone selects a marker:

$scope.$on('leafletDirectiveMarker.click', function (event, args) {
  event.preventDefault();
  $scope.markers['m' + args.model.value.id].focus = true;
  createTemplateForPopup(args.model.value);
});

The only problem is that this will always trigger. So it is good practice to remove the EventListner when the map is destroyed.

leafletDirectiveMarker disable focus when user click outside the map

1 Answers1