CODEWITHSUNDEEP
angularjsangular-uileaflet
user3499275
user3499275

Reputation: 207

how to get lat/lng info for clicks in leaflet map in an angular ui

I'm building a pretty basic web app with Angular.js and Leaflet.

I'm trying to get the lat/lng info from the clicks on the map and i'm having trouble finding any docs on integrating the event handlers from Leaflet into Angular.

if anyone could point me in the right direction, i'd be stoked.

the code below:

app.controller("eventcrtl", [ '$scope', function($scope) {
    $scope.$on('leafletDirectiveMap.click', function(event){
      console.log(event.latlng);
    });
}]);

doesn't work

Upvotes: 4

Views: 3842

Answers (1)

j.wittwer
j.wittwer

Reputation: 9497

To handle events, first define an events object on your scope...

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

and add it to your leaflet element.

<leaflet event-broadcast="events"></leaflet>

Then, you can access latitude and longitude inside the args parameter of the click handler:

$scope.$on('leafletDirectiveMap.click', function(event, args){
    console.log(args.leafletEvent.latlng);
});

Here is a working demo: http://plnkr.co/PxRDhz6S5Svsg9FG4VRk

Upvotes: 17

Related Questions