Perils of upgrading - VE4 and MS Ajax Beta 2 - Dylan's Ride Blog

If you don't care about the technical nuts and bolts of mapping, ignore this one.

This site uses Virtual Earth for mapping, apart from the routes maps for non IE users which are done with Google maps, as the mouse over stuff doesn't work very well with FF and virtual earth (note to self - see if it works better in VE 4). VE has better detail, and I guess I'm used to the MS way of doing stuff.

Everything used to work fine, until this weekend, when I upgraded from MS Ajax beta 1 to Beta 2, and suddenly the route maps died with IE7.

I think I know what is going wrong, and will detail it here. Why it did work before puzzles me, although as it seems to be related to stuff loading, it may have been a timing issue.

If you want to use MS Ajax and Virtual Earth, with MS ajax providing the stuff you are drawing, here's how it should be done (in pseudo code).

//inline scrpt to call the map load event
addLoadEvent(MapLoad);

//does the on map load stuff
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{ window.onload = func; }
else
{ window.onload = function()
{ oldonload(); func(); }
}
}

//the page has loaded so init the map
function MapLoad()
{

mymap = new VEMap('myMap');
map.onLoadMap = OnMapLoad();
map.LoadMap(new VELatLong(54.40, -0.85), 9 ,'r', false);

}

//this gets called when the map is fully loaded and ready to be drawn on
function OnMapLoad()
{
rtn = my.webservice.mapData.GetStuffs(args, OnStuffRequestComplete, OnTimeout, OnError);
}

function OnStuffRequestComplete(result)
{
//code which renders the return values from the call back

//yada yada

}

This is a bit complex, as there are several steps, but ensures you don't get errors caused by doing stuff before it's ready. Ie. don't load the map until the page loads (the javascripts may need to be loaded - so don't assume this is instant). Only when the map has loaded (and of course MS Ajax is loaded by this point to), can you attempt to call the webservice, which returns and draws stuff on the map. I guess it worked before as IE6 was slower and everything was ready by the time the webservice worked. I'm pretty sure the problem I had was timing related, as it would usually work if you hit refresh, ie all the scripts and map tiles were loaded into cache.

In the end I have made a work around (to buy me time whilst I examaine this in more detail), which uses server code to dynamically generate javascript, which draws the route. This increases the initial page load size, but doesn't seem to be any slower, as there's a certain overhead in doing stuff via Ajax anyway. When I'm sure I fully understand what is going on, I'll port the map code to load it in the way I described above, as I'm doing it this way for something else, and it seems to work.

 Postscript:

The reason I was using VE 3 was that the first time I used VE 4 and MS Ajax it all went horribly wrong and didn't work. Since then, I have had better things to do than chase what may have been an insoluble problem. After the recent fun and games with upgrading to Ajax B2, I noticed a posting on the forums about the loading order being critical to making Ajax & VE 4 play nicely. So, I tried again, and it seems to work. To make it work, there's a couple of things that need to be just so, whereas before you could get away with them being a bit more haphazard.

Make sure the Script manager is before the VE reference. When you use master pages, it can all get a bit confusing, as to what is happening when. You can stick the VE reference just before the control at first just to get it working. As the script manager is usually somewhere in the page inside of the form tag, and may consider it good practice to reference JS file in the head of the document, or at least as far up the page as possible, it's pretty easy to make this mistake.

The stuff I mentioned before about waiting for each component to initialise is still important.

Oh, and one other thing, if you get some odd javascript errors about certain items not being as expected, check the names of clientside objects in your HTML. I had CSS which refered to a DIV called body, which seems to mess up VE. Changing the name of the div to 'pagebody' and it all seems to be happy.

Post-postscript:

The IE7 issue didn't go away, and I was getting 'unexpected call to method or property access' errors when I tried to draw points. It looks like the onLoad function is getting called too early in IE7 with MS Ajax Beta 2. Having spent some time trashing, I found the solution on the virtual earth forums. The trick is to hook the event for the page loading, not the MS Ajax onLoad event. I have changed the example to reflect this.

 MS Ajax RC (17 Dec 2006)

Just updated the project to MS Ajax RC. There's a lot of changes to name spaces, and the webconfig, but there doesn't appear to be anything breaking. I also noticed that whereas previously I would get various errors including 'unexpected call to method or property access and other errors with VE getting upset when trying to draw ploylines, these seem to have gone anway. If you are using VE and MS Ajax, I would recommend using the RC as it seems to be more stable than either of the two betas.