Leaflet Map, not rendering tiles properly

Question

I'm using leafletjs for the map feature of my app. Installed, wrote some simple codes, lo and behold a map. Although the tiles aren't rendering properly

even I drag to another place, it's still have patches of tiles missing. Here's my code

HTML

<div #map style="width:100%; height:100%;"
leaflet
(leafletMapReady)="onMapReady($event)"
[leafletOptions]="options">
</div>

TS

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

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

  options: MapOptions;

  constructor() { }

  ngOnInit(): void {
    this.options = {
      layers: [
        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...', minZoom: 5 })
      ],
      zoom: 5,
      center: latLng(46.879966, -121.726909)
    };
  }

  onMapReady(map) {
    console.log("SHITS HERE DUMBAASS");
    setTimeout(() => {map.invalidateSize(true)}, 1000);
    // map.invalidateSize(true);
  }
}

as you can see I also have the onMapReady() function that I saw on other posts. I helps loading the map properly, but when I switch to a different component, I goes back to being wonky.

Update: Zooming out the browser page, makes the map load OK for a time.. prolly issue is with CSS, will still investigate more

Update 2: So I did this

  ngAfterViewChecked(): void {
    this.map.invalidateSize(true);
    //this.map.center = this.center;
  }

This makes the tile load. But I was wondering why (leafletMapReady) wasn't "firing" map invalidate?

Thanks!!!

Answer 1

I solved it by including this in the top of the component: import 'leaflet/dist/leaflet.css';

It just need the styling and the documentation in leaflet it's a but fuzzy about it.