Fix rapid zooming giving a blank map

[danzel]

If you zoom in or out twice quickly (before new tiles can load) you will be given a blank map.
These changes make us consider whether we should use the existing background (zoomed) layer or re-use the foreground layer instead.
If the current foreground doesn't have enough tiles loaded we'll keep the current background instead (and zoom it in).

Fixes CloudMade/Leaflet#7 (The second oldest open issue on leaflet!)

Happy to change _getLoadedTilesPercentage if there is a better way to do it.

[jacobtoye]

Awesome. @mourner can we get this pulled!

[mourner]

Wow, honestly I failed to implement this back then, getting very weird behaviour on some browsers (when trying to scale an already scaled tile container), and decided to give up for some time. If this patch works in all browser/OS combinations including iPad and Android, this is really awesome! Did you test it extensively?

[danzel]

I've tested Chrome, Firefox, iPad, IE9 (where you don't get the zoom animation at all).
Can probably test android and Safari (mac) on Monday. It might not work on android as there are a few hacks for android in the zoom code already, we'll be able to disable it on android if so.

[danzel]

Doesn't work on android, which should be expected as android doesn't support double-translate. So I've made this disable itself on android for now, Tested on 2.3.5.

[danzel]

opera 12 works too :)

[mourner]

@danzel, thanks for a great contribution! I guess the zoom animation code is quite confusing at the moment, so was not very easy to figure out... Hopefully I'll refactor the thing into something more manageable in future.

[danzel]

@mourner thanks for merging this! If you think this was good, wait till you see tomorrows pull request ;-)

[mourner]

@danzel if it's the markers/vectors/popups zoom animation stuff I saw among your branches, can't wait to see it!

I worked on marker animation several weeks ago for some CloudMade mobile app demo, got it working nicely without much code on modern desktop browsers, but then got stuck with mobile Safari not handling simultaneous transforms very well (when touch-zooming, sometimes all markers animated well, and sometimes only some of them, while others stayed on the same position — not always apparent on the browser but constantly reproducible inside a UIWebView, weird stuff). Tried everything to fix it for 2 full-time days, thought my head was going to explode, but gave up eventually. :) Can't wait to see how you approached this.