This tutorial goes along with the tutorials Tiling High-Resolution Images for Knightlab StoryMapJS.
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
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 ()
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
Check out our for what this embed looks like
Our old friend Zoomify (last seen in the where we used Zoomify Free to tile an image) also provides us the basic information we need to host our image on a site like GitHub. When you download Zoomify free, it comes with a variety of other files, including a javascript file (ZoomifyImageViewerFree-min.js) and an HTML file (TemplateWebPage.htm). The files are linked below for your reference.
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.
First, we need a GitHub repository to put our image. If you are unfamiliar with GitHub, walks you step by step on how to create an account, create a repository, and download Github Desktop to make everything easier. It also shows you how to upload your tiles, which we will do again here.
For this tutorial, I've created a and linked it to my Github Desktop. I will now copy into it the tiles created in the previous tutorial and the Javascript file linked above.
Now we need to create an HTML file that will contain our zoomable image. Luckily, this is easier than it might sound because Zoomify has already done most of the work for us! First, open up a blank text document to create your file. I reccomend using (any iOs) or (PC only) as these text editors are helpful for coding. I'm going to save mine as zoomifySanFran.html in my repository folder (make sure you save it as an html file and not a text file!)
Copy the following code into your html file, which is directly copied from the example html file supplied by Zoomify and save your file.
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:
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:
Now if you have published your page in the settings tab, your image should now be viewable in the viewer using the HTML page for your site + the name of the webpage you created; in my case, this is:
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)
To see an example iFrame embed, see our
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!
is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping most developers ever need.
For more details about setting up an interactive leaflet map and adding spatial data, . Here we will just be using the viewer to view a tiled image.
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
Download and the (Code --> Download .zip file). Drop them into your repository folder with your 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"
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"
The final version of my script is as follows:
Sync your repository and then your image should be visible on the web ()
And the iFrame works the same way as previously!
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!
