Map loads incorrectly with Angular-Leaflet-Directive

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:

MAP

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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | &copy <a href="http://www.openstreetmap.org/copyright">Funil PRÓ</a>',
        },
        scrollWheelZoom: true,
        minZoom: 3,
        worldCopyJump: true
    }
});

/* MAP FINAL */

Any help? []'s

When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. See How to create a Minimal, Complete, and Verifiable example. — georgeawg

Tunca Tunca · Accepted Answer · 2017-05-23T10:53:17

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.

Map loads incorrectly with Angular-Leaflet-Directive

2 Answers