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](http://stackoverflow.com/help/mcve). — georgeawg, Jan 05 '17 at 18:35

score 3 · Accepted Answer · answered May 23 '17 at 10:53

3

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.

answered May 23 '17 at 10:53

Tunca

136
12

Thanks for this! Worked brilliantly for me :) For anyone else who struggles, `leafletData` has to be added to the `app.controller` call alongside `$scope` etc. See [this example](http://angular-ui.github.io/ui-leaflet/examples/0000-viewer.html#/basic/double-map-access-map-object-example). – ewels Oct 15 '20 at 21:17

score 2 · Answer 2 · answered Jul 22 '19 at 06:00

2

You need to add leaflet css

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

answered Jul 22 '19 at 06:00

Dauren Bekzhanov

21
1

Welcome to SO! Given OP's screenshot, they correctly have Leaflet CSS already added. And given the described symptoms, the correct solution is to invalidate size once the map container is revealed, as also explained in https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 – ghybs Jul 22 '19 at 08:17
Thank you! Sometimes people forgot to add leaflet.css and it causes the same error – Dauren Bekzhanov Jul 22 '19 at 08:38

Map loads incorrectly with Angular-Leaflet-Directive

2 Answers2