Damir's Corner.

Handling Events with Angular Leaflet Directive

Leaflet JavaScript library includes comprehensive support for events, raised by the map itself or by one of many objects rendered on the map. Detailed documentation covers all aspects of working with events: management of individual event listeners, structure of arguments passed to listener functions, and a list of supported events for the map and for each individual object type. Angular Leaflet directive broadcasts all these events as standard AngularJS events, but the documentation is much more scarce.

This means that although there is a way to get a reference to the map object when using the directive, you shouldn't need it for handling events raised by different Leaflet objects. You can rely on AngularJS's standard event listeners in your controller instead:

var app = angular.module('demoapp', ['leaflet-directive']);
app.controller('MapController', ['$scope', function($scope) {
    $scope.$on('leafletDirectiveMap.click', function(event, args) {
        console.log('Leaflet map click event detected.');
    });
}]);

The trick is in knowing, which event to listen to and what arguments are passed to the listener function for each one of them.

Event names are always composed the same way:

• <sourceObjectType>.<eventName> when the leaflet tag doesn't have an id attribute specified.
• <sourceObjectType>.<leafletId>.<eventName> when the leaflet tag has an id attribute specified.

Event names match the names from the Leaflet documentation. Source object types specify, which type of object the event originates from. Although the names make sense and can be guessed, I couldn't find a definitive list anywhere, except of course in the library source code:

• Near the top of each *Events.js file there is a call to EventsHelper with the event name prefix as one of the arguments.
• Each *Events.js file also contains a definition for getAvailableEvents function, returning a list of all supported events.

To see the full event names and when they are triggered, you can also open the JavaScript console in your browser, where by default the name of any broadcasted event will be printed out.

As with every AngularJS event, two arguments will be passed to the listener function. The first one is the standard Angular's event object, as described in AngularJS documentation. The second one is specific to Leaflet directive and consists of four properties:

• leafletEvent is Leaflet's standard event object as described in its documentation
• leafletObject is Leaflet's object that originally raised the event: map, marker, etc. They are all described in Leaflet's documentation.
• model is the object descriptor used by Leaflet directive to create or configure Leaflet's objects accordingly. Best documentation can be found in Leaflet directive repository.
• modelName is the name used to identify the specific object descriptor. Typically the name matches the property name used in the corresponding associative array for that object type that is bound to the Leaflet directive.

I spent a lot of time hunting for this information. Hopefully, having it conveniently in one place will prove helpful to others as well.