Change Virtual Earth Background Color

I recently got pinged about how to change the background color of the DIV element for a Virtual Earth map. Virtual Earth's CSS elements aren't documented (at least not officially), so perhaps this helps those who need/want this changed.

So, the typical scenario for loading a map is to call LoadMap() and by zooming all the way out you can see the map control's tan color behind the tiles (#E9E7D4).

image

The following code will render your basic Virtual Earth map. We'll use this to illustrate the necessary changes to make in order to modify the background color.

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

<html>
<head>
<title>Change Map BG Color</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- saved from url=(0014)about:internet -->
<script src="https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script>

var map = null;
// Loads and displays the map
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(36.17463, -115.12330), 1,'r' ,false);
}
</script>
</head>
<body onload="GetMap();" scroll="no" style="height:100%; width:100%" >
<div id='myMap' style="position: relative; width:640; height:480"></div>
</body>
</html>

The specific request came up because Virtual Earth doesn't "wrap around." Meaning, if you pan east or west you can't get back to where you started. You hit an edge (the end of the map control tiles) and have to go back the opposite direction. Certainly not ideal, so, if you have an application with points that span both the eastern and western half of the Pacific Ocean you may end up seeing the map zoomed out completely. Well, the tan doesn't look so great, so we can change the color to match the oceans - #B3C6D4.

image

So pretty!

Eh-hem. Ah, so, what are the code changes? You'll want to use onLoadMap property so when the map loads the color will be there and you'll want to attach an onchangeview event to the map control so the color remains the same when the map view changes. Differences from the above code are highlighted in red below. 

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

<html>
<head>
<title>Change Map BG Color</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- saved from url=(0014)about:internet -->
<script src="https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script>

var e=null;
var map = null;

// Loads and displays the map
function GetMap()
{
e = document.getElementById("myMap");
map = new VEMap('myMap');
map.onLoadMap = changeBGColor;
map.LoadMap(new VELatLong(36.17463, -115.12330), 1,'r' ,false);
map.AttachEvent("onchangeview", changeBGColor);
}
function changeBGColor()
{
if(e)
{
e.style.backgroundColor = "#B3C6D4";
}
}           

</script>
</head>
<body onload="GetMap();" scroll="no" style="height:100%; width:100%" >
<div id='myMap' style="position: relative; width:640; height:480"></div>
</body>
</html>

I simply had to override the CSS for the DIV element. You can also attach other events like onchangemapstyle for when users switch to aerial view to change the background to the cool dark blue (#020514) or any RGB color.

 image

I uploaded my copy of the file to my Skydrive site.

CP