Create a Deep Zoom Panorama with Windows Live

In this article I will show you how to use a combination of free tools and services to produce and host a high quality panorama. You will render this using Silverlight2 and display it geo-referenced on Virtual Earth. The combination of hosted storage and services from Windows Live gives us a powerful Rich Internet Application from a basic HTML page. The tools and services you will use are:

The final result below is made from eight photos taken of the Story Bridge in Brisbane, Australia at 6am.

Step 1 – Find a good Subject

Take you time to find a great landscape, cityscape or landmark. Choose a good time of day, dawn or dust offers better light then during the middle of the day.

prestitch_3 Developer

You will need to take a set of overlapping photos to allow the stitching software to compose the final image. For my panorama I used a 17mm wide angled ‘L’ lenses on a Canon 350d DSLR, each image is 8MP. The more level the set of photos the better the final composition will be. I used a tripod with a special panorama head to eliminate parallax effects but you can still get great results from handheld shots. The images should be taken from the same spot and in rapid succession to reduce inconsistencies between shots. At dawn the light can change very rapidly.

manustitch_3 Developer

This shows the shots overlapping, you don’t have to do anything manual here, you will use an automated stitching tool.

Step 2 – Windows Live Photo Gallery

Windows Live Photo Gallery is the consumer level photo tool for Windows. It offers a great importer, tagging, rating and publishing system for your photos. You download it as part of the Windows Live suit from http://get.live.com

getwl_3 Developer

Within the interface creating a panorama couldn’t be easier. You simply select the set of images, right click and choose “Create panoramic photo”

createpanoramic_3 Developer

The output is a 9745 x 3775 pixel stitch, colour corrected and aligned. The image file is 4.5MB so how can we effectively show this on the web with all of it resolution? For example this shows a full resolution section of the completed stitch:

stitchedmarkedarea_3 Developer

fullressnippet_3 Developer

Step 3 – Deep Zoom Composer

The solution is to use the new Deep Zoom technology from Silverlight2. The new control, multiscaleimage, streams in the best resolution sections of the image as the user needs it based on their interactivity and their screen resolution. And with the newly updated Deep Zoom Composer this is as simple to create as a few clicks. Download the composer from here.

dznew_thumb Developer

Create a new project. Import the stitched image and drag it onto the compose area. The composer allows you to show many images, arrange and resize them on the canvas using a set of helpful align tools. You will drop on the one image.

dzcomposition_thumb Developer

For this project we need to simply export the image as a composition, that is a single image. The other option, a collection, allows you to export a set of composed images that can be rearranged programmatically at runtime. You may have seen something like this at http://memorabilia.hardrock.com

For output type you want “Export Image and Silverlight Project”. This will produces the visual assets as well as a ready to use silverlight2 project. This project contains all the functionality needed for this application, you don’t need to write any .net Silverlight code.

dzexporting_thumb Developer

When the export completes, you can preview the Silverlight application in a browser.

dzexport_thumb Developer

Step 4 – Silverlight Streaming

The application is about 10MB. To serve this on the web we would need a web server configured to serve Silverlight XAP files and you would need to consider the performance requirements and the bandwidth. The Silverlight Streaming service from Windows Live solves these problems allowing you to rapidly deploy your Silverlight application using hosting provided by Microsoft to facilitate the growth of Silverlight. Sign up for a free 10GB account at http://silverlight.live.com

silverstreamsteps_thumb Developer

  1. Sign into your newly created account
  2. Goto Manage Applications
  3. Click Upload an Application
  4. Name the Application
  5. Create a Manifest file
  6. Zip the application
  7. Upload
  8. Get the Iframe snippet

silverstreamsteps2_thumb Developer

Give your application a Name.

In order to upload the application you need to add an XML file called a Manifest. It specifies the application properties so the Silverlight service knows what to do with the application. Here is one for the default output from Deep Zoom Composer that you can reuse:

<SilverlightApp>
  <version>2.0</version>
  <source>DeepZoomOutput.xap</source>
  <width>800</width>
  <height>600</height>
  <background>gray</background>
  <isWindowless>false</isWindowless>
</SilverlightApp>

This file needs to be put in the generated “C:UsersjohnDocumentsExpressionDeep Zoom Composer ProjectsLiveSideArticlesource imagesOutputSdilivesidearticleDeepZoomOutput_WebClientBin” folder next to the DeepZoomOutput.xap and GeneratedImages folder. Compress these three items into a zip file. In Windows Vista you can do this off the right click context menu – Send to -> Commpressed (zipped) folder.

silverstreamsteps3_thumb Developer

Upload the single compressed file to Silverlight Streaming. When it is uploaded you will get the snippets page with two options for how you can display this new application in your web pages.

silverstreamsteps4_thumb Developer

For this project you will use the simple Iframe, this is a perfect snippet for including in an article or blog. Do note Method 2, the three snippets, allow your Silverlight application to be embedded into the page without the use of an Iframe. Also note that for Video there is a specific Upload Video section that will encode your video and produce the video application for you.

You can preview your application by clicking on “Launch Application Test Page”

Step 5 – Virtual Earth

The final step for your project is to show the Deep Zoom image at the actual location you took the photo on a Virtual Earth map. This requires a simple HTML page with a little bit of Virtual Earth JavaScript. The concept is to the load the map in Aerial mode, add a pushpin and show it infobox (little popup) housing the Iframe with our newly created Silverlight application.

The complete HTML follows, for your project simple replace the Iframe and the Latitude/Longitude position. It can be handy to have a GPS with you to record the exact location when you take the photo. Or using http://maps.live.com later you can choose the location manually.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Silverlight Streaming Panoramas on Virtual Earth</title>
    <meta http-equiv="Content-Type"
                          content="text/html; charset=utf-8" />
      <script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1">
      </script>
      <style type="text/css">
          body
          {
              margin: 0px;
          }
          .customInfoBox-body
          {
              width: 420px;
              height: 260px;
              overflow: hidden;
              padding: 0px !important;
              top: 0 !important;
          }
          .customInfoBox-shadow
          {
              width: 420px;
              height: 260px;
          }
          .customInfoBox-with-leftBeak
          {
              width: 0 !important;
              height: 0 !important;
          }
          .VE_Pushpin_Popup_Title
          {
              padding: 5px;
          }
          .VE_Pushpin_Popup_Body
          {
              text-align: left;
              margin-left: 0px;
          }
      </style>
      <script type="text/javascript">
var map = null;
function GetMap()
{
    map = new VEMap("myMap");
    map.onLoadMap = onLoadMap;
    map.LoadMap(new VELatLong(-27.46212,153.03705)
        , 16
        , VEMapStyle.Aerial
        , false
        , VEMapMode.Mode2D
        , false);
}
function onLoadMap() {
    map.ClearInfoBoxStyles();
    var shape = new VEShape(VEShapeType.Pushpin
        , new VELatLong(-27.46212,153.03705));
    shape.SetTitle('The Story Bridge, Brisbane, Australia');
    var desc = '<iframe src="' +
'http://silverlight.services.live.com/invoke/31868/LiveSideArticlePanorama/iframe.html"' +
' scrolling="no" frameborder="0" style='width:400px; height:200px'></iframe>'
    shape.SetDescription(desc);
    shape.SetCustomIcon('pin.png');
    map.AddShape(shape);
    map.Pan(200,0);
    //The pan causes our infobox to close so we have to wait 2 secs
    setTimeout(function(){ if (shape) map.ShowInfoBox(shape)},2000);
}
      </script>
  </head>
  <body onload="GetMap();">
      <div id="myMap"
        style="position:relative; width:600px; height:600px;"></div>
  </body>
</html>

Conclusion

So in 5 easy steps and very little code we have a full interactive map with a pin that pops up a deep zoom Silverlight2 panorama allowing you explore your image at full resolution on demand. We only used free tools, it was pretty straightforward (I hope!) and all we need to host the Rich Application is a simple HTML page. I can even embed it in my blog as an Iframe. How cool is that?

With a little more effort you could personalise the HTML page and add more panoramas from all your travels.

I hope you have enjoyed this article and please post up links to your creations using these cool services.