PLEASE NOTE: This article refers to an old version of Virtual Earth. The technique shown is not recommended as it will not be easily upgraded to the latest version. The recommended approach is to create a completely custom dashboard. I will post an example of this in comming weeks - John.
Virtual Earth comes with a full featured control panel called the "Dashboard". You can turn the dashboard off and design your own completely custom controls:
map.HideDashboard();
But this is a large amount of work, for most of us simply changing the colours and icons of the exisiting dashboard would be sufficent. But working out what the classes are and the icons that are used is a time consuming and error prone task. Until now....
In this article i go through all the elements of the dashboard and document the IDs, classes and filenames used.
The frame
The dashboard itself is given an ID with the name you gave your map DIV appended to the start. So if your map Div was called "myMap" the dashboard div is: "myMap_dashboard"
The dashboard has two parts, the top "navAction_header" and the bottom "dashboardContainerDiv"
| Element |
Filename |
ID |
CSS |
Notes |
 |
HeaderBackGroundGraphic.gif |
navAction_header |
header with3D |
Border set in css |
 |
na |
dashboardContainerDiv |
dashboardContainerDiv |
Border is set in css (no top) |
Scale bar
The scalebar has two different modes, Ortho (normal) and Oblique (birdseye). The scalebar is essentially an image with another image for the slider and two images for the plus and minus rollover states
Ortho (normal)
| Element |
Filename |
ID |
CSS |
Notes |
 |
ZoomBarOrthoBackground.gif |
OrthoZoomBar (image set as background) |
ZoomBar |
Notice the plus and minus are actaully part of the zoombar |
 |
ZoomPlusHover.gif |
#navAction_obliqueZoomBar_plus:hover |
ZoomBar_plus |
Same graphic is used in Oblique mode |
 |
ZoomMinusHover.gif |
#navAction_obliqueZoomBar_minus:hover |
ZoomBar_minus |
Same graphic is used in Oblique mode |
 |
ZoomThumb.gif |
navAction_orthoZoomBar_slider |
ZoomBar_slider |
Same graphic is used in Oblique mode |
 |
ZoomThumbHover.gif |
#navAction_obliqueZoomBar_slider:hover |
ZoomBar_slider |
Same graphic is used in Oblique mode |
Oblique (birdseye)
| Element |
Filename |
ID |
CSS |
Notes |
 |
ZoomBarObliqueBackground.gif |
ObliqueZoomBar |
ZoomBar |
Notice the plus and minus are actaully part of the zoombar |
| |
ZoomPlusHover.gif |
#navAction_obliqueZoomBar_plus:hover |
ZoomBar_plus |
Same graphic is used in Oblique mode |
| |
ZoomMinusHover.gif |
#navAction_obliqueZoomBar_minus:hover |
ZoomBar_minus |
Same graphic is used in Oblique mode |
| |
ZoomThumb.gif |
navAction_orthoZoomBar_slider |
ZoomBar_slider |
Same graphic is used in Oblique mode |
| |
ZoomThumbHover.gif |
#navAction_obliqueZoomBar_slider:hover |
ZoomBar_slider |
Same graphic is used in Oblique mode |
2D / 3D buttons
These button are actually html with rollover and selected state getting a background
| Element |
Filename |
ID |
CSS |
Notes |
  |
XDButton.gif, XDButtonHover.gif |
(see below) |
MapMode |
Background gradients for buttons |
 |
none, XDButton.gif, XDButtonHover.gif |
navAction_FlatlandMapMode, #navAction_FlatlandMapMode:hover (hover), div.FlatlandMapMode #navAction_FlatlandMapMode (selected) |
MapMode (off) |
3 states |
 |
none, XDButton.gif, XDButtonHover.gif |
navAction_View3DMapMode, #navAction_View3DMapMode:hover (hover), div.View3DMapMode #navAction_View3DMapMode (selected) |
MapMode (off) |
3 states |
Road / Aerial / Hybrid buttons
These buttons are simple css, with the usual 3 states
| Element |
Filename |
ID |
CSS |
Notes |
 |
na |
navAction_RoadMapStyle, .Dashboard #navAction_RoadMapStyle:hover (hover), #navAction_mapStyleCell.RoadMapStyle #navAction_RoadMapStyle (selected) |
MapStyle (off) |
3 states |
 |
na |
navAction_AerialMapStyle, .Dashboard #navAction_AerialMapStyle:hover (hover), #navAction_mapStyleCell.AerialMapStyle #navAction_AerialMapStyle (selected) |
MapStyle (off) |
3 states |
 |
na |
navAction_HybridMapStyle, .Dashboard #navAction_HybridMapStyle:hover (hover), #navAction_mapStyleCell.HybridMapStyle #navAction_HybridMapStyle (selected) |
MapStyle (off) |
3 states |
Normal / Birdseye selection
These button control switching from Normal (ortho) to Birdseye (oblique). They both have the usual 3 states but the birdseye has a 4th state of disabled
| Element |
Filename |
ID |
CSS |
Notes |
 |
2DOrthoIconUp.gif |
navAction_OrthoMapView |
div.FlatlandMapMode #navAction_OrthoMapView |
Normal state (ie in birdseye mode) |
 |
2DOrthoIconHover.gif |
navAction_OrthoMapView |
div.FlatlandMapMode #navAction_OrthoMapView:hover |
Hover state |
 |
2DOrthoIconCurrent.gif |
navAction_OrthoMapView |
div.FlatlandMapMode #navAction_mapViewCell.OrthoView #navAction_OrthoMapView |
Selected state |
 |
BirdsEyeIconGray.gif |
navAction_ObliqueMapView |
.ObliqueMapView_disabled |
Disabled state (ie no birdseye available) |
 |
BirdsEyeIconUp.gif |
navAction_ObliqueMapView |
div.FlatlandMapMode #navAction_ObliqueMapView |
Normal state (ie not in birdseye mode) |
 |
BirdsEyeIconHover.gif |
navAction_ObliqueMapView |
div.FlatlandMapMode #navAction_mapViewCell.OrthoView #navAction_ObliqueMapView:hover |
Hover state |
 |
BirdsEyeIconCurrent.gif |
navAction_ObliqueMapView |
div.FlatlandMapMode #navAction_mapViewCell.ObliqueView #navAction_ObliqueMapView |
Selected state |
3D mode view buttons
When in 3D mode these button allow you to adjust your view. They have a rollover but no selected state.
| Element |
Filename |
ID |
CSS |
Notes |
 |
OrthoIconUP.gif |
navAction_OrthoMapView |
div.View3DMapMode #navAction_OrthoMapView |
Normal |
 |
OrthoIconCurrentHover.gif |
navAction_OrthoMapView |
div.View3DMapMode #navAction_OrthoMapView:hover |
Hover |
 |
ObliqueIconUP.gif |
navAction_ObliqueMapView |
div.View3DMapMode #navAction_ObliqueMapView |
Normal |
 |
ObliqueIconCurrentHover.gif |
navAction_ObliqueMapView |
div.View3DMapMode #navAction_ObliqueMapView:hover |
Hover |
 |
StreetsideIconUP.gif |
navAction_StreetSideMapView |
.StreetSideMapView |
Normal |
 |
StreetsideIconOver.gif |
navAction_StreetSideMapView |
#navAction_StreetSideMapView:hover |
Hover - different conventions for some reason? |
Birdseye Directions
The control is actually quite simply when you break it apart. It consists of a background, an arrow with 4 directions and three states for the NSEW labels
| Element |
Filename |
ID |
CSS |
Notes |
 |
compass_bg.gif |
obliqueCompassContainer |
#obliqueCompassContainer |
compass background |
 |
circle_disabled.gif |
obliqueCompassPointN, obliqueCompassPointS, obliqueCompassPointE, obliqueCompassPointW |
.obliqueCompassPointOff |
(Selected) Each of the labels is simply changed css classes |
 |
circle_enabled.gif |
obliqueCompassPointN, obliqueCompassPointS, obliqueCompassPointE, obliqueCompassPointW |
.obliqueCompassPointOn |
Each of the labels is simply changed css classes |
 |
circle_hover.gif |
obliqueCompassPointN, obliqueCompassPointS, obliqueCompassPointE, obliqueCompassPointW |
.obliqueCompassPointHover |
Each of the labels is simply changed css classes |
 |
arrow_u.gif |
(no ID on div!) |
.obliqueCompassArrowU |
The same div is simply changed css classes |
 |
arrow_d.gif |
(no ID on div!) |
.obliqueCompassArrowD |
The same div is simply changed css classes |
 |
arrow_l.gif |
(no ID on div!) |
.obliqueCompassArrowL |
The same div is simply changed css classes |
 |
arrow_r.gif |
(no ID on div!) |
.obliqueCompassArrowR |
The same div is simply changed css classes |
Conclusions
Hopefully this article will arm you with the reference you need to go and create amazing dashboards for your current VE project. Please post your links on my blog to show off what you have acheived!