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 informs error when obtaining the center property and does not load at the set boot position, follows below 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 in console:

[Angularjs - Leaflet] The "center" Property is not defined in the main Scope

But it is coming through the extend within the function.

Someone’s had this problem before?

Unfortunately I cannot use Google Maps.

Beyond this Leaflef someone recommends another free maps?

Answer 1

Hi I cleaned your code and made a test here.

The only reason I can find is that you don’t declare the controller view side.

I hope this helps.