Leaflet map with tile layer only on top corner

Issue

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 vue, and my code looks like this:

<template>
  <section class="map-container">
    <l-map
          ref="map"
          :options="mapOptions"
          :bounds="bounds"
          v-on:update:zoom="zoomUpdated"
          @ready="mapReady"
        >
      <l-tile-layer :url="'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'">
      </l-tile-layer>
  </l-map>
  </section>
</template>


<script>
import "leaflet/dist/leaflet.css";
import Vuex from "vuex";
import { mapState, mapGetters } from "vuex";
import Leaflet from "leaflet";
import store from '../store/index'
import Vue2LeafletGoogleMutant from "vue2-leaflet-googlemutant";
import { LMap, LTileLayer, LPolygon, LImageOverlay } from "vue2-leaflet";

export default {
  name: "MapBackground",
  store,
  components: {
    LMap,
    LTileLayer
  },
  computed: {
    ...mapState("maps", ["gMapsKey", "bounds", "selected"]),
  },
  methods: {
    zoomUpdated(zoomLevel) {
      if (zoomLevel <= 13) {
        this.$store.commit("maps/selected", -1);
      }
    },
    mapReady() {
      this.$refs.map.mapObject.invalidateSize()
      const { map } = this.$refs;
      map.mapObject.on("click", this.selectTalhao);
    }
  },
  data() {
    return {
      mapOptions: {
        zoomControl: false,
        doubleClickZoom: false,
        tap: false,
        trackResize: false
      },
      mutantOptions: { type: "satellite", redraw: true },
    };
  },
  watch: {
  },
  async created() {
    await this.$store.dispatch("maps/updateBounds", { point: null });
    this.$refs.map.mapObject.invalidateSize()
  }
};
</script>

However, when i load the screen for the first time, our reload the tab in the browser, my map looks like this:Map image

I've tried using invalidateSize, checked if the height of the div had changed and nothing. Don't know what else can I do to solve this. Any help would be appreciated.

Solution

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();
}

Answered By - developer