Virtual Earth: Convert Road Map Style to Shaded Like maps.live.com does

Dec 26, 2007  • Mapping

What is the Shaded map Style?

If you’ve used maps.live.com and Virtual Earth, then you’ve probably noticed that the Road map style in the Virtual Earth API isn’t the same as it is on maps.live.com. This is because the Road map style on maps.live.com is actually not using the VEMapStyle.Road map style, but instead is using VEMapStyle.Shaded. The VEMapStyle.Shaded map style is the standard Road style with Shaded Contours drawn on the map, and is new to Virtual Earth v6.0. In this article, I will show you how to hook in to Virtual Earth and make it show the Shaded map style when ever the user selects the Road style on the map dashboard.

Replace Road Map Style with the New Shaded Map Style

Step 1: This article assumes you have a basic understanding of Virtual Earth. If you don’t, then go check out the following article before going on: Virtual Earth: Getting Started - Adding a basic Map to a page

Step 2: Set the Map to Load with the Shaded map style showing. The best way to do this is to send the Shaded Map Style as the Map Style Paramater of the maps LoadMap method.

map.LoadMap(new VELatLong(47.6, -122.33), 7, VEMapStyle.Shaded);

**Step 3: **Attach an Event Handler to the Virtual Earth “onchangemapstyle” event.

To do this we first need to create our StyleChangeHandler method:

function StyleChangeHandler(e) { }

Then, after the LoadMap method is called, we will use the maps AttachEvent method to attach our event handlers:

map.AttachEvent("onchangemapstyle", StyleChangeHandler);

Note: The variable named “map” is the global variable that holds a reference to our instance of the Virtual Earth Map. If you are using a different variable name, then you’ll need to change it to your name through-out the rest of the article.

Step 4: Now that we have our event handler in place, we need to add code to it that will change the map style to Shaded when ever the map style gets changed to Road. Add the following code to the StyleChangedHandler:

if (map.GetMapStyle() == VEMapStyle.Road) { map.SetMapStyle(VEMapStyle.Shaded); }

Step 5: Now, run the page and you’ll see the new Shaded map style in place of the Road map style, just like maps.live.com.

Complete Code For This Article

For easier reference, and so you don’t have to type everything in yourself; here’s the complete code from this article:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" mce_src="</script">http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>