How do you get the map to Pan using ui-angiular?

273 Views Asked by At

I'm using ui-angular but I'm I cant figure out how to get the map to panTo a new location. I understand how it would work it I was just using Leaflet.js but because this is a directive I don't understand what object I'm supposed to use to interactie with map on the page.

Here is my map directive
<leaflet id="owmMap" center="center" markers="markers" layers="layers"></leaflet>

 Here is my code so far.

  $scope.moveTo = function(obj){
        console.log(obj);

      //map.panTo((new L.LatLng(40.737, -73.923));); <--- This is what I need to replicate
 }
1

There are 1 best solutions below

2
On BEST ANSWER

Okay, like most things the answer was buried in the documentation. For some reason there are actually 3 different sites for this plugin with different set of docs, but I found the answer on the git repo.

https://github.com/tombatossals/angular-leaflet-directive

If anyone else has this question.

There is a data object called "leafletData" that you can pass into your 'Controller' and use to access the map object directly on the page. Here is some sample code:

 $scope.moveTo = function(obj){
      leafletData.getMap('myMap').then(function(map) {
         map.panTo({lat: obj.lat, lng: obj.lng});
       });   
 }