MSR HD View & Virtual Earth

Have you ever heard about ‘MSR HD View’? You haven’t? It is an awesome tool which has been developed by Microsoft Research to bring gigapixel images to the web. The example below is a completely zoomed out panorama with 3.7 gigapixel…

HD View zoomed out

… and you can get that close:

HD View zommed in

Check out the MSR HD View homepage to find some examples and to get started.

I was wondering if I could combine this awesome viewer with Virtual Earth and it turned out to be lots of fun. You can have a look at a sample implementation here.

MSR HD View in VE-Infobox

Well I’m not really much of a photographer and my equipment is not really high-end either so bare with me if the quality of the image is not too impressing but how did I do it?

  1. I shot a sequence of 11 pictures of Microsoft’s office in London with my digital camera.
  2. Then I used PTgui to create a panorama-image of this 11 individual images. The resulting JPG was about 15 MB big so not really what you want to publish on the web but here comes now MSR HD View.
  3. MSR HD View provides a command line tool which allows you to create tile pyramids and mosaics of such big images. You will find a good explanation on how to use it on the MSR HD View homepage. As a result you will have a folder structure with smaller tiles of about 20-40 KB each and you also get an XML-file which describes the tile-structure so that the HD View browser plug-in can understand it. Once you install the HD View utilities you will also get a sample HTML-file which implements the HD View control but there is of course a full documentation on the MSR-site.
  4. Obviously you need to find some storage for the tiles and currently I’m using Amazon S3 which gives you really good service for your money.
  5. OK, now we have a HTML-document which implements the HD View control but how do we combine it with Virtual Earth? Well the first idea that came to my mind was to bring it into the infobox of a VEShape-object. There are only 2 things we have to consider.
    • First it is easy to bring complete HTML-code in the InfoBox and you can also easily create a link which points to an external JavaScript but you can’t run the JavaScript in the InfoBox itself. On the other side HD View is controlled through JavaScript which appears to be a dilemma in the first place. Well, the workaround is easier than you might think. In the old days of HTML-coding you frequently used iframes and this is exactly what I do here. I use an iframe to insert the complete HTML-document as description in the InfoBox of the VEShape-object.
      shape1.SetDescription('<iframe src="HDView01-MSFT-London.htm" width="100%" height="95%"></iframe>');
    • The second point to consider is that the InfoBox of a VEShape-object is not in the appropriate size to render the HD View control but that is even easier to overcome. Since version 5 of the VE MapControl you can define your own styles for the InfoBox. In the header of the HTML-document you just include a CSS like this
      <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

      My CSS only changes the size of the InfoBox:

      .customInfoBox-previewArea 
      {
          width:400px;
          height:400px;
      }
      

      In your JavaScript you need to make sure, that you disable the default styles:

      map.ClearInfoBoxStyles();

And that’s it. You can download the full source-code direct from the sample-page.

Advertisements
This entry was posted in HD View. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s