Map contained in an IE 6 modal dialog box loads slower and slower
Hi,
I'm usingInternet Explorer 6 SP1.
The slowdown I'm talking about here doesnot manifest itself inInternet Explorer 7.
I've placed a map inside an Internet Explorer modal dialog box. Please check this referencehttp://msdn2.microsoft.com/en-us/library/ms536759.aspx for more details.
The syntax is this: window.showModalDialog('reloadingWebPageWithMapSlower.htm','','dialogWidth:768px;dialogHeight:600px;status:no;dialogHide:no;resizable:no;help:no;scroll:no');
1. The problem is thateach time the Internet Explorer modal dialog box is closed and opened again, the Microsoft Earth Map control is loading slower and slower.
This slowdowndoes not depend on the pins being added to the map or not being added at all.
This slowdowndoes not depend on calling SetMapView to findthe most suitable zoom level required to fit the entire region into the map control.
The slow downis just there and can be noticed in anymap contained in an Internet Explorer modal dialog box.
On my computer runningInternet Explorer 6 SP1, with a AMD Sempron 2200+ processor, 1GByte RAM with cable TV connection to the Internet, here are the map loading times, in seconds, for the sample below:
The slowdown doesnot appear on Internet Explorer 7.
Open/close modal window Loading time (seconds)
1st time 0.453(!)
2nd time 0.437
3rd time 0.469
4th time 0.515
5th time 0.578
6th time 0.609
7th time 0.671
8th time 0.719
9th time 0.781
10th time 0.828(!)
It can be easily seen that map loading time contained in a modal dialog box has almost doubled:
launcher.htm
<
html><
head><title>Web Page Launcher</title>
<
scriptlanguage="javascript"type="text/javascript">function
OpenWebPageWithMap(){
if(radioWindow.checked)
{
window.open("reloadingWebPageWithMapSlower.htm",null,"width=768,height=600,left=30, top=30, status=no,toolbar=no,menubar=no,scrollbars= no,location=yes,resizable:no");
}
else
{
window.showModalDialog('reloadingWebPageWithMapSlower.htm','','dialogWidth:768px;dialogHeight:600px;status:no;dialogHide:no;resizable:no;help:no;scroll:no');
}
}
</
script></
head><
body>
<divstyle="z-index: 100; left: 232px; width: 560px; font-family: Tahoma; position: absolute;
top: 48px; height: 32px; text-decoration: underline">
Testing reloading a web page containing a map</div>
<inputid="buttonOpenWebPage"style="z-index: 101; left: 96px; position: absolute;
top: 200px"type="button"value="Open web page with map"language="javascript"onclick="return OpenWebPageWithMap()"/>
<inputid="radioModalDialogBox"checked="checked"name="howToOpen"style="z-index: 103;
left: 96px; position: absolute; top: 128px"type="radio"/>
<inputid="radioWindow"name="howToOpen"style="z-index: 104; left: 96px; position: absolute;
top: 152px"type="radio"/>
<divstyle="z-index: 105; left: 120px; width: 472px; font-family: Tahoma; position: absolute;
top: 128px; height: 24px;">
map in modal dialog box (slower and slower loading time)</div>
<divstyle="z-index: 106; left: 120px; width: 472px; font-family: Tahoma; position: absolute;
top: 152px; height: 24px;">
map in window (good, approximately constant loading time)</div>
</
body></
html>reloadingWebPageWithMapSlower.htm
<
html><head>
<title>Reloading the map in an Internet Explorer modal dialog is slower and slower</title>
<metahttp-equiv="Pragma"content="no-cache"/>
<metahttp-equiv="Expires"content="-1"/>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<scriptsrc='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5'></script>
<scripttype="text/javascript">
var map =null;
var pinID = 0;
var latitude = 42.098;
var longitude = -102.216;
var zoomLevel=10;
var startTime1;
var endTime1;
var startTime2;
var endTime2;
var locs =new Array();
function GetMap()
{
startTime1 =new Date().getTime();
map =new VEMap('myMap');
map.LoadMap(new VELatLong(latitude, longitude), zoomLevel ,'r' ,false,VEMapMode.Mode2D);
LoadLocations();
map.SetMapView(locs);// it will set the zoom level to accommodate all the pushpins
endTime1=new Date().getTime();
startTime2= endTime1;
AddPins();
endTime2 =new Date().getTime();
document.getElementById('labelLoadingTime').innerText ='Load map and set appropriate zoom level: ' +((endTime1-startTime1)/1000)+' seconds\r\n' +
'Added ' + pinID +' pins: ' +((endTime2-startTime2)/1000)+' seconds\r\n'+
'Total: '+ ((endTime2-startTime1)/1000)+' seconds';
}
function AddPins()
{
AddPushpin (locs[0],"Some title","Some text");
AddPushpin (locs[1],"Some title","Some text");
}
function AddPushpin(location, title, details)
{
pinID++;
var pin =new VEShape(VEShapeType.Pushpin, location);
pin.SetTitle(title);
pin.SetDescription(details);
map.AddShape(pin);
}
function OnLoadPage()
{
GetMap();
}
function OnUnloadPage()
{
DisposeMap();
}
function DisposeMap()
{
locs.length =0;//free the array
if (map !=null)
{
map.DeleteAllShapes();
map.Dispose();
map=null;
}
}
function LoadLocations()
{
locs.push(new VELatLong(latitude-8, longitude-8));
locs.push(new VELatLong(latitude+8, longitude+8));
}
function buttonClose_onclick()
{
window.close();
}
</script>
</head>
<bodyonload="OnLoadPage();"onunload="OnUnloadPage();">
<inputid="buttonClose"style="z-index: 101; left: 552px; position: absolute; top: 542px; width: 104px;"
type="button"value="Close window"onclick="return buttonClose_onclick()"/>
<divid="myMap"style="z-index: 104; left: 128px; width: 420px; position: absolute;
top: 16px; height: 500px">
</div>
<divid="labelLoadingTime"style="font-weight: bold; font-size: x-small; z-index: 103; left: 128px;
width: 408px; font-family: Tahoma; position: absolute; top: 526px; height: 40px">
Loading time:
</div>
</body>
</html>
