Animate change of map size

[troxler]

As far as I can see, this plugin does not support animation for changing its size. This would be helpful in various situations. For example, when clicking on a marker triggers an info window to slide in from the bottom like this:

+–––––––––––+    +–––––––––––+
|           |    |    MAP    |
|           |    |           |
|    MAP    |    +–––––––––––+
|           |    |   INFO    |
|           |    |   VIEW    |
+–––––––––––+    +–––––––––––+

The map should animate from e.g. a height of 100% to a height of 30% while recentering the marker. Right now I am doing this by hand by regularly calling map.refreshLayout(), however, the resulting animation is wiggly and far from smooth.

Any plans to implement something like that?

[aesmon]

I believe watchdog does that for you, and that is handled within scrollViewDidScroll event, so make sure that is fired and no other plugin overwrites that. Had similar problem not too long ago. The watchdog timer determines how smooth the transition will be.

[hirbod]

Currently, the watchdog will check for changes every 100ms. So the animation will not look very nice. I've incorporated a method to change this.

   map.setWatchDogTimer(1);

This will change the internal interval to 1ms instead of 100ms. You will have a much smoother animation. (iOS will look very good, android will look "better") Just keep in mind to switch it back to 100 (or just pass false "map.setWatchDogTimer(false);")

Some Pseudocode:

// before animating, change interval
map.setWatchDogTimer(1);
// no start animation
$('#map_canvas').animate({
   height: 300
}, 500, function(){
   // this is the animation complete callback
   // or just use complete: function(){}

  // reset value to default
  map.setWatchDogTimer(false);
});

[hirbod]

This is working (when using jQuery, just adjust your needs)

$('#map_canvas').animate({
    height: 300
}, {
    easing: 'linear',
    duration: 200,
    progress: function(){
        map.setWatchDogTimer(1);
        map.refreshLayout();
    },
    complete: function(){
        map.setWatchDogTimer(false);
    }
});

Actually, there should be also a start: function() (i think, or onStart:) - it should be enough to call setWatchDogTimer(1) only once.

[troxler]

Thank you for the replies. I tried setWatchDogTimer with different values. Unfortunately, the animations are still far from smooth on both Android and iOS. Low values also seem to be quite compute-intensive as our CSS transitions are getting more stuttery.

[hirbod]

Well I'm sorry, buts thats the only way currently.