Export (0) Print
Expand All

Microsoft.Maps.Themes.BingTheme API Reference

Bing

This section contains reference documentation for the Microsoft.Maps.Themes.BingTheme module, which allows you to use the latest Bing Maps site design.

Hh921953.note(en-us,MSDN.10).gifNote:
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.

BingTheme Limitations

When the Microsoft.Maps.Themes.BingTheme module is used with the Advance Shapes module, the module disables the ability to support complex polygons. This is done because the Microsoft.Maps.Themes.BingTheme module is meant to emulate the look and feel of the Bing Maps consumer site, which doesn't use complex polygons.

The Microsoft.Maps.Themes.BingTheme module also overrides any custom styles to pushpins and infoboxes. The is done because this module’s UI is meant to match the Bing Maps consumer site.

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.

Show:
© 2015 Microsoft