Map opens bugado

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, as printscreen below:

It readjusts when I resize the window or open and close the console, follows image below:

Codes:

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>
</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, { // EXTENDE AS PROPRIEDADES DO MAPA (MARCADORES, LOCALIZAÇÃO INCIAL..)


        center: { // LOCALIZAÇÃO INICIAL  .
            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 */

Some help?

Answer 1

I was able to solve it this way:

    vm.esconderMostrarMapa = false;

    vm.mostrarMapa = function () {
        $timeout(function() {
            vm.esconderMostrarMapa = true;
        }, 500); 
    }

The map starts as false, then when it becomes true the same is shown on the screen. I know that the best way would be using the invalidateSize(), but seeing the issues in the lefalet Angularjs github, several people are with the same problem and failed to solve using the same.

Another more correct way is to use the map.invalidateSize method:

        vm.ajustarMapa = function(){
      leafletData.getMap().then(function(map) {
        setTimeout(function(){
          map.invalidateSize();
        }, 200);
      });
    };

    vm.ajustarMapa();