Zoomable Images: Tools & Technique

Maps and other large format documents are best viewed and studied on a computer monitor where they can be quickly zoomed and panned while maintaining good resolution. In order to achieve this I developed a four step process to place zoomable map and document images on the Buhler-Family website.

The process uses tools many of us already have (an iPad camera), are inexpensive to purchase (an iPad Stand), free software (Image Composite Editor) and a free image hosting service (Sirv).

The four steps include:
1. Photograph the map or document.
2. Mosaic the images.
3. Upload composite image to server.
4. Link the image to your website.

TOOLS

1. Camera

Apple iPad Air model MF003LL/A (5.0 megapixel)

2. iPad Stand

The iPad stand was purchased on eBay for $19.95. It is intended to be used as a hands-free iPad reading stand. I recognized it could be used as a “tripod” to hold the iPad with the forward camera looking down and the touch screen up. In this manner it could be used as a document imager.

3. Image Composite Editor

“Image Composite Editor (ICE) is an advanced panoramic image stitcher created by the Microsoft Research Computational Photography Group. Given a set of overlapping photographs of a scene shot from a single camera location, the app creates high-resolution panoramas that seamlessly combine original images.”

4. Sirv

Sirv Image Server is “The smart way to serve images…Simply upload your large images to Sirv and they are instantly embeddable in any web page as a zoomable image. Just copy and paste the code.” A free account includes 0.5 GB Storage.

TECHNIQUE

1. Photograph the map or document.

The figure below shows the iPad stand set up in its lowest configuration to receive the iPad. The iPad slides into the holding brackets and is secured with the tabs on either side. 

The camera can be leveled using a level bubble app.

The figure below shows the iPad leveled and locked into the stand.

The next figure shows the camera settings used:

1. HDR
2. 3 or 10 second shutter delay used to keep camera stable
3. Square image

The camera to map distance is approximately 354 mm or 9 inches in this setup. An image taken with this physical setup and the camera settings defined will cover an area of the map being photographed that is 174 mm by 174 mm or 6.85 inches by 6.85 inches. This yields a digital image 1936 by 1936 pixels or 3.7 megapixels.

Our example map shown below is approximately 22 inches wide by 20 inches high. Twenty images were taken to create a composite mosaic – five columns by 4 rows. The image sequence numbers are annotated, image 1 starts the upper left corner then moves right along row 1 to image 5, then back to column 1 on row 2 and so on until all 20 images are taken.  Each individual photo is taken with an approximate 2-3 inch overlap around all sides. The overlap is necessary to facilitate feature matching during the mosaicking process.

2. Mosaic the images

Download, Install and Start Microsoft Image Composite Editor.

Step 1 Import: Drag and drop images to be composited into the ICE application window.

Step 2: Click “Stitch” ICE begins aligning and compositing the images. This can take several minutes.

Image is displayed when mosaicking is completed.

The image can now be rotated if necessary.

Step 3 Crop: Click crop. Crop box will be displayed. Each crop line can be adjusted individually.

Crop lines have been adjusted. Select Export to crop as adjusted or select “Auto Complete” to crop and auto-fill the blank areas of the image inside the crop lines. Auto Complete takes several minutes to finish.

The image has been cropped and the auto complete process is done.

Step 4 Export: Click on Export. Select Quality “Superb” Click “Export to Disk”.

Select folder and name the file. Click Save.

3. Upload composite image to server.

Visit https://sirv.com/ to register for a free account.

Upload the composite image to your Sirv account.

Select the type of image display desired. I use the SirvZoom display method. Copy and paste the html code displayed to your website.

4. Link the image to the  website.

I use image thumbnails on buhler-family.net that are linked to an html file containing the SirvZoom code.

Here is the linked html file to SirvZoom our example image; Image_020.0.html:

<script src=”https://scripts.sirv.com/sirv.js”></script>
</head>
<div class=”Sirv” data-effect=”zoom” >
<img data-src=”https://buhlermaplibrary.sirv.com/Images/Image_020.0.jpg” />
<!– <img data-src=”/second-image.jpg” /> –>
</div>

Click on map below to view our example SirvZoom image.

Leave a Reply

Your email address will not be published. Required fields are marked *