I use OpenLayers4 with bootstrap-native. My page has bootstrap tablist, and I put map layers on a tab which is initially hidden. But after the tab is selected and comes to front, the map is white-out and is not shown..

How can I make it visible?

I tried


but it doesn't work.

I also tried this map refresh but it throws error "TypeError: source.getParams is not a function".

I found a workaround by resizing the page, then map is shown. But I want to display the map without having to resize the page.

How I can solve this?

2 Answers 2


You will need map.updateSize
If you set size of map target element(div) in style(css), simply call map.updateSize.
sample codepen here

  • +1up-vote it's really help to me (y) Commented Apr 23, 2018 at 12:11

In my case the solution was to use the timeout to wait for the div to be displayed.

setTimeout(function() {
}, 100);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.