How to know the new coordinates when i drag pointer to new location?

[nmccready]

From @praveenkumararepalliGit on February 9, 2015 7:23

Hi ,

I have read your directive .Its every useful to integrate MAP into website. Here is a doubt i got when use DRAG feature. How would i Know the new location coordinates when pointer dragged to new location ?

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

[nmccready]

From @stefan-niedermann on February 9, 2015 8:14

Hi, look here: http://tombatossals.github.io/angular-leaflet-directive/#!/examples/events

You can watch events. If this does not help you, i can post a piece of code how to listen the drag event and get the new coordinates.

Hint: You don't need to watch leafletDirectiveMap-Event, there is a leafletDirectiveMarker-Event which you can listen to.

[nmccready]

From @praveenkumararepalliGit on February 9, 2015 9:22

Hi Stefan, Thanks for you reply. Can you post a piece of code .

[nmccready]

From @praveenkumararepalliGit on February 9, 2015 11:20

Hi Stefen, Actually I wanted to show default location by setting lat = 12 and lng =80;

      angular.extend($scope, {
               city: {
                   lat: 12,
                   lng: 80,
                   zoom: 12
               },
               markers: {
                   cityName: {
                       lat:12,
                       lng:80,
                       message: "You are here!",
                       focus: true,
                       draggable: true
                   }
               },
               defaults: {
                   scrollWheelZoom: true
               },events: {
                    map: {
                        enable: ['zoomstart', 'drag', 'click', 'mousemove'],
                        logic: 'emit'
                    }
                }
           });

Here i am watching drag event.

    $scope.$on('leafletDirectiveMarker.drag', function(event){
    var draggedLat=event.targetScope.markers.cityName.lat;
    var draggedLng=event.targetScope.markers.cityName.lng;
    console.log(draggedLat,draggedLng); //here am getting 12 ,80  every time
    console.log(event); // Here i can see new coordinates
    console.log(event.targetScope.markers.cityName.lat,event.targetScope.markers.cityName.lng);
   });

Can you Tell where the issue is ?

[nmccready]

From @stefan-niedermann on February 9, 2015 12:19

sry, can't tell it by rote. i currently don't have access to my notebook. i'll post today evening, hope thats early enough. hmm, maybe the event is wrong? did you try leafletDirectiveMarker.dragend ?

[nmccready]

From @praveenkumararepalliGit on February 9, 2015 12:28

Yes Stefen. But Coordinates are wrong can I achieve by doing this code? Default location is 12,80 once i drop marker to new location still its giving 12,80 only But dropping point is different

     $scope.$on('leafletDirectiveMarker.dragend', function(event){
    var coordinatesObject = event;
            var draggedLat=coordinatesObject.targetScope.markers.cityName.lat;
            var draggedLng=coordinatesObject.targetScope.markers.cityName.lng;
        console.log(draggedLat,draggedLng);
           console.log(event.targetScope.markers.cityName.lat,
                          event.targetScope.markers.cityName.lng);  
     });

[nmccready]

From @stefan-niedermann on February 9, 2015 21:25

I am sorry, i am not able to reproduce this behaviour

$scope.$on('leafletDirectiveMarker.dragend', function(event) {
    console.log($scope.markers.mymarker.lat);
    console.log($scope.markers.mymarker.lng);
}

this works fine for me...

[nmccready]

From @praveenkumararepalliGit on February 10, 2015 9:55

Yes,i can see the new coordinates only for one image.

I have 3 Images side by side.When click any image making call to

     $scope.imageLocationDetails(imageData,$index);

Then "imageLocationDetails()" will start executes and there am checking for

imageViewPage.jsp

     <leaflet defaults="defaults" markers="markers"  center="city" height="320px" width="320px"></leaflet>

imageController.js

          $scope.imageLocationDetails = function (image,imageIndex) {
          //Here i can read the EXIF data from Image (EXIF data may have lat and lng)
         $scope.imageIndex = imageIndex;
           if (image.lat && image.lng) {
                 angular.extend($scope, {
                      city: {
                           lat: latt,
                           lng: longi,
                           zoom: 12
                        },
                     markers: {
                        cityName: {
                                  lat:latt,
                                  lng:longi,
                                  message: "You are here!",
                                  focus: true,
                                 draggable: true
                                }
                        },
                       defaults: {
                              scrollWheelZoom: true
                        },events: {
                          map: {
                              enable: ['zoomstart', 'drag', 'click', 'mousemove'],
                                 logic: 'emit'
                         }
                   }
              });
                } else {
                      angular.extend($scope, {
               city: {
                   lat: 12,
                   lng: 80,
                   zoom: 12
               },
               markers: {
                   cityName: {
                       lat:12,
                       lng:80,
                       message: "You are here!",
                       focus: true,
                       draggable: true
                   }
               },
               defaults: {
                   scrollWheelZoom: true
               },events: {
                    map: {
                        enable: ['zoomstart', 'drag', 'click', 'mousemove'],
                        logic: 'emit'
                    }
                }
           });
                 }

             }

          $scope.$on('leafletDirectiveMarker.dragend', function(event,gh,mmm){
          console.log($scope.markers.cityName.lat);
          console.log($scope.markers.cityName.lng);
         //Here i wanted to get the latest coordnates and put into image(Based on image ID)
                $scope.imageList[$scope.imageIndex].lat =   $scope.markers.cityName.lat;
                $scope.imageList[$scope.imageIndex].lng =   $scope.markers.cityName.lng;
            });

Is this correct approach stefen?

[nmccready]

From @stefan-niedermann on February 10, 2015 10:9

hmm @tombatossals any idea?

[nmccready]

See rest of original issue https://github.com/tombatossals/angular-leaflet-directive/issues/626

Rest of issue import broke.