Microsoft.Maps.Themes.BingTheme API Reference
Bing Services
This section contains reference documentation for the Microsoft.Maps.Themes.BingTheme module, which allows you to use the latest Bing Maps site design.
 Note: |
|---|
| Before you can access the Microsoft.Maps.Themes.BingTheme functionality, you must first load this module using the loadModule method. Information about loading modules is in the Module Loading Methods topic. |
BingTheme Features
When loaded, the Microsoft.Maps.Themes.BingTheme module updates certain visual aspects of the map control with the latest Bing Maps design. To see the design changes, simply access the corresponding API after loading the Microsoft.Maps.Themes.BingTheme module. The affected map control features are listed below.
-
Map navigation bar The style, position, and size of the map navigation bar elements is updated, including the map style drop-down, zoom, pan, and rotate controls.
-
Location bar The style, position, and size of the location bar, which describes the map context (such as “World”), is updated.
-
Pushpins The style and behavior of pushpins are updated to match the Bing Maps site. This includes the ability to associate a pushpin with an info box, pushpin hover and click behavior, and pushpin color changes based on the current imagery. Also, a new ‘pinmicro’ value is available for the pushpin typeName option. For pushpin options you can set, see PushpinOptions.
-
Polygons The style and behavior of polygons changes to match the latest Bing Maps design. This includes providing info boxes for hover and click events.
-
Info boxes The style and behavior of info boxes are updated to match the Bing Maps site. This includes the ability to associate an info box with a pushpin, info box styles for hover and click events, and info box color changes based on the current imagery. For info box options you can set, see InfoboxOptions.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', { callback: themesModuleLoaded });
}
function themesModuleLoaded()
{
// Load the map using the Bing theme style.
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials: "Bing Maps Key", center: new Microsoft.Maps.Location(47.5, -122.3), zoom: 9, theme: new Microsoft.Maps.Themes.BingTheme() });
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>
</html>
Additional Example: For an example of how to set pushpin options for a pushpin when using the Microsoft.Maps.Themes.BingTheme, see the example in EntityState Enumeration.
