[OpenLayers-Users] Smooth window resizing

[Richard Jones]

I am handling window.resize so that I can make the map cover the whole area of the browser window as the browser window is resized by the user.

The resize handler does this:

var frame = document.getElementById("map");
var windowheight = window.innerHeight;
var windowwidth = window.innerWidth;
frame.style.height = windowheight + "px";
frame.style.width = windowwidth + "px";

When using OpenLayers.Layer.Google the map resizes really smoothly in the browser when the window edge is being dragged.

But I want to use MapQuest Open maps, and their sample code uses OpenLayers.Layer.OSM like this:

arrayOSM = ["http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg",                        "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg",                      "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg",                        "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.jpg"];
arrayAerial = ["http://oatile1.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg",                             "http://oatile2.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg",                           "http://oatile3.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg",                          "http://oatile4.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg"];        
baseOSM = new OpenLayers.Layer.OSM("MapQuest-OSM Tiles", arrayOSM);
baseAerial = new OpenLayers.Layer.OSM("MapQuest Open Aerial Tiles", arrayAerial);
map.addLayer(baseOSM);
map.addLayer(baseAerial);

But while the browser is resized, there is a lot of flashing as all of the tiles are repeatedly cleared to white and then re-painted over and over again. It looks a lot less smooth than using the Google maps.

I'm assuming that the OpenLayers.Layer.OSM class is responsible for deciding how to paint the tiles, and is doing things differently  than OpenLayers.Layer.Google.

Is there a way to get MapQuest/OpenLayers.Layer.OSM to paint smoothly when resizing?