Creating mashups using the Virtual Earth Interactive SDK

One of the cool things we are doing with the Windows Live Dev site at dev.live.com is hosting mashups on the site itself for samples, documentation, etc. The Virtual Earth team recently released a new Virtual Earth Interactive SDK mashup at dev.live.com/virtualearth/sdk recently announced on the the Virtual Earth developer blog. The Virtual Earth team provided me with a cool demo script to show at TechEd next week that highlights some of the cool features of the new VE Interactive SDK. Here is a fun simple demo script that you can try out to create a Virtual Earth mashup web page component:

  • Go to dev.live.com/virtualearth/sdk.

  • Open the page, and say something like “what do I want to do? Let’s draw a polygon on the map”.

  • Expand Draw lines, and then click on Draw a polygon.

  • The map changes and shows a polygon.

  • “OK, so that’s what I want to do, so let’s get the code to do it” .

  • Switch to the Source Code tab and click the Copy button.

    1. Note: if you select the code and copy it manually, it preserves the whitespace and looks better when you paste it into Notepad. If you choose the Copy button, it is faster, but doesn’t look as good when you paste it into Notepad. If you paste into a new HTML file in Visual Studio, you get all the nice formatting, so that might be the best way to go.
  • Open Notepad (or a new HTML in Visual Studio) and paste in the code you just copied.

  • Save the file to the desktop as test.html.

  • Minimize everything, and double-click test.html.

  • When the page loads, click the security bar and choose Allow Blocked Content. Depending on the audience, maybe explain that the security only pops up when running locally.

    1. Alternately, if you are running IIS, save the file in a Web directory and then open it from the browser—no security message.
  • Click on the Draw a Polygon button to see that it does what you expected—draws a polygon on the map.

    Some comments about the Virtual Earth Interactive SDK:

  1. You don’t need to be a professional developer to add maps to your web pages. The interactive SDK makes it very simple to get started.
  2. For active web developers, the interactive SDK still provides the full reference SDK on its own tab.
  3. The interactive SDK is a mashup that shows you how to build a mashup—it’s a self-describing “meta” SDK.