Leaflet Map With Tile Layer Only On Top Corner

I'm developing a project with Ionic 5 and Vue.js, and in one of my screens I am using an leaflet map that must cover almost the entire screen. I am using the Leaflet library for vu

Solution 1:

It should work for all types of ionic application. the issue is due to loading of leaflet map before the ionic components. so try the below one it should work

ionViewDidEnter(){
   let osmMap = L.map('map');
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   }).addTo(osmMap);
   osmMap.invalidateSize();
}

Solution 2:

For Angular it should help

import * as L from'leaflet';   
    @Component({
      selector: 'app-home',
      templateUrl: './home.page.html',
      styleUrls: ['./home.page.scss'],
    })
    exportclassHomePageimplementsOnInit {
     ngOnInit(){
      let osmMap = L.map('map');
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      }).addTo(osmMap);
    let customMarkerIcon = awaiticon({
            iconUrl: 'assets/images/test.png',
            iconSize: [50, 50], 
            popupAnchor: [0, -20]
          }); 
  L.marker([11.203,12.300],{icon:customMarkerIcon}).addTo(osmMap);
     const observer = newMutationObserver(() => {
          osmMap.invalidateSize();
          osmMap.setView([11.203,12.300],20);
          observer.disconnect();
        });
        observer.observe(document.documentElement, {
          attributes: true,
          attributeFilter: ['class'],
          childList: false,
          characterData: false,
        });
    }
}