examples/0513-markers-events-example-with-id.html

<!DOCTYPE html>
<html ng-app="demoapp">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../bower_components/leaflet/dist/leaflet.js"></script>
    <script src="../bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
    <script src="../dist/angular-leaflet-directive_dev_mapped.js"></script>
    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
    <script>
        var app = angular.module("demoapp", ["leaflet-directive"]);
        app.controller("MarkersEventsController", [ "$scope", "leafletMarkerEvents", "leafletLogger", function($scope, leafletMarkerEvents, leafletLogger) {
          // leafletLogger.currentLevel =  leafletLogger.LEVELS.debug;

            $scope.center = {
                lat: 51.505,
                lng: -0.09,
                zoom: 8
            };

            $scope.markers = {
                london: {
                    lat: 51.505,
                    lng: -0.09,
                    draggable: true,
                    message: "I'm a draggable marker",
                    focus: true
                }
            }

            $scope.events = {
                markers: {
                    enable: leafletMarkerEvents.getAvailableEvents(),
                }
            };

            $scope.eventDetected = "No events yet...";
            var markerEvents = leafletMarkerEvents.getAvailableEvents();
            for (var k in markerEvents){
                var eventName = 'leafletDirectiveMarker.myMap.' + markerEvents[k];
                $scope.$on(eventName, function(event, args){
                    $scope.eventDetected = event.name;
                });
            }
        }]);
    </script>
  </head>
  <body ng-controller="MarkersEventsController">
    <leaflet id="myMap" event-broadcast="events" lf-center="center" markers="markers" width="100%" height="400px"></leaflet>
    <h1>Marker Events example</h1>
    <ul>
        <li><strong ng-bind="eventDetected"></strong> event caught in listener.</li>
    </ul>
  </body>
</html>