title: Leaflet map doesn't cover whole map area
body: <p><strong>Update:</strong> I have put my answer. Please see it. </p>
  
  <p><strong>Original Question:</strong></p>
  
  <p>Can you tell me why <a href="https://leafletjs.com/" rel="nofollow noreferrer">leaflet map</a> doesn't show on the full map area?</p>
  
  <p><em>.html</em></p>
  
  <pre><code>&lt;ion-content padding&gt;
    &lt;div style="height: 100%;width:100%" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center"&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><em>.ts</em></p>
  
  <pre><code>  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,
      };
    }
  </code></pre>
  
  <p><em>UI</em></p>
  
  <p><a href="https://i.stack.imgur.com/0BPLj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0BPLj.png" alt="enter image description here"></a></p>
  
  <p>Please see the image. It seems a problem with <code>transform</code>. Default it was <code>0,0,0</code>. I have changed it manually on the browser like so. So how can I set it to the map?</p>
  
  <p><a href="https://i.stack.imgur.com/4RZ68.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4RZ68.png" alt="enter image description here"></a></p>