0

EDIT

This question is not a duplicate of How to get a leaflet map canvas to have a 100% height? as for the obvious reason, that you can see my map spanning the 100% height (compare the attribution on my picture being in the gray zone, while the container of the other question obviously ends before the blank zone. Also i can identify the size of my container spanning the 100% of the parent container in the developer tools. Just take a look at my css and and a very close look at the picture and maybe at leaftlet if you don't know how it works.)

Original

I use leaflet 1.5.1 in ionic 3.

After panning the map a bit, oftentimes the contents for gray parts are not being loaded (no network requests/traffic indicated in my browsers dev tools) and i am left with gray parts/stripes in the map as in the picture (the gray horizontal stripe below).

When i pan a lot further the missing map parts are loaded, but sometimes not (especially in iOS).

enter image description here

My map page's HTML using my map component (below)

<map style="height: 100%; width: 100%;">

The map component's HTML

<div id='map'></div>

The component's scss file

map {
    #map{
        height:100%;
        width: 100%;
    }
}

And here the component's typescript which creates the map

this.map = L.map('map', {
      center: L.LatLng(center.latitude, center.longitude),
      zoom: 13,
      attribution: Attribution,
      tap: false
    });


    //Add OSM Layer
    L.tileLayer("https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png", { attribution: Attribution }).addTo(this.map);

    this.map.setView([center.latitude, center.longitude], 14);

Any hints on what i'm doing wrong?

Juarrow
  • 2,232
  • 5
  • 42
  • 61
  • 1
    Sounds like https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 – ghybs May 18 '19 at 18:06
  • Possible duplicate of [How to get a leaflet map canvas to have a 100% height?](https://stackoverflow.com/questions/37588601/how-to-get-a-leaflet-map-canvas-to-have-a-100-height) – IvanSanchez May 19 '19 at 11:39
  • 1
    @IvanSanchez if you take a look at the picture of my question and the question you mark my question as a duplicate on, you may see a big difference... Mine is already 100% in height (As in the css) => no duplicate. Chrome Developer tools also confirm that. – Juarrow May 19 '19 at 11:42
  • @ghybs i'll take a look at this. May very well be a tabs problem as described in your link. – Juarrow May 19 '19 at 11:51

1 Answers1

0

The solution was to trigger a resizing event via window.dispatchEvent(new Event('resize')) every time the user enters the tab page holding all the tabs including the map tab.

The map is reacting to this by adjusting itself to the "new" size.

Rene Korss
  • 5,414
  • 3
  • 31
  • 38
Juarrow
  • 2,232
  • 5
  • 42
  • 61