This module explains how to create an online exhibition which tells a story based around a picture, or non-georeferenced map.
Estimated time: 1 hour
This module creates a story panorama using the Gigapixel option in the free StoryMapJS tool by KnightLab. The lesson assumes familiarity with the core features of StoryMapJS covered in previous modules of this tutorial.
Just as a storymap tells a story based around a map, a story panorama tells a story based around a picture. Story panoramas are used to communicate information about an image in a visual way, and tells a story or explains an idea using an annotated image. The Gigapixel option in StoryMapJS makes a story panorama.
In a story panorama, we use an image instead of a map to anchor the set of slides. The navigation in a Gigapixel story panorama is just like navigation in a storymap. Visitors can follow through the slides in sequence, or use the marker pins on the reference image on the left to jump to a specific part of the image.
We might use a story panorama to:
You can also use the Gigapixel option to make a StoryMap around a map which has not been georeferenced. (To use your own georeferenced map for a StoryMap, see Using Your Own Map.)
This module assumes you are already familiar with StoryMapJS.
To make a story panorama with StoryMapJS, you need to prepare the image. You will need:
In this part, we will see how to prepare an image for use on StoryMapsJS.
Estimated time: 10-30 mins
To build a story panorama around an image such as a painting, a photograph, or a historical map, you will need a high-quality image. Your image doesn’t need literally a billion pixels (‘gigapixel’), but the higher the resolution, the better it will look. Very large images will take longer to process and to upload.
To get the dimensions of your image in pixels, locate the image file on your computer and right-click on it (Mac: Ctrl+click). Go to the image tab: this will state the image dimensions (width and height) in pixels.
Make a note of these. You will need these dimensions later in StoryMapJS.
StoryMapJS builds your story panorama using image tiles. Instead of one single large image, StoryMapJS stiches together your panorama out of lots of individual tiles covering different parts of the image.
StoryMapJS can only use tiles in the Zoomify format. Zoomify is a commercial format which is often used by archives and libraries to provide access to large images.
To generate a set of Zoomify tiles from your chosen panorama image, you can use:
Once you have downloaded the software, unzip the folder. Then drag and drop your image file onto Zoomify Free Converter. The app will create a tile set for you.
Make a note of the name of the folder containing the tile set, and where it is saved on your computer.
Zoomify-format export is included in Photoshop CS3 and later (plugin details).
Your tiled set folder should be saved on your computer, with the Output Location and Base Name you specified.
ZoomifyImage needs Python and PIL. If you’re not familiar with these, you may prefer to use VIPS instead (below).
Download the ZoomifyImage tarball and extract it somewhere convenient. In the command line, move into your new ZoomifyImage directory. Now enter:
python ZoomifyFileProcessor.py IMAGE
replacing IMAGE with the full path to the image file you want to zoomify.
Your tile set will be created as a new sub-directory in the same directory as your image file. Make a note of the name and the location of the folder containing the tile set.
VIPS is a versatile image processing package, accessed through the command line.
binsub-directory of your VIPS directory; or b) add VIPS to your PATH.
Usage: To use VIPS from the command line to make Zoomify tiles, enter:
vips dzsave EXISTING_IMAGE NEW_FOLDER --layout zoomify
replacing: EXISTING_IMAGE with the full path to the image file you want to zoomify; and NEW_FOLDER with the full path to a folder name you want VIPS to create for your new Zoomify tile set.
Your tile set will be a folder containing an .xml file and one or more subfolders with titles like TileGroup0. Inside the subfolders you will find image tiles for each part of your original image.
Check whether the name of the tile set folder includes spaces or special characters. Web hosting will be simpler if you edit the name to remove these characters. Do not edit the names of the files or subfolders inside the tile set.
Congratulations! You have turned your image into a tile set which can be used with StoryMapJS.
In this part, we will see how to host an image tile set so that it becomes available for use on StoryMapsJS. This step will make your image publicly accessible on the web.
Estimated time: 10-30 mins
Now you have a folder with a Zoomify tile version of your image. The next step is to make that folder accessible on the web.
You cannot upload your image directly to StoryMapJS. Instead you need to host your image tile set on a different website. StoryMapJS will access the image tiles every time your story panorama is edited or viewed.
Any public web hosting will work with StoryMapJS. You can use:
You can use GitHub to host an image for StoryMapJS. GitHub offers a free tier.
If you already have access to a web server, simply upload the folder containing your set of image tiles. Make sure the folder is publicly accessible and that the file hierarchy is preserved.
Make a note of the base URL for the image tiles (i.e. http://WEBSITE/TILES_FOLDER) where WEBSITE is the URL for your website and TILES_FOLDER is the name of the folder containing the image tiles. You will need this in a moment in StoryMapJS.
To test your new tile images, enter the following URL:
A small version of your image should load.
If you do not have a server already, free hosting is provided by several companies, e.g. Neocities.
To test your new image server, use a web browser to navigate to:
http://WEBSITE/TILES_FOLDER/TileGroup0/0-0-0.jpg , where WEBSITE is your server and TILES_FOLDER is the directory containing your tiles. A small version of your image should display.
Congratulations! You have now hosted your image successfully.
In this part, we will set up a story panorama using the Gigapixel option in StoryMapJS.
Estimated time: 10 mins
Log into the StoryMapJS web authoring tool and either create a new storymap or open an existing one.
WARNING: If you change a storymap to a Gigapixel story panorama, you cannot change it back into a storymap. You will not be able to restore a map under your slides instead of an image. To experiment with changing a storymap into a story panorama, first copy your storymap using the Settings icon next to that storymap on Your Storymaps.
Go to Options/Map Type and select Gigapixel. Some new options will appear.
Under Zoomify URL, enter the base URL for the tile image folder you uploaded to the Web in the previous module. This will be something like http://WEBSITE/TILES_FOLDER
Under Max Image Size, enter the original dimensions (width and height) of your image, which we retrieved in Module A. If these are incorrect, the image may not display correctly.
Click Close, and your Gigapixel story panorama will be created.
You can now add content to your slides, just as we did in the previous lesson.
Most StoryMapJS options are discussed in the previous modules. In Gigapixel mode, you will be offered the following additional choices under Options:
When you have finished, you can publish your Gigapixel story panorama in the same way as any other StoryMap.
You have now completed your Gigapixel story panorama.