AngularJS Leaflet directive: Events not working

Question

I am using AngularJS leaflet directive. I am trying to use events to display a context menu. I am using the guide from following link leaflet directive events

but its not working out.

Though i am able to see logs on console but I am not able to see any alerts which i want to see.

Here is the code from my controller. No matter which event i try contextmenu or click its not working for me.

 (function(){

var baseMapController = function($scope, $http, leafletData, Base64, leafletMapEvents) {
    angular.extend($scope, {
        berlin: {
            lat: 40.726468,
            lng: -74.005639,
            zoom: 14
        },
        markers: {
            m1: {
                lat: 52.52,
                lng: 13.40
            }
        },
        layers: {
            baselayers: {
                googleTerrain: {
                    name: 'Google Terrain',
                    layerType: 'TERRAIN',
                    type: 'google'
                },
                googleHybrid: {
                    name: 'Google Hybrid',
                    layerType: 'HYBRID',
                    type: 'google'
                },
                googleRoadmap: {
                    name: 'Google Streets',
                    layerType: 'ROADMAP',
                    type: 'google'
                }
            }
        },
         events: {
            map: {
                enable: ['zoomstart', 'contextmenu', 'drag', 'click', 'mousemove', 'popupopen'],
                logic: 'broadcast'
            }
        },
        defaults: {
            scrollWheelZoom: false
        },
        geojson:{}
    });


   $scope.$on('leafletDirectiveMap.click', function(event){
        alert("Click");
    });

    // Mouse over function, called from the Leaflet Map Events
    var countryMouseover = function (feature, leafletEvent) {
        var layer = leafletEvent.target;
        layer.setStyle({
            weight: 2,
            color: '#666',
            fillColor: 'white'
        });
        layer.bringToFront();
    };

    $scope.$on("leafletDirectiveGeoJson.mouseover", function(ev, leafletPayload) {
        countryMouseover(leafletPayload.leafletObject.feature, leafletPayload.leafletEvent);
    });     
};

baseMapController.$inject = ['$scope', '$http', 'leafletData', 'Base64', 'leafletMapEvents'];

 }());

and this is what i see on browser's console

the difference is that your event is not leafletDirectiveMap.event it is leafletDirectiveMap.map.event so try $scope.$on('leafletDirectiveMap.map.click', function(event){ alert("Click"); }); — stackg91, Feb 22 '16 at 14:49
@stackg91 Now I am able to capture the events. Any idea how can i show context menu and set its contents? — Bagira, Feb 22 '16 at 16:50
There is this extension: https://github.com/aratcliffe/Leaflet.contextmenu — jbdev, Feb 23 '16 at 02:00
How can i use this with angular-leaflet-directive? I could not find any examples with angular-leaflet-directive. — Bagira, Feb 23 '16 at 03:33
I got the example form git repository of project but that is also not working. Have a look at https://github.com/aratcliffe/Leaflet.contextmenu/blob/master/examples/angular.html — Bagira, Feb 23 '16 at 04:02
We need to see what your code looks like. Either edit this question or start a new one. — jbdev, Feb 23 '16 at 04:34

AngularJS Leaflet directive: Events not working

0 Answers0