Incorporating Map Functionality Using Script

This documentation is no longer available on MSDN, however it is available as a CHM download.

This topic describes how to access Bing Maps Silverlight Control functionality that is available through JavaScript when you load the scriptable map.

Using Scriptable Features

Once you have referenced the Bing Maps Silverlight Control in your Web page as described in the Using Script to Load a Silverlight Map topic, you can access the scriptable members of the map control, or you can use the control to create an object for any scriptable type. This allows you to access functionality using JavaScript.

Tip

Scriptable types accessible using JavaScript are marked with a [ScriptableTypeAttribute] in the Syntax section of the corresponding Bing Maps Silverlight Control API Reference topic. Similarly, scriptable members are marked with a [ScriptableMemberAttribute]. Scriptable types and members are also listed in the Bing Maps Silverlight Control Scriptable Types and Members topic.

Scriptable Members

Scriptable types have members that are themselves scriptable. The code below sets the zoom level of the map using the scriptable ZoomLevel property of the map.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Load a Silverlight Map</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script>
         var map = null;
         var slCtl = null;
         
         function  onSilverlightLoadedHtml(sender)
         {
            slCtl = document.getElementById('slCtl');
            map = slCtl.Content.map;

         }         

         function ZoomIn()
         {
            map.ZoomLevel+=1;
         }

      </script>
   </head>
   <body>
      <input name="ZoomInButton" type="button" onclick="ZoomIn();" value="Zoom In" />
      <div id="silverlightControlHost">
         <object id='slCtl' data="data:application/x-silverlight,"type="application/x-silverlight-2" width="800" height="500">
            <param name="source" value="https://dev.virtualearth.net/silverlight/mapcontrol/v1/Microsoft.Maps.MapControl.xap" />
            <param name="onLoad" value="onSilverlightLoadedHtml" />
            <param name="enableHtmlAccess" value="true" />
            <param name="initParams" value="ApplicationId=Your Key, Center=47.620574_-122.34942"/>
         </object>
      </div>    
   </body>

Scriptable Types

In order to use the functionality of scriptable types, first initialize them using the createObject method. The code below creates MapMode object to set the map style to Aerial.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Load a Silverlight Map</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script>
         var map = null;
         var slCtl = null;
         
         function  onSilverlightLoadedHtml(sender)
         {
            slCtl = document.getElementById('slCtl');
            map = slCtl.Content.map;

         }         

         function ChangeMapMode()
         {
            var mode = slCtl.Content.services.createObject("Microsoft.Maps.MapControl.AerialMode");
            map.Mode = mode;
         }

      </script>
   </head>
   <body>
      <input name="MapModeButton" type="button" onclick="ChangeMapMode();" value="Change Map Mode" />
      <div id="silverlightControlHost">
         <object id='slCtl' data="data:application/x-silverlight,"type="application/x-silverlight-2" width="800" height="500">
            <param name="source" value="https://dev.virtualearth.net/silverlight/mapcontrol/v1/Microsoft.Maps.MapControl.xap" />
            <param name="onLoad" value="onSilverlightLoadedHtml" />
            <param name="enableHtmlAccess" value="true" />
            <param name="initParams" value="ApplicationId=Your Key, ZoomLevel=10, Center=47.620574_-122.34942"/>
         </object>
      </div>    
   </body>
</html>