About Leaflet maps into a component

Ionic Framework
1

Hi pals, I use successfuly Leaflet maps into my app. But I require to show the same map into different places of my app. I need to use it into a component. It works but only show 1 or few tiles. This occurs cause’ map object needs to know its sizes before show tiles.
The cuestion is: how could I be aware of the sizes of my component?
I configure via scss width and height at 100% and nothing.
Also, I use:

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

this is my scss:

.map {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: '-100';
}

.map-container {
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

and html code is:

<div class="map-container">
  <div id="map" class="map"></div>
  <div style="height: 300px;" leaflet (leafletMapReady)="onMapReady($event)"> </div>
</div>

this is the result:

imagen
imagen370×747 47.2 KB

and the same issue is keeping…
Any help please…

2

Hey pals. In case someone have this problem. I solved it. The solution is to register the load event before call setView like this:

this.map = new Map('map')
    .on('load', e => setTimeout(() => {
      this.map.invalidateSize();  }, 0))
    .setView([this.currLat, this.currLng], this.currZoom);

Just in case you people have this problem

1 Like