'The "center" property is not defined in the main scope'

[nmccready]

From @toutpt on October 19, 2015 8:44

I dont find a way to create a directive that embed leaflet directive.

I have created a plunker to isolate the problem: http://plnkr.co/edit/zgnzG3fqHxJ13DoiNGy8?p=preview

console shows many errors:

• [AngularJS - Leaflet] The "center" property is not defined in the main scope(anonymous function)
• [AngularJS - Leaflet] The 'tiles' definition doesn't have the 'url' property.

This seems different from #362

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

[nmccready]

From @yukk1 on October 30, 2015 3:21

Thank you for forking my plunk.

I have updated my plunk. Please check it.

[brunofin]

Any news on that? I'm facing the same problem.

app.directive('fqLivemap', ['FquestRoutes', function(FquestRoutes) {
    return {
      templateUrl: '/partials/fquest/livemap.tmpl.html',
      link: function($scope, el) {
        $scope.center = {
          lat: -27.644606381943312,
          lng: -48.47648620605469,
          zoom: 10
        };
        if ("geolocation" in navigator) {
          navigator.geolocation.getCurrentPosition(function(position) {
            $scope.$apply(function() {
              $scope.center.lat = position.coords.latitude;
              $scope.center.lng = position.coords.longitude;
              $scope.center.zoom = 12;
            });
          });
        }
      }
    }
  }]);

<leaflet center="center"
    width="400px"
    height="300px">
</leaflet>
<p>{{ center }}</p>

The p tag displays center correctly.

[jeansymolanza]

I'm having the same issue as well/ Has this been resolved yet?

 function ConsumerBusinessProfileCtrl($scope) {

     angular.extend($scope, {
          center: {
               lat: 51.505,
               lng: -0.09,
               zoom: 8
          }

 });

<leaflet lf-center="center"></leaflet>

[illepic]

@brunofin, move your leaflet initialization vars to a directive controller like this:

app.directive('fqLivemap', ['FquestRoutes', function(FquestRoutes) {
    return {
      templateUrl: '/partials/fquest/livemap.tmpl.html',
      /* New stuff below here */
      controller: function($scope) {
        $scope.center = {
          lat: -27.644606381943312,
          lng: -48.47648620605469,
          zoom: 10
        };
      },
      /* New stuff above here */
      link: function($scope, el) {
        if ("geolocation" in navigator) {
          navigator.geolocation.getCurrentPosition(function(position) {
            $scope.$apply(function() {
              $scope.center.lat = position.coords.latitude;
              $scope.center.lng = position.coords.longitude;
              $scope.center.zoom = 12;
            });
          });
        }
      }
    }
  }]);

[toutpt]

For my part I have created angular-leaflet-light because of this issue https://github.com/toutpt/angular-leaflet-light

[rawbeans]

I am also having the issue of being unable to nest the directive in another directive. If I remove the center property, I get the error:

TypeError: Cannot read property 'baselayers' of undefined from inside the link function of the leaflet directive.