Enabling the New Style in the Bing Maps AJAX Control



A while ago Chris Pendleton had blogged about the new map style that has become the default in our consumer facing AJAX and Silverlight sites. With the latest update to our Bing Maps AJAX control you can now also optionally enable this new style in your own applications through VEMapOptions-properties. In fact there are four new options:

  • VEMapOptions.UseEnhancedRoadStyle is a Boolean value that allows you to enable the new map style. Default is false.
  • VEMapOptions.DashboardColor sets the colour of the Dashboard. Valid values are “blue” and “black”. Default is “blue”.
  • VEMapOptions.EnableSearchLogo allows you to activate or deactivate a mouseover-event for the Bing logo. This is a Boolean value with default “false”. If set to “true”, a search-box flies out when you hover over the Bing logo. A search will be re-directed to Bing.
  • VEMapOptions.EnableClickableLogo allows you to activate or deactivate a link behind the Bing logo. This is a Boolean value with default “false”. If set to “true”, a click on this logo will open the Bing Maps consumer site with the zoom-level and centre-point that you currently have in the AJAX control.

 

002

Below you’ll find a complete code sample that enables all of the new options.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
   <title>Bing Maps – New Style</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=6.3″></script>
  <script type=”text/javascript”>
    var map = null;
    function GetMap() {
      map = new VEMap(‘myMap’);
     
      var mapOptions = new VEMapOptions();
      mapOptions.DashboardColor = ‘black’;
      mapOptions.EnableClickableLogo = true;
      mapOptions.UseEnhancedRoadStyle = true;
      mapOptions.EnableSearchLogo =  true;

      map.LoadMap(new VELatLong(49.03445642441512, 17.479999735951423), 3, null, false, VEMapMode.Mode2D, true, 0, mapOptions);
    }
  </script> 
</head>
<body onload=”GetMap();”>
  <div id=’myMap’ style=”position:relative; width:600px; height:400px;”></div>
</body>
</html> 



^JK


 



 















				    




                

                                
            

                




        				

			
Leave a Reply