1

I'm using leaflet to show some markers on map on my angular app.

When I first load the page the map shows ok, the problem is when I navigate to another page (with ui.router) and get back to the map page the tiles does not render anymore (all tiles are gray).

var map;
var all_coordinates;

function createMap(centrals) {
    // create the tile layer with correct attribution
    // set up the map
    map = new L.Map('map', {
        scrollWheelZoom: false
    });
    var baseMaps = {
        "Real Image": esri,
        "Roads": roads
    };
    roads.addTo(map);

    all_coordinates = SOME_COORDINATES;

    var overlayMaps = {"Name": SOME_LAYERS};
    L.control.layers(baseMaps, overlayMaps).addTo(map);
    //allCoordinates.push(L.latLng(37.016085, -7.933859));
    map.fitBounds(all_coordinates).addLayer(centrals_layers);
    return map;
}

Anyone has an ideia on what am I doing wrong?

EDIT:

Here is the route config for the map page:

$stateProvider
        .state('home', {
            url: "/home",
            templateUrl: "/static/app/views/dashboard.html",
            controller: "homeController",
            resolve: {
                loadPlugin: function ($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        {
                            serie: true,
                            files: ['/static/vendor/datatables.net/js/jquery.dataTables.min.js',
                                '/static/vendor/datatables.net-bs/css/dataTables.bootstrap.min.css',
                                '/static/vendor/datatables.net-bs/js/dataTables.bootstrap.min.js']
                        },
                        {
                            serie: true,
                            name: 'datatables',
                            files: ['/static/vendor/angular-datatables/dist/angular-datatables.min.js',]
                        },
                        {
                            serie: true,
                            name: 'datatables.buttons',
                            files: ['/static/vendor/datatables.net-buttons/js/dataTables.buttons.min.js',
                                '/static/vendor/datatables.net-buttons-bs/css/buttons.bootstrap.min.css',
                                '/static/vendor/datatables.net-buttons-bs/js/buttons.bootstrap.min.js',
                                '/static/vendor/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.min.js']
                        }
                    ]);
                }
            }
        })
Artur Ataíde
  • 139
  • 1
  • 14
  • I think your router config is more important to include than the map function. ui-router can do lots of things depending on the type of navigation you do, such as child routes, resolves, etc. – cmonkey Mar 07 '17 at 21:28
  • @cmonkey I will edit with te router for the map page. – Artur Ataíde Mar 07 '17 at 21:30

1 Answers1

2

Same problem as in Leaflet map loading half greyed tiles and related questions (e.g. Leaflet Map not showing in bootstrap div, Leaflet map not displayed properly inside tabbed panel, leaflet map shows up grey, etc etc) - just run map.invalidateSize() when your page layout is stable.

IvanSanchez
  • 18,272
  • 3
  • 30
  • 45
  • Hi Ivan.. I've done that before writing this answer but with no luck. Just to be sure, should I add this line after initializing the map? – Artur Ataíde Mar 08 '17 at 13:00
  • As I have said, run `map.invalidateSize()` **when your page layout is stable**. In your case, this means "when the UI router has finished making changes to the DOM". – IvanSanchez Mar 08 '17 at 14:23
  • The solution that I used was to use [angular-leaflet-directive](http://tombatossals.github.io/angular-leaflet-directive/#!/). I had a need to restructure the code and with this lib the problem was solved. Thanks for your input, I didn't try adding the `map.invalidateSize()` when the layout is stable, but will assume it as the correct answer. – Artur Ataíde Mar 08 '17 at 15:56