1

I'm using ngx-leaflet with angular 8 to show the map on the popup, but when I open the popup on map tiles are not overlay properly. I also used map.invalidateSize(). But still, it's not working.

enter image description here

.html code to show the popup. 

<div class="modal fade" id="collision1" role="dialog" aria-labelledby="toolenforces" aria-hidden="true">
    <div class="modal-dialog" role="document">
               <div class="row">
                 <div class="col-md-6" style="margin-top: 15px; margin-bottom: 15px;"> 
                    <div class="map1 records-map1" leaflet  [leafletOptions]="options4"
                   (leafletMapReady)="openCollision($event)"></div>
                 </div>
      </div>

.ts code

  options4 = {
layers: [
  tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
  })
],
zoom: 7,
center: latLng([14.1111, 121.21111])};  

   openCollision(map : L.Map){
           setTimeout(function() {
             map.invalidateSize();
            }, 10);}
user3484089
  • 95
  • 10

2 Answers2

0

set the timeout to a higher delay:

openCollision(map : L.Map){
           setTimeout(function() {
             map.invalidateSize();
            }, 500);}
Falke Design
  • 10,635
  • 3
  • 15
  • 30
  • No it's not working. If I set the timeout to 1000 then also it's not worked. Can we implement it in a different way? – user3484089 May 26 '20 at 04:49
0

This my tricks for this issue:

async onMapReady(map: L.Map) {
  this.map = map;
  await this.delay(10);
  this.map.invalidateSize(false)
}

delay(ms: number) {
  return new Promise( resolve => setTimeout(resolve, ms) );
}
Jun
  • 103
  • 6