Resize from css-class of map container not happening

TomWeber124 commented 6 years ago

Hello.

I´m using yaga leaflet-ng2 with the following dependencies:

"dependencies": {
    "@angular/animations": "^5.2.9",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.9",
    "@angular/compiler": "^5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "^5.2.9",
    "@angular/http": "^5.2.9",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "^5.2.9",
    "@angular/router": "^5.2.9",
    "@techiediaries/ngx-qrcode": "^0.0.5",
    "@types/leaflet": "^1.2.6",
    "@yaga/leaflet-ng2": "^1.0.0-rc9",
    "chart.js": "^2.7.2",
    "chart.piecelabel.js": "^0.9.0",
    "core-js": "^2.5.3",
    "g": "^2.0.1",
    "hammerjs": "^2.0.8",
    "leaflet": "^1.3.1",
    "ngx-qrcode2": "0.1.0",
    "npm": "^5.7.1",
    "rxjs": "^5.5.7",
    "screenfull": "^3.3.2",
    "webpack": "^3.11.0",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.3",
    "@angular/compiler-cli": "^5.2.9",
    "@angular/language-service": "^5.2.9",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^9.4.7",
    "codelyzer": "^4.2.1",
    "jasmine-core": "^3.1.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.2",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng2-charts": "^1.6.0",
    "protractor": "^5.3.0",
    "ts-node": "^5.0.1",
    "tslint": "^5.9.1",
    "typescript": "^2.7.2"
  }

Situation is as follows:

The view consists mainly of the map and a table, each having about half of the width.
There is a button. If you click on it the table disappears and the map should take the full width.
The width change is in a css-class, which gets added via ngClass and strapped to the map container.
When inspecting via browser inspector, the class gets set correctly.
When hovering the space where the table was, the cursor indicates it´s hovering the map.
The visuals/tiles of the map just don´t appear.
Scrolling/Dragging on the map to other locations won´t trigger tile load on the area where the table was either.
If i resize the browser window the tiles on the area where the table was magically appear.

I´m not an expert regarding the angular lifecycle-hooks or leaflet for that matter. I´m not entirely sure it actually is a leaflet-ng2 problem, a scenario i toyed in plain js with leaflet didn´t throw the same problem though, so i suspect there might be something here.

Any help would be greatly appreciated.

Thank you in advance.

atd-schubert commented 6 years ago

@TomWeber124 Can you create a simplified "un"-working example of your problem on GitHub? And link it here?

TomWeber124 commented 6 years ago

I did. You can find it here: https://github.com/TomWeber124/yagatest

I´ve pretty much broken it down to the basics.

So by clicking on the switch button, the "table" is hidden via *ngIf and the size of the map should switch from 50% to 100% via [ngClass].

The cursor and inspector indicate this happened, but the missing tiles won´t load. If i however change the size of the browser window (minimizing, changing dimensions, etc.) and then go back maximizing it, it loads the missing tiles just fine.

As far as i´ve come, there is the invalidateSize()-function of LeafletJS if you come across something similar in a VanillaJS-environment, to trigger a tile reload manually.

atd-schubert commented 6 years ago

Yes, that is right you just have to invalidate the map. In leaflet-ng2 it is quite easy, because the MapComponent is derived from the Map-class of Leaflet. You just have to import it into your controller as Angular ViewChild.

yagajs / leaflet-ng2

Resize from css-class of map container not happening #367