Map loads incorrectly with Angular-Leaflet-Directive - html

Question

Good morning!
I have a web application, where I use a leafletjs map (http://tombatossals.github.io/angular-leaflet-directive/#!/) and openstreetmap as tile.
The map works perfectly, I can interact in any way (add markers, create layers, zoom ..), however, when I access the page where the map is, it does not load correctly, according to the printscreen below:
It resets when I resize the window or open and close the console.
Font:
View:
<div class="col-md-12">
<div class="box_whiteframe_map">
<leaflet ng-init="vm.buscaEnderecoClientesEmpresas()" center="vm.center" defaults="vm.defaults" markers="vm.markers" width="100%" height="480px"></leaflet>
</div>
CSS/SASS:
.box_whiteframe_map {
background-color: #fff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
color: #000;
margin: 0;
clear: both;
}
Controller:
/* MAP */
vm.markers = new Array();
vm.buscaEnderecoClientesEmpresas = function() {
vm.items = loadSaas(Cookies.get('crm_o2_hash')); // carregar saas id
vm.items.then(function(items) { // ler array de retorno
vm.saasid = items;
var dados = {
'saasid': vm.saasid
}
relatoriosService.carregarEnderecoClientesEmpresas(dados).then(function(response) {
if (response.data != 'null') {
vm.enderecoClientesEmpresas = response.data;
angular.forEach(vm.enderecoClientesEmpresas, function(value, key) {
if (value.tipo == 'p'){
var icon = 'user';
} else {
var icon = 'cog';
}
vm.markers.push({
group: value.cidade,
lat: value.lat_lng.lat,
lng: value.lat_lng.lng,
message: value.nome,
icon: {
type: 'awesomeMarker',
icon: icon,
markerColor: 'blue'
},
label: {
options: {
noHide: true
}
}
});
});
} else {
vm.enderecoClientesEmpresas = '';
}
}, function(error) {
console.log('Erro findSemEmail: ', error);
});
});
}
angular.extend(vm, { // EXTEND THE PROPERTIES OF MAP (MARKERS, INITIAL LOCATION..)
center: { // INITIAL LOCATION .
lat: -22.952419,
lng: -43.211667,
zoom: 4
},
defaults: {
tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
zoomControlPosition: 'topright',
tileLayerOptions: {
opacity: 0.9,
detectRetina: true,
reuseTiles: true,
attribution: '© OpenStreetMap | &copy Funil PRÓ',
},
scrollWheelZoom: true,
minZoom: 3,
worldCopyJump: true
}
});
/* MAP FINAL */
Any help?
[]'s

Answer 1

You need to refresh the map:
leafletData.getMap().then(function(map) {
setTimeout(function() {
map.invalidateSize();
map._resetView(map.getCenter(), map.getZoom(), true);
}, 200);
});
In additionally, you need to inject leafletData to controller.

Answer 2

You need to add leaflet css
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">