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!!!

Ocular

Looks like network errors when loading the tiles. I'd monitor the situation with the network inspector of the browser's developer tools and maybe try a different tile server to see if there's any change. – Argos

It looks like you have not added the leaflet.css – Caucasian

@FalkeDesign: leaflet.css file looks to be effective given the screenshot: zoom buttons and attribution are correctly styled. – Adamok

What happens if you resize the browser window? – Adamok

@Adamok same behavior with zomming in/out of the page, it load the tiles properly – Ocular

i had the same error and adding leaflet.css seems to have resolved it for me – Workday

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.

Cud

Thanks a lot. After migrating from vue-cli to vite my map was all garbled and I could not firure out what change made it, and this did the trick! – Jointless