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).
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" "http://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="http://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.
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.
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.
I uploaded my copy of the file to my Skydrive site.
CP
PingBack from http://blog.a-foton.ru/2008/07/change-virtual-earth-background-color/
Love it! And even more the graphic design will love it. Thanks for the tip.
BTW to have the dashboard render correctly you have to make sure you add the doctype to the html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
John.
Thanks John. I've updated the post.
Perhaps you've noticed that I've added a little (non-Virtual Earth) map to my blog. Well, as the story
Not sure how well this works in IE but you can set the backgroundcolor in CSS if you wan't.. the trick is the !important hint...
Something like this:
#myMap { background: #B3C6D4 !important; }
works on my machine =)