Angular Leaflet map error

Question

I'm using Angular in a project with Codeigniter and I'm applying the Leaflet map. Creating the function, it generates the map, but it informs error when obtaining the center property and does not load in the defined position of initialization, it follows code and images:

var app = angular.module('myApp', ['ngMaterial', 'ngMessages', 'perfectParallax', 'leaflet-directive'])
 .controller('MyController', ['$scope', '$http', function ($scope, $http) {
     $scope.url_base = location.href.substring(0, location.href.lastIndexOf('/') + 1);
     //console.log($scope.url_base);

     $scope.mapa = function () {
         var mainMarker = {
             lat: -27.0990815,
             lng: -52.6113324,
             focus: true,
             message: "AngelLira",
             draggable: false
         };
         angular.extend($scope, {
             center: {
                 lat: -15.25241,
                 lng: -52.21115241,
                 zoom: 4
             },
             markers: {
                 mainMarker: angular.copy(mainMarker)
             },
             position: {
                 lat: -27.0990815,
                 lng: -52.6113324
             },
             defaults: {
                 tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                 zoomControlPosition: 'topright',
                 tileLayerOptions: {
                     opacity: 0.9,
                     detectRetina: true,
                     reuseTiles: true,
                     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy <a href="http://www.openstreetmap.org/copyright">AngelLira</a>',
                 },
                 scrollWheelZoom: false,
                 minZoom: 3,
                 worldCopyJump: true
             }
         })
     };
 }]);

Div where is the map:

<leaflet ng-init="mapa()" lf-center="center" controls="controls" defaults="defaults"  markers="markers" width="100%" height="450px"></leaflet>

Error returned on console:

[AngularJS - Leaflet] The "center" property is not defined in the main scope

But it is coming through the extend within the function.

Has anyone had this problem?

Unfortunately I can not use Google Maps.

In addition to this leaflef does anyone recommend other maps free?

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

Answer 1

Hi I cleaned up your code and made a test myself here.

The only reason I can find is that you don't declere the controller view side

<div ng-controller="MyController">
  <leaflet  lf-center="center" controls="controls" defaults="defaults"  markers="markers" width="100%" height="450px"></leaflet>
</div>

Hope this helps