Map displaying properly only on window change

Question

I am working on a project that makes use of a map engine from some private company that I can't mention here.

The system used to be in JQuery, and we recently made some considerable modifications, and the system is now implemented in AngularJS.

On the left side of the screen, we have a slidebar displaying items. On the right side of the screen, we have the map.

My issue is that when I load the page, the map does not display properly, and the inside overlay is quite small. I have checked their sizes but they are correct.

However, when I resize the window manually, or open the Element Inspector from G. Chrome, the map then gets displayed completely.

I have attempted to redraw the clusterLayer, resize the map, resize the div of the map, but nothing seems to be working.

I found this post Google map does not display properly, it could have solved my problem, but I don't have any power on how the map gets loaded.

Thanks

Answer 1

I had a similar problem with ol3 in conjunction with angular. My workaround was to add:

$(document).ready(function () {map.updateSize()});

With map being my ol3 map object. In this case I did not use the openlayers directive from angular. Which, by the way, when used did not have the displaying problems. Maybe that helps.

Answer 2

I've had somewhat a similar problem and none of the solutions provided worked for me. So I used timeOut function like this and it worked:

setTimeout(function() {
   $scope.$apply(function(){
        map.updateSize();
   })
});