Estou utilizando Angular em um projeto com Codeigniter e estou aplicando o mapa Leaflet. Criando a função, ele gera o mapa, porém informa erro ao obter a propriedade center e não carrega na posição definida de inicialização, segue abaixo código e imagens:
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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | © <a href="http://www.openstreetmap.org/copyright">AngelLira</a>',
},
scrollWheelZoom: false,
minZoom: 3,
worldCopyJump: true
}
})
};
}]);
Div onde está o mapa:
<leaflet ng-init="mapa()" lf-center="center" controls="controls" defaults="defaults" markers="markers" width="100%" height="450px"></leaflet>
Erro retornado no console:
[AngularJS - Leaflet] The "center" property is not defined in the main scope
Porém ela está vindo através do extend dentro da função.
Alguém já teve este problema?
Infelizmente não posso utilizar Google Maps.
Além deste Leaflef alguém recomenda um outro maps free?