Hosting and Displaying Zoomable Images on Your Webpage

This tutorial goes along with the tutorials .

Problem

So, you have some tiles of a high-resolution image, now you need to allow other people to see those high-resolution images in a zoomable viewer. While the previous tutorial (linked above) allowed you to import your image into KnightLab StoryMap JS, sometimes you want to display the image on your personal site. This tutorial will show you how to create an iFrame embed that can be used on sites like CampusPress or Omeka, with your tiles hosted in GitHub (as with the StoryMap example).

Here we will review 3 tools that can help you achieve this goal: Zoomable, Zoomify, and Leaflet

Using Zoomable

Zoomable () allows users to quickly create zoomable images, but it is free version is limited (5 uses per email). Various plugins for sites like WordPress and Knightlab do exist but must be purchased individually. The free version also does not allow you to host your own images, so you are beholden to their servers functioning. However, it is a very quick process if you only have a few images.

Go to the free Zoomable upload page ()
Upload your image (30MB max; supports JPG/PNG/TIF) and enter your email address
An email containing your zoomable image will be sent to you; once it has, click on the included link ()
In the top-right corner is the "embed image" button. Clicking this button will give you an iFrame embed code that you can copy and paste into your website html (for information on iFrame html code, see t)

Pros: Very fast and very little coding required (only iFrame embed); don't need to tile the images yourself

Cons: Minimal free service, don't control your own tiles

Using Zoomify

In order to visualize our image using the Zoomify web viewer, we need to create a GitHub repository that contains (1) our tiles, (2) the javascript file linked above, and (3) an HTML file specific for our image.

Copy the following code into your html file, which is directly copied from the example html file supplied by Zoomify and save your file.

<!DOCTYPE html>
<html xml:lang="EN" xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<!--COPY ME INTO HEAD--><script type="text/javascript" src="ZoomifyImageViewerFree-min.js"></script>
		<!--COPY ME INTO HEAD--><script type="text/javascript"> Z.showImage("myContainer", "ZoomifyImageExample"); </script>

	</head>

	<body>

		<!--COPY ME INTO BODY--><div id="myContainer" style="width:900px; height:500px; margin:auto; border:1px; border-style:solid; border-color:#696969; background-color:#000000;" ></div>


	</body>
</html>

In order to load your file into the viewer, you only need to change 1 line of code! In line 8, where it says ZoomifyImageExample, change the name of the folder to the folder containing your tiles; in my case, that is sanFran (see above), so the code line 8 ends up looking like:

		<!--COPY ME INTO HEAD--><script type="text/javascript"> Z.showImage("myContainer", "sanFran"); </script>

Save your HTML file, and sync it with GitHub as described in the previous tutorial (Commit to Main-->Push Origin in your Github Desktop window). Once synced, your GitHub repository will look something like this:

Once it is hosted on GitHub, you can embed it as an iFrame on any website you want, with the syntax being as follows (where you can replace the URL with your own file URL, and the title with your own title)

<iframe src="https://bcdigschol.github.io/tilingMappingWorkshop/zoomifySanFran" title="Self-tiled San Francisco Chinatown Image" width="900px" height="500px"></iframe>

And that's it! You can use the same repository for all of your images if you wish, just make a separate .html file that you can use for your iFrame embed!

Using Leaflet

Let's return to our depository, but this time we will download the leaflet javascript package as well as a plugin for viewing tiled images

Like the previous example, this plugin comes with a nice example script for your html. You can find it in the downloaded folder (example.html) or can copy it from below. As before, you want to create a new html file. I called mine "leafletZoomifySanFran.html"

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet 1.0.0-b1 Zoomify Demo</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
    <style type="text/css">
        html, body, #photo {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="photo"></div>
    <script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet-src.js"></script>
    <script type="text/javascript" src="L.TileLayer.Zoomify.js"></script>  
    
    <script type="application/javascript">
		var map = L.map('photo', {
        	maxZoom: 15, //Does not matter anymore, maxNativeZoom prevents loading of missing zoom levels
	        minZoom: 0,
   	     	crs: L.CRS.Simple //Set a flat projection, as we are projecting an image
    	});
    	
    	//Loading the Zoomify tile layer, notice the URL
    	var layer = L.tileLayer.zoomify('http://thematicmapping.org/playground/zoomify/books/{g}/{z}-{x}-{y}.jpg', {
			width: 5472,
			height: 3648,
			attribution: '&copy; Photo: Bjørn Sandvik'
		}).addTo(map);

		//Setting the view to our layer bounds, set by our Zoomify plugin
		map.fitBounds(layer.options.bounds);
    </script>
</body>
</html>

Now, there are a few changes we want to make to alter the code for our needs.

On lines 5, you can change the Title of the page to whatever is appropriate for your image
On lines 6 and 19, you should change the URL to point to the local version of leaflet you have downloaded into your repository. This means it will look something like "./leaflet/leaflet.css" and "./leaflet/leaflet-src.js" depending on the name of your leaflet directory inside your repository
On line 20, make sure "src" points to the location of the downloaded Leaflet Zoomify Plugin. In my case, I changed it to "./Leaflet.Zoomify-master/L.TileLayer.Zoomify.js"
Finally, on lines 31, 32, and 33, change the information to the width, height, and attribution of your image, which can be found in the Properties or Info of your image.

The final version of my script is as follows:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet Zoomify San Fran Demo</title>
    <link rel="stylesheet" href="./leaflet/leaflet.css" />
    <style type="text/css">
        html, body, #photo {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="photo"></div>
    <script src="./leaflet/leaflet-src.js"></script>
    <script type="text/javascript" src="./Leaflet.Zoomify-master/L.TileLayer.Zoomify.js"></script>

    <script type="application/javascript">
		var map = L.map('photo', {
        	maxZoom: 15, //Does not matter anymore, maxNativeZoom prevents loading of missing zoom levels
	        minZoom: 0,
   	     	crs: L.CRS.Simple //Set a flat projection, as we are projecting an image
    	});

    	//Loading the Zoomify tile layer, notice the URL
    	var layer = L.tileLayer.zoomify('https://bcdigschol.github.io/tilingMappingWorkshop/sanFran/{g}/{z}-{x}-{y}.jpg', {
			width: 13463,
			height: 5952,
			attribution: 'David Rumsey'
		}).addTo(map);

		//Setting the view to our layer bounds, set by our Zoomify plugin
		map.fitBounds(layer.options.bounds);
    </script>
</body>
</html>

And the iFrame works the same way as previously!

<iframe src="https://bcdigschol.github.io/tilingMappingWorkshop/leafletZoomifySanFran" title="Self-tiled San Francisco Chinatown Image" width="900px" height="500px"></iframe>

That's all for now. Please contact Matt Naglak, Digital Scholarship Librarian (naglak@bc.edu) if you have questions or come across any errors. And check out our other tutorials!

PreviousTiling High-Resolution Images for Knightlab StoryMapJS NextGeorectifying Historical Maps using MapWarper

Last updated 3 years ago

Was this helpful?