MapForums

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...

... and you can get that close:

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.

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('');

     
     
   • 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.

Click here to view the article.