0

I'm trying to initialize a leaflet map in a currently not visible ion-slide. When swiping to this slide the map-container has a height of 0 and the map is not visible. When setting the dimensions of the map-container to a fixed size the map is visible but no tiles are visible, the map is just grey.

I have tried to call invalidate() and removing/creating the map again, but to no avail.

my HomePage

import {
  Component
} from '@angular/core';
import * as leaflet from "leaflet";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map;

  constructor(){
  }

  onChange(event){
    if(this.map && event.realIndex == 2){
      this.map.invalidateSize()
    }
  }

  ionViewDidLoad(){
    this.map = leaflet.map("MAP").fitWorld();
    leaflet.tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
  }

}

the template

<ion-content padding>
  <ion-slides (ionSlideDidChange)="onChange($event)">
    <ion-slide>
      a
    </ion-slide>
    <ion-slide>
      b
    </ion-slide>
    <ion-slide>
      <div id="MAP" style="width: 500px; height: 500px"></div>
    </ion-slide>
  </ion-slides>
</ion-content>

I expect the third slide to contain an initialized map, but it does not/is just grey

herhuf
  • 497
  • 3
  • 17
  • 1
    A leaflet map will not initialise correctly if the map div isn't visible when you create the map. Can you call `map.invalidateSize()` at the point that the slide becomes visible? That should make it render properly. – peeebeee Feb 07 '19 at 16:32
  • How would I call this method at just this moment? – herhuf Feb 07 '19 at 16:33
  • I don't know the framework you're using, sorry. Is there an event that fires when a slide becomes visible? – peeebeee Feb 07 '19 at 16:34
  • Yes, thank you, I'll try this – herhuf Feb 07 '19 at 16:39
  • No, calling `this.map.invalidateSize()` when the `ionSlideDidChange()` event fired for the third slide does nothing. – herhuf Feb 07 '19 at 17:02

0 Answers0