See Joel Program

May 29, 2008

Force Virtual Earth Road Style Maps to Shaded Style

Filed under: AJAX, JavaScript, Virtual Earth — Joel Rumerman @ 11:18 am

With Virtual Earth 6.1 there’s a new map style called Shaded that places topographical information on the map in the road view. It’s sort of a combination of Aerial and Road styles and is set to replace the Road view. In fact, maps.live.com uses the new Shaded map style instead of the previous Road view so whenever you think you’re viewing the Road style you’re actually viewing the Shaded style.

The shaded map can be accessed through the VEMapStyle.Shaded enumeration value and we can place our custom maps into this mode by calling SetMapStyle and passing in VEMapStyle.Shaded.

myMap.SetMapStyle(VEMapStyle.Shaded);

This is great and all, but when the user clicks the “Road” button in the map tool bar or presses “r” or “R” on the keyboard, the map switches to the Road view rather than the Shaded view. This is annoying and there’s no clear way using the VE API to get have it automatically switch to Shaded instead.

One solution, proposed by Chris Pietschmann on his blog is to register a function to the “onchangemapstyle” event of the map and when it gets executed, inspect the event arguments and re-execute SetMapStyle with the correct VEMapStyle if the VEMapStyle is Road. (For a full explanation and code see his blog entry.)

This solution should work perfectly, but doesn’t. The problem with that solution is that the zoom buttons don’t disable and enable properly when switching from Birds Eye back into Road view. Using Chris’ solution, if you’re zoomed in all the way on Birds Eye so that the zoom-in button is disabled and switch back to Road view the zoom buttons don’t properly update based upon the Road view’s current zoom level, but rather remain disabled / enabled as they were when you were using Birds Eye. A small problem, but a problem none-the-less. (Moreover, this is a MSFT bug, not Chris’, but we work with what we’ve got.)

So because of this problem I devised another solution that replaces the original SetMapStyle method with a custom one.

myMap.vemapcontrol.origSetMapStyle = myMap.vemapcontrol.SetMapStyle;
myMap.vemapcontrol.SetMapStyle = function(a)
{
  if (a === “r” || a === “R”)
  {
    a = “s”;
  }
  this.origSetMapStyle(a);
}

What I’m doing here is replacing the real SetMapStyle method on the internal vemapcontrol with a custom implementation that replaces value of a with “s” (Shaded) when it was originally “r” (Road). Once, I’ve replaced the value, I call the original SetMapStyle method that I stored off in a variable assigned to vemapcontrol.

Now, whenever the map changes map style, which occurs when the user clicks one of the styles on the toolbar or presses one of the associated keys on the keyboard, the new method takes over and alters the map style as needed.

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: