Leaflet map doesn't cover whole map area

Question

Update: I have put my answer. Please see it.

Original Question:

Can you tell me why leaflet map doesn't show on the full map area?

.html

<ion-content padding>
  <div style="height: 100%;width:100%" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
  </div>
</ion-content>

.ts

  init(): void {
    this.options = {
      layers: [
        tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
      ],
      zoom: 10,
      center: this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude"))),
      attributionControl: false,
    };
  }

UI

Please see the image. It seems a problem with transform. Default it was 0,0,0. I have changed it manually on the browser like so. So how can I set it to the map?

Answer 1

Here I'm using this with Ionic 4 app. I have tried many solutions given by different devs. But none of them worked for me. The problem here is the life cycle event which I have used earlier. So now I use ionViewDidEnter() and no issues.

ionViewDidEnter() {
    this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude")));
    this.options = {
      layers: [
        tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
      ],
      zoom: 17,
      center: this.center,
      attributionControl: false,
    };

    this.layers.push(this.mapService.getMarker(this.center, "assets/icon/map/placeholder.png"));

  }