stretching problem

[FallenRiteMonk]

I found an error that I already had in my project. Let me try to describe it: I have a page with a toggle able side bar, the rest of the page is filled with the map. Now if i toggle the sidebar the view port of the map gets changed in size, but the page content is stretched.

I fixed this problem before by adding the following to my map page:

ngDoCheck() {
    this.map.updateSize();
  }

I don't know if this is the best, or right solution, but it worked for me, you should have a look at it.

If you have any questions or need more info, just let me know!

[quentin-ol]

Could you help me reproduce it ? Are you using angular/material2, by any chance ?

[FallenRiteMonk]

No I'm using angular-cli and bootstrap. I created a min example: https://github.com/FallenRiteMonk/angular2-openlayers-example

just install angular-cli globaly, run npm install in the example and then ng serve and you'll have it up and running

[quentin-ol]

Thanks for putting up this example, I will look into it.

[FallenRiteMonk]

Would you like me to create a PR for this problem?

[quentin-ol]

Hey @FallenRiteMonk, This looks it could solve the issue but there is still a concern regarding "performances". According to the docs (https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html),

ngDoCheck gets called to check the changes in the directives in addition to the default algorithm.

That means that the map.resize function might be called quite often. I'm currently reading a bit more on the Change Detection algorithm in Angular2 to help myself forge an opinion on this (if that's of interest: http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html).

Don't hesitate to submit a PR if you have time and your opinion is more than welcome.

Thanks again

[FallenRiteMonk]

I realized that it is called way to often, but since my app isn't to big that was not a problem for me.

I would really like to try my self with a fix, but sadly I'm not able to get my local version to run. I'll create an issue for that as well.

My idea for the fix would be to try it with the Renderer.listen function as described here: http://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2

[quentin-ol]

Does this issue still affects you ?

[FallenRiteMonk]

I'm currently working around it by not changing the size of the map, but I thought of these solutions: 1) Instead of having the height and width of the map template 100%, make it an input of the component with a default value of 100% and call map.resize on change. This way one can at least update the map manually. 2) Create a simple function to just expose this method call and let on call it by it self as here in the angular documentation.

Let me know what you think and I'd also be happy to implement one of the solutions for you!

[FallenRiteMonk]

I personally like the first solution better since that implementation would make a wrapper around the map unnecessary and one could just pass the size in

[quentin-ol]

@FallenRiteMonk I like your first solution better as well. Could you set up a PR for it? Thanks again!

[quentin-ol]

PR #16 fixes this issue. Thanks @FallenRiteMonk

[DominikTrenz]

It's not fixed for me, ngAfterViewInit isn't called in my case (flex layout). ngAfterViewChecked does work fine.

[Prashanth-Thomas]

Hello, i have a similar stretching issue, i am using Angular 4.

Got a hold of the map using in HTML <aol-map #map [width]="'100%'" [height]="'300px'"> in TS File of the component @ViewChild('map') map;

Tried running the following code: this.map.updateSize();

I get the following Error this.map.updateSize is not a function at .

My question is, how do i get access to the updateSize or resize function on the map in Angular 4??

[mhosman]

@Prashanth-Thomas in your case you can do this:

@ViewChild('map') map;

const yourMap = this.map.instance as ol.Map;
yourMap.updateSize();

or just

@ViewChild('map') map;

this.map.instance.updateSize()

[LeandroFiaschetti]

ngAfterViewChecked is called many times so, the performance of your application will fall. I recommend you to use events provided by ol, for example: map.once('postrender', function (event) { self.map.updateSize(); }); This works fine for me.

[redor85]

@LeandroFiaschetti: Thanks a lot. This works also in a normal Angular (V8), Openlayers (V6), Bootstrap (V4) app.