Map opens bugged

Question

Map opens bugged

Navigation

#1 by (0 votes)

0

Good morning!

I have a web application, where I use a leafletjs map ( link ) and openstreetmap as tile .

The map works perfectly, I can interact in any way (add markers, create layers, zoom ..), but when I access the page where the map is, it does not load correctly, as shown below: / p>

ItresetswhenIresizethewindoworopenandclosetheconsole,belowimage:

Codes:

View:

<divclass="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 */

Any help?

html angularjs css3 maps angularjs-directives

asked by anonymous 05.01.2017 / 12:54

1 answer

Javascript pure, json and api Height with min and max in percent x auto

score 0 · Accepted Answer

I was able to resolve it as follows:

    vm.esconderMostrarMapa = false;

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

The map starts as false, when it is true, the map is displayed on the screen. I know that the best way would be to use invalidateSize() , but seeing the issues in the github of lefalet angularjs, several people have this same problem and could not resolve using it.

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();