Getting Started

In Script / HTML:

  • Add a reference to the JavaScript map control in the page where your Silverlight application will be shown.
<head>
    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
</head>
  • Copy views.js to your web project.
  • Add a reference to views.js in the page where your Silverlight application will be shown.
<head>
    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
    <script type="text/javascript" src="views.js"></script>
</head>
  • Add a DIV to your page and give it a name.
<body>
    <div id='mapContainer' style="position:relative; width:640px; height:480px;"></div>
</body>
  • Create a local JavaScript variable called silverlight and set it to the Silverlight instance. This variable is used in views.js and can be set in the onLoad event from the Silverlight plugin.
<body>
    <script type="text/javascript">
        var silverlight = null;
        function pluginLoaded(sender,args)
        {
            silverlight = document.getElementById('Silverlight');
        }
    </script>

    ...

    <div id="silverlightControlHost" style="position:absolute; width:300px; height:480px; left:645px; top:0px; z-index:2">
        <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" style="width:300px;height:480px;border-width:0;" id="Silverlight">
            <param name="onLoad" value="pluginLoaded" />
            ...
        </object>
    </div>
</body>

In Silverlight:

  • Add a reference to ScriptInterop.dll and VIEWS.dll to your Silverlight project.
  • Handle the Loaded event of your Silverlight startup page (usually Page.cs). You can subscribe to the Loaded event in the Page constructor.
public Page()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(Page_Loaded);
}
  • Inside the Page_Loaded event, create a new VEMap instance and pass the name of the DIV you created above.
void Page_Loaded(object sender, RoutedEventArgs e)
{
    map = new VEMap("mapContainer");
}
  • Finally, register the Silverlight wrapper instance with JavaScript as the variable SLMAP. This connects the JavaScript event handling in views.js up to the Silverlight wrapper so that map events are routed properly back into managed code.
void Page_Loaded(object sender, RoutedEventArgs e)
{
    map = new VEMap("mapContainer");
    HtmlPage.RegisterScriptableObject("SLMAP", map);
}


Please note that all of these steps are illustrated in the SilverlightMap sample included in source control. In fact, the SilverlightMap sample uses a separate controller class (SLController.cs) to cleanly separate map control logic from basic UI logic.

Last edited Jun 30, 2008 at 6:22 PM by jaredbienz, version 4

Comments

china_sky Dec 15, 2008 at 8:44 AM 
`p1

maidrees Aug 6, 2008 at 7:33 AM 
Yes. very nice peice of code working ..
However,can we have the VE inside a silverlight Canvas, not in a div

Thanks
Mohammed Idrees

darkcrawler Jul 29, 2008 at 5:03 PM 
You must add this:
using VIEWS;
using System.Windows.Browser;

then define the map:
private VEMap map;

and dont forget this:
map.LoadMap(); after HtmlPage.RegisterScriptableObject("SLMAP", map);

This is a nice example, but i would like to have the VE inside a Silverlight canvas, not in a div.
Anyway, thanks!
Luis

aolive Jul 25, 2008 at 10:04 PM 
I get an error saying "The name 'map' does not exist in the current context".
And indeed, where is it defined...?
Do you know what the problem could be?

Thank you