OpenLayers: How can I redraw a map after a sidebar is collapsed?

Question

I am using OpenLayers to display a map, and AdminLte for the interface.

My problem : When collapsing the main left sidebar on a given page, all the boxes and what it contains changes size (I don't really know how) so the maps gets bigger as well. The problem is that when it happens, all the features displayed on the maps apparently change position and are not where they are supposed to be anymore.

What I would like: To redraw the map after the sidebar collapses.

Any suggestion?

I tried:

$('.navbar-collapse').on('shown.bs.collapse', function() {
    map.updateSize();
});

and:

$('.sidebar').on('shown.bs.collapse', function() {
   map.updateSize();
});

but to no avail...

EDIT : My question is similar to this one: OpenLayers: How to re-align mouse coordinates and vector layers after fluid css rendering of map div but his solution doesn't work for me :)

EDIT 2 : Just to clarify: I think the solution to my problem would be to call the map.updateSize() method when the sidebar has finished collapsing. The problem is that I don't know how to catch the moment when the sidebar has finished collapsing/expanding!

score 3 · Accepted Answer · answered Jul 28 '17 at 07:25

A temporary solution I found was to start a timeout when the button triggering the sidebar collapse and then call the map.updateSize() method:

  $('.sidebar-toggle').click(function(){
      setTimeout(function(){ map.updateSize(); }, 500);             
  });

It works...but it's kind of meh :/

G.Hunt · Answer 2 · 2017-07-27T14:54:44.037

1

If you're trying to redraw the map after the sidebar collapses, change your event handler to the following:

$('.sidebar').on('hidden.bs.collapse', function() {
   map.updateSize();
});

According to the list of event handlers here, the hidden.bs.collapse event is fired when a collapse element has been hidden from the user.

edited Jul 27 '17 at 14:54

answered Jul 27 '17 at 14:10

G.Hunt

1,364
10
20

Sorry, I'm pretty new to OpenLayers :) But what would your variable map be? An ol.Map object? – Raphaël Jul 27 '17 at 14:19
Your variable would be whatever you used to instantiate your map (be it in the same file or elsewhere). Somewhere in your code, you must have a bit of code similar to `var map = new OpenLayers.Map('map');`? – G.Hunt Jul 27 '17 at 14:25
I do! :) But when I tried to do map.getSource().changed(); I had : Uncaught TypeError: map.getSource is not a function. So I looked at the API and apparently the ol.Map object don't have a .getSource() method. – Raphaël Jul 27 '17 at 14:28
This one totally works, and it is the method I wanted to use in the first place. (c.f the two lines I already tried) My problem is that I don't know when to call this method, since I don't know how to catch the moment when the sidebar has finished collapsing/expending :) – Raphaël Jul 27 '17 at 14:42
Ah ok, mis-interpreted your question. Will update the answer. – G.Hunt Jul 27 '17 at 14:50
And I the question! – Raphaël Jul 27 '17 at 14:53
1

Your new solution doesn't work. For some reason the function is never triggered! – Raphaël Jul 28 '17 at 07:19

score 1 · Answer 3 · answered Oct 28 '19 at 10:48

I have the same problem, using React and a class component my (awful) solution is this:

shouldComponentUpdate = async () =>
  await new Promise(res =>
    setTimeout(() => {
      this.map.updateSize()
      res(false)
    }, 500)
  )

It's awful because the resize causes the map to jump. If there is a way of achieving the map resize without a jump that would be pretty cool.

(500 is the animation time for my drawer to close)

OpenLayers: How can I redraw a map after a sidebar is collapsed?

3 Answers3