ngx-leaflet: leaflet map doesn't load tiles after refreshing the page

Okay, after a bit try and error I was able to find out that the following code doesn’t solve the issue:

 onMapReady(map: L.Map) {
    map.invalidateSize();
 }

But changing it to the following will solve the issue (even if the time is set to zero):

 onMapReady(map: L.Map) {
    setTimeout(() => {
      map.invalidateSize();
    }, 0);
 }

Thanks for giving me some hints.

@mybluedog24 In your original approach (using *ngIf), you’re running into the issue where you can’t reuse tile layers between instances of a map. You create the tile layers in mapOptions, but I bet you aren’t recreating them when the map is recreated when *ngIf evaluates to true. This is a slightly frustrating feature of Leaflet. When layers are added to the map, they are changed by the map. If you try to reuse those layers again, they just won’t work. One way to fix this is to create a wrapper component for the map that just contains the default map options and maybe input/output bindings for the marker you’re putting on the map and whatever interactions you want to allow. Then, you could put the *ngIf on that component. When *ngIf evaluates to true, your map wrapper component is created and the map is created (and so you end up with new instances of the layers). When *ngIf evaluates to false, both the wrapper and the map itself are destroyed, ensuring that the next time it’s created, it will be completely recreated with new layers and everything.

If you want to save state between viewModes (e.g., zoom/pan), you’d probably be better off using the [hide] approach in your second example. Here, you just need to move your invalidateSize call into logic that is triggered by the change in state for viewMode. (leafletMapReady) is only invoked when the map is created. [hide] doesn’t create or destroy the map, it just changes the CSS on the map DIV so that it’s hidden. But, it’s still in the DOM. (leafletMapReady) would only get invoked if you removed the map directive from the DOM using *ngIf as in your first example.

Hope this helps.

Hi @d-koppenhagen, do you mind also showing how your selector is used? This issue is not specific to ngx-leaflet. Without looking at more code I can tell you some common pitfalls:

1. Using CSS rules for width and height with percentage (%) values. This normally doesn’t cause problems unless the ngx-leaflet directive is on an element that has not had its width/height explicitly set. You could try using viewport-percentage units (vh or vw) which can be read about here.

2. Using ngIf or CSS rule display: none. Both of these turn your Angular component into a 0 size element. After an ngIf is true or display:none is reversed, your problem may be solved by having the leaflet map call invalidateSize after one of those events happen.

3. If neither of these suggestions are applicable, try adding a setTimeout call that then has the leaflet map call invalidateSize.

Hopefully that helps, if not, please feel free to add more detail.

PS: I did not see an attached picture.

I just ran into the same issue. The problem with the timeout solutions posted above is that they will not work on very slow devices because you might run into a race condition.

The problem occurs for me when I put the leaflet directive into a custom element of my own. The issue seems to be that the parent container has a size of 0 for a few milliseconds when the map get’s initialized. You can see this here (0ms and 500ms): https://i.imgur.com/9DMijJH.png

The solution I came up with seems to work 100% of the time and on all devices no matter how slow:

• Install angular-resize-event
• Add resize event listener to map container
• Add onMapReady event to map container
• invalidateSize() every time you get a resize event

<div class="map-container"
     leaflet
     [leafletOptions]="options"
     (leafletMapReady)="onMapReady($event)"
     (resized)="onResized()"
></div>

import {Component} from '@angular/core';
import {latLng, Map, MapOptions, tileLayer} from "leaflet";

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent {

  public options: MapOptions = {
    zoom: 12,
    center: latLng(48.206993, 16.363670),
    zoomControl: false,
    layers: [
      tileLayer('https://{s}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png', {
        maxZoom: 18,
        minZoom: 1,
        subdomains: [
          'maps', 'maps1', 'maps2', 'maps3', 'maps4'
        ],
        attribution: ''
      })
    ]
  };

  public map: Map = null;

  onMapReady(map: Map) {
    this.map = map;
  }

  onResized() {
    if (this.map) {
      this.map.invalidateSize();
    }
  }

}

@reblace Thank you so much! You saved me! Thank you for pointing out that using [hidden] for saving state between viewModes. I’m using the [hidden] approach. Passing the map variable by (leafletMapReady) and called invalidateSize() after switch to map view. Here’s my code: HTML:

...
  <button ion-button (click)="viewMode='map';invalidateSize();">Map</button>
...
  <ion-row [hidden]="viewMode !== 'map'" style="width:100%; height:100vh;">
    <div class="map" style="width:100%; height:100vh;"
     leaflet
    (leafletMapReady)="onMapReady($event)"
     [leafletOptions]="mapOptions">
    </div>
  </ion-row>

ts:

...
import * as L from 'leaflet';
...
map: any;
...
this.mapOptions = {
		layers: [
			L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {}),
		],
		zoom: 8,
		center: L.latLng([43.7974909,-79.4250085])
	};
...
onMapReady(map) {
	this.map = map;
}
...
invalidateSize() {
	if (this.map) {
		setTimeout(() => {this.map.invalidateSize(true)},100);
	}
}

Another thing you can do is to use an *ngIf="show" directive and after the view init, set it on true. That worked for me. I guess the problem is when the map is loaded, so if you wait until the component is fully loaded, it’ll work properly.

Hi, I have the same issue and d-koppenhagen’s solution (with or without setTimeout) doesn’t work (I tried differnt timeout value).

I’m using it in Ionic and here is my code: HTML:

  <ion-row *ngIf="viewMode === 'map'" style="width:100%; height:100vh;">
    <div class="map" style="width:100%; height:100vh;"
     leaflet
    (leafletMapReady)="onMapReady($event)"
     [leafletOptions]="mapOptions">
    </div>
  </ion-row>

ts:

...
import * as L from 'leaflet';
...
this.mapOptions = {
		layers: [
			L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {}),
		],
		zoom: 8,
		center: L.latLng([43.7974909,-79.4250085])
	};
...
onMapReady(map) {
	setTimeout(() => {map.invalidateSize(true)},1000);
	// map.invalidateSize(true);

Here’s the walkthrough: at the beginning the map will not show up until I change the wiewMode:

When I first time click the Map button, the map displays correctly.

But after I change it to List and change back to Map view, the tile layer can’t display.

Also I tried use [hidden]="viewMode !=='map'" but it shows like this, unless I resize the window:

I’m thinking maybe is because invalidateSize() doesn’t work?

Thanks for your help!

I was facing a situation where the tiles wouldn’t re-render after routing away from the map host component and back again. The markers were visible, but no base layer.

My base layer (ESRI Satellite) would return if I refreshed the page or toggled an Open Street Map overlay on and then off again.

I fixed this using the following:

• set map parameters in ngOnInit within the map host component
• use (leafletMapReady)=“onMapReady($event)” to set a reference to the map in the map component
• use ngOnDestroy to remove the map using this.map.remove()

I could use a mapReady flag in combination with *ngIf, but it’s working fine without it.

I hope this helps someone else as it has taken me a few hours to work this one out. I tried invalidateSize and this didn’t work; with or without a setTimeout. Without looking into it too much, I thought this might get the map to redraw and bring the tiles back, but it didn’t work.

Here’s some code snippets which should be easy enough to follow:

template

<div id="map" leaflet
     [leafletOptions]="mapOptions"
     [leafletLayersControl]="layersControl"
     (leafletMapReady)="onMapReady($event)">
  <div *ngFor="let marker of markers" [leafletLayer]="marker"></div>
</div>

component

mapOptions: MapOptions
layersControl: LeafletControlLayersConfig
markers: Array<Layer>

map: Map

constructor(private mapService: MapService) {}

ngOnInit(): void {
  this.mapOptions = this.mapService.getMapOptions()
  this.layersControl = this.mapService.getLayersControl()
  this.markers = this.mapService.getMarkers()
}

onMapReady(map: Map): void {
  this.map = map
}

ngOnDestroy(): void {
  this.map.remove()
}