angular-ui / ui-leaflet

AngularJS directive to embed an interact with maps managed by Leaflet library
http://angular-ui.github.io/ui-leaflet
Other
315 stars 137 forks source link

How to Change/Update Events #88

Open nmccready opened 8 years ago

nmccready commented 8 years ago

From @jiggy1com on July 10, 2015 0:57

I understand setting the default events to fire

angular.extend($scope, {
    events: {
        map: {
            enable: ['drag', 'click', 'etc'],
            logic: 'emit'
        }
    }
});

When a specific event is triggered, I'd like to update the events that can fire, or even clear them all. For example, this is not working for me.

<!-- My Directive -->
<leaflet id="myMap" paths='paths' tiles="tiles" markers="markers" center="center" events="events" event-broadcast="events"></leaflet>
// My Controller
// Expected Behavior: when the map is clicked, remove all events from firing
$scope.$on('leafletDirectiveMarker.click', function (e, args) {
    leafletData.getMap('myMap').then(function(map){
        $scope.events = {
            map : {
               enable : [],
               logic : 'emit' 
           }
        };
    });
});

I click the map, see my click event run (which should remove future click events), but then when I click the map again the click event continues to fire.

How can I accomplish behavior I'm looking for?

Thanks

Copied from original issue: tombatossals/angular-leaflet-directive#850

nmccready commented 8 years ago

From @jiggy1com on July 10, 2015 17:45

For the time being I'm just going to flag my own state. For example, I want to show the user the lat/lon as they move their mouse over the map. When they click the map a popup will open, and I no longer want the user to see the lat/lon update when the mouse is moved over the map:

$scope.isPopupOpen = false;
// set isPopupOpen to true when map is clicked
$scope.$on('leafletDirectiveMap.click', function(event, args){
    // open the popup here (code not shown), and set isPopupOpen to true
    $scope.isPopupOpen = true;
});

// show the user the lat/lon the mouse is over while the mouse moves
$scope.$on('leafletDirectiveMap.mousemove', function(event, args){
    //$log.log('map:mousemove', args.leafletEvent.latlng.lat, args.leafletEvent.latlng.lng);
    // if popup is not open go ahead and show the user the lat/lon the mouse is hovering/moving over
    if(!$scope.isPopupOpen){
        leafletData.getMap('mainMap').then(function(map){
            $scope.maptoolsLat = args.leafletEvent.latlng.lat.toFixed(3);
            $scope.maptoolsLon = args.leafletEvent.latlng.lng.toFixed(3);
        });
    }
});
nmccready commented 8 years ago

From @mikefedak on July 22, 2015 20:22

I handle event deletion like this:

//create an array which will hold your events var eventArr =[];

//declare click as an event var Click = $scope.$on('leafletDirectiveMap.click', function(ev, featureSelected, leafletEvent) { //etc.. });

eventArr.push(Click)

//To delete your events:

angular.forEach(eventArr, function(data, index) { data.call(); });

How does this work? In Angular if you call a listener function, it destroys that listener. See here for more: http://stackoverflow.com/questions/14898296/how-to-unsubscribe-to-a-broadcast-event-in-angularjs-how-to-remove-function-reg