Interactive Images in StoryMaps

With the recent release of  Media Layers  for the ArcGIS Online Map Viewer, the process of creating an interactive image for your StoryMap is now even easier!

See the following blog post for how to use media layers to create an interactive image...

The instructions below still work, however, using Media layers to create your interactive image is a much simpler, better supported option!

One might consider the ability to incorporate interactive maps (Web Maps or Web Scenes) as the key, innovative story-telling feature of StoryMaps.

It enables authors to present geospatial information in an intuitive format, empowering readers to explore the data behind a narrative, at their own pace, or in ways the author may not have foreseen. It can also be used to present a sequence of predetermined map views to guide readers along a particular story thread.

Have you ever found yourself thinking though, "I have this image -- not of a map -- but I wish I could provide the reader with a way to interactively explore the image, just like with a map?"

Maybe you want to annotate an image to draw readers’ attention to specific items in the image? Maybe you would like to include popups to provide additional context associated with areas of interest in the image?

Perhaps you want to enable the reader to explore your image in more detail on their own, by panning and zooming, while providing contextual markup clues?

What about using a series of annotated views of your image to lead readers along a particular narrative path? Perhaps highlighting a certain sequence of areas of interest within the image using markup and pop-ups?

Also, if you want to keep the user on the path you've laid out for them, you can disable the "Allow map navigation" setting for the map. This prevents the user from panning or zooming your map, as shown in the following example.

Check out how interactive images are used in these StoryMaps:

So, how do you get your not-a-map image into a Web Map, so that it behaves as if it were an interactive map?

The key is to arbitrarily georeference your not-a-map image as if it were an image of a map. In other words, go through the same workflow as when you want to incorporate an image of map as a layer or basemap in a Web Map: georeference the image, generate tiles for it, and add the tile layer to a Web Map. Then you can place the Web Map in your StoryMap.

Additionally, you can use the Web Map as a custom Basemap for an Express Map in your StoryMap and annotate it. Or, in the Map Viewer app, you can add Feature Layers (points, lines, and polygons) to the Web Map to support annotation and markup.

For instance, you might place pins on certain objects in the image, or polygons to define boundaries for key areas of the image. You could also use popups to display attributes that convey additional information about each location of interest.

So how do you "arbitrarily georeference" your not-a-map image, in order to turn it into a tiles, which you can add to a Web Map, and place in your StoryMap?

Usually georeferencing involves aligning the spatial data in an image -- such as a scan or photo of an old paper map -- to a known coordinate system, so that the image can be viewed in the proper location alongside other geographic data.

The  typical georeferencing workflow  involves linking points in your image to their locations on a basemap in a known coordinate system.

A product of this georeferencing process is a  world file . This small, six-line text file contains parameters that help ArcGIS properly place your image when displaying it as a layer in a map.

Since your not-a-map image contains no spatial information, there is nothing in it that you can link to a known coordinate system.

Instead, we can manually generate a world file to georeference your image, so that ArcGIS will treat your not-a-map image as if it were a map.

In order to do so, let's make three key assumptions about your image so that we can align it with a known location and coordinate system, and create a world file for it...

Let's assume your not-a-map image is a map using the WGS 1984 Web Mercator Auxiliary Sphere coordinate system (WKID: 3857). This is the default coordinate system for ArcGIS Online content.

Let's assume the location of the upper-left corner of your not-a-map image corresponds to 0°, 0° (latitude, longitude) in the assumed Web Mercator coordinate system.

Let's assume each pixel in your not-a-map image is square in shape, and is 0.1-map units on an edge. (For the assumed Web Mercator coordinate system, 1-map unit is 1-meter.)

The first two assumptions are relatively arbitrary. Other coordinate systems or points of origin will work too. You just have to place your image somewhere in a known coordinate system, so that ArcGIS will treat it as if it were a map.

The third assumption, for scale, however, is less arbitrary. The value of 0.1-map units was chosen because it generally works well for a typical-resolution image, say one that is ~4000x3000-pixels.

The example not-a-map image I have been using, Severin Roesen's Still Life with Fruit, is 4001x3078-pixels.

Since the assumed coordinate system, Web Mercator, uses meters for linear units, the 0.1-map units scale factor translates into each pixel in the image being a square, 0.1-meters on a side. The georeferenced not-a-map image, therefore, displays as an area of 400.1x307.8-meters on a map.

By choosing a scale factor of 0.1, one can zoom-in five times before reaching the 1:71 scale limit of ArcGIS Online. At which point the picture is starting to get pixelated.

If you have a larger image -- one with more pixels -- or if you want to support additional zoom levels for a similar sized image, then you can increase the scale values in the world file. This will result in the image representing a larger area, displaying across a larger portion of the map.

For instance, changing the scale values in the example image's world file from 0.1 to 1 means the image would now represent an area of 4001x3078-meters.

This increase in areal size accommodates three additional zoom levels. So what the image looked like before at the 1:71 level would now be approximately what it would like at the 1:564 level; and, at the 1:71 level, the image would now appear even more pixelated.

Because we are relying on arbitrary assumptions to treat our not-a-map image as a map, we can create a generic  world file , based on those assumptions, which can be used to georeference any typically-sized image file.

The values in such a world file would be:

The first and third lines, the 0.1 and -0.1, are the “scale” factors for the pixels’ longitude (positive, to-the-right from the origin) and latitude (negative, down from the origin), respectively. The zero values on the other lines have to do with the assumptions that our image's upper-left corner is at 0,0 in longitude-latitude and its pixels are square in shape.

If your not-a-map image is much bigger or smaller than the example (~4000x3000-pixels), or you want to adjust the available levels of zoom, then, as we mentioned above, you can increase or decrease the scale parameters as needed. Generally the bigger the image, the bigger the scale factor.

Always use the same absolute value for both scale factors -- though the first is positive and the second negative -- to support the assumption of square pixels.

In addition to ArcGIS Online and StoryMaps, you will need access to either  ArcGIS Image for ArcGIS Online  or  ArcGIS Pro  to convert your image file into a tiled layer. Instructions for both are provided below.

Step #1

Using the example image:

Download the example image and its corresponding world file (both are provided in a  zip archive ) to your computer.

Unzip the archive, which contains a folder with two files:

• an image file: Severin_Roesen__Still_Life_with_Fruit__Google_Art_Project.jpg
• the image's world file: Severin_Roesen__Still_Life_with_Fruit__Google_Art_Project.jgw

Providing your own image:

If you plan to use your own image file, then you will need to manually create your own world file. You can either download the example, and rename it to be your image's world file, or you can create one with your favorite text editor, using the values in the example provided above. (If you use an image that is significantly bigger or smaller, then you may need to modify the scale parameters in your image's world file, as discussed above.)

The world file name should be the same as your image file's name, though its file suffix will differ. For example the world file for a .jpg image would have an extension of .jpw, and a .tif uses .tfw. See  World file naming conventions  for help determining the file suffix to use for your image's world file.

Step #2

Go to ArcGIS Online and login, then go to your Content tab.

Click on New item, and select Imagery layer.

(If you don't see Imagery layer as an option, then confirm with your ArcGIS Online organization administrator that you have access to ArcGIS Image for ArcGIS Online. If you don't, but have access to ArcGIS Pro, then see the instructions below. If you don't have access to either, then you won't be able to do what is described in this story.)

Next, check the box for Tiled Imagery Layer as your layer type. (It should be enabled by default.)

Now select One mosaicked image for your layer configuration.

Next, browse your computer to select, or drag-and-drop, both the image (e.g., .jpg file) and world (e.g., .jpw file) file to use as the input imagery.

Now provide a Title for your Tiled imager layer's item details. (Note the title has to be unique across your ArcGIS Online organization.)

You can optionally provide Tags, a Summary, and specify a folder on ArcGIS Online in which to store your tile layer.

Finally ArcGIS Image for ArcGIS Online will begin creating your Tiled Imagery Layer.

Do not navigate away form the above page while it is processing, until you see a message indicating it is safe to do so, as below.

If you wait on the page for the process to complete, then you will be taken to your newly created Tiled Imagery Layer's item details page.

Step #3

Create a new Web Map and add your Tiled Imagery Layer to it.

If you are viewing your Tiled Imagery Layer's Item Details page from the last step, then select Open in Map Viewer.

If you navigated away from the creation process before it completed, then you may not see your image right away when adding it to a web map, and you will need to wait until it is done.

Step #4

Set your Tiled Imager Layer as the Web Map's basemap, and remove the default basemap layer. (Note the blue color in the image above is coming from the default Topographic basemap underneath, which is showing the blue of the Atlantic Ocean in the area of 0,0.)

1. Under Layers, for the Tiled Imagery Layer, click on the More Options (...) menu, and select Move to basemap.
2. Under Basemap, remove any default basemap layers by clicking on the layer's More Options (...) menu, and select Remove.
3. I recommend you also rename the basemap group to something meaningful, like the name of your image. Otherwise, by default the name is inherited from the original basemap's name (e.g., Topographic).
4. Save the Web Map.

Optionally, you may want to add a blank basemap layer that uses the default background color for maps in your StoryMap theme. If you are using the default Summit theme, then you will want a white background for you web map, for which you could use the  Blank White Vector Basemap  from the  Living Atlas . First, add it as a layer to your Web Map, then move it to the Basemap, and then make sure it sits beneath your Tiled Imagery Layer in the drawing order. If you are using the Obsidian StoryMap Theme, then you could use the  Blank Black Vector Basemap .

If you don't add this extra background color layer, then your Web Map will appear with a default gray background in the StoryMap, even though it shows as white in the Map Viewer.

Step #5

You can now use your new Web Map directly in your StoryMap, or as the basemap layer for an Express Map, so that you can easily annotate it.

To create an Express Map with your interactive image as the basemap:

1.  Create an Express Map  in your story.
2. Under your Express Map's Options, use Select basemap and Browse more maps, to select your Web Map as the basemap.
3. If desired, add points, lines, areas, pop-ups, and other annotations to your Express Map to assist your reader in exploring your image.

You can also create your Express Map within a  Sidecar  block, so that you can place it with a different focus in each section to guide readers along a narrative pathway thru the content of the image. Or, you could place it within a  Map Tour  block to enable readers to explore the points of interest in the image on their own.

Step #1

Open ArcGIS Pro and create a new project.

If necessary, login to your ArcGIS Online account as well. You will need to have access to it to share your image's tiles as a Tile Layer.

Step #2

Using the example image:

Download the example image and its corresponding world file (both are provided in a  zip archive ) to your computer.

Unzip the archive, which contains a folder with two files:

• an image file: Severin_Roesen__Still_Life_with_Fruit__Google_Art_Project.jpg
• the image's world file: Severin_Roesen__Still_Life_with_Fruit__Google_Art_Project.jgw

Place both files in the folder of your newly created ArcGIS Pro project.

Providing your own image:

If you plan to use your own image file, then you will need to manually create your own world file. You can either download the example, and rename it to be your image's world file, or you can create one with your favorite text editor, using the values in the example provided above. (If you use an image that is significantly bigger or smaller, then you may need to modify the scale parameters in your image's world file, as discussed above.)

The world file name should be the same as your image file's name, though its file suffix will differ. For example the world file for a .jpg image would have an extension of .jpw, and a .tif uses .tfw. See  World file naming conventions  for help determining the file suffix to use for your image's world file.

Step #3

Specify the coordinate system for your image as WGS 1984 Web Mercator Auxiliary Sphere (WKID: 3857).

1. Back in ArcGIS Pro, go to the Catalog pane, open "Folders", and then open your project's folder, and you should see the name of the image file listed (e.g., Severin_Roesen__Still_Life_with_Fruit__Google_Art_Project).
2. Right-click on the image and select Properties.
3. Scroll down to the Spatial Reference heading, and click on the globe icon next to it.
4. Search for and select WGS 1984 Web Mercator Auxiliary Sphere to use as the XY Coordinate System.
5. Click Okay and Okay.

Step #4

Add your image to a new map.

1. Browse to the image file in Catalog.
2. Right-click on it and select Add to New --> Map.
3. If desired, modify the symbology of the image by right-clicking on the image's name in the Contents pane, and selecting Symbology. (For instance, you might want to change the Stretch type to "None" and reset the three Gamma values all to 1.0.

Step #5

Share the image as a Tile Layer to ArcGIS Online.

1. In the table of Contents for the map, right-click on the image layer, and select Sharing --> Share As Web Layer.
2. Under Item Details, provide a Name, Summary, and Tags.
3. Under Layer Type, select Tile.
4. If desired, specify a Location and Sharing settings.
5. Switch from the General tab to the Configuration tab.
6. Under Levels of Detail, select 13 to 23. (You could select the whole rage, 1 to 23, if desired; however, given the size of the image, it won't be visible when zoomed out very far.)
7. Click on Analyze to check for any potential errors.
8. Click on Publish to convert the image to a tile Tile Layer hosted on ArcGIS Online.

Step #6

Open ArcGIS Online and add the image's Tile Layer to a new Web Map.

1. Go to the Item Details view of the Tile Layer you just created.
2. Click on Open in Map Viewer --> Add to new map.

Step #7

Set your Tile Layer as the Web Map's basemap, and remove the default basemap layer. (This helps avoid undesired artifacts in the display, especially when viewing the edges of your image.)

1. Under Layers, for the Tile Layer, click on the More Options (...) menu, and select Move to basemap.
2. Under Basemap, remove any default basemap layers by clicking on the layer's More Options (...) menu, and select Remove.
3. Save the Web Map.

Step #8

You can now use your new Web Map directly in your StoryMap, or as the basemap layer for an Express Map, so that you can easily annotate it.

To create an Express Map with your interactive image as the basemap:

1.  Create an Express Map  in your story.
2. Under your Express Map's Options, use Select basemap and Browse more maps, to select your Web Map as the basemap.
3. If desired, add points, lines, areas, pop-ups, and other annotations to your Express Map to assist your reader in exploring your image.

You can also create your Express Map within a  Sidecar  block, so that you can place it with a different focus in each section to guide readers along a narrative pathway thru the content of the image. Or, you could place it within a  Map Tour  block to enable readers to explore the points of interest in the image on their own.

Did I mention that I also really like pomegranates?

At least I think this is a pomegranate...

Since you've turned your image into a Web Map, you can use it anywhere you can use a Web Map. So, you can use your interactive images in both new ArcGIS StoryMaps or Classic Story Map apps.

While you gain a lot of interesting capabilities by turning your image into an interactive Web Map, there are some potential limitations. The most noticeable is that when you treat an image as a map, then you have limited control over how much of the image is visible on the screen. You are stuck with the image being displayed at whatever scale you configured when you placed it in your StoryMap, which may result in the edges of the image being truncated on a smaller screen, if you configured it on a bigger screen. All you can count on is that the center of the image will be in the center of the screen. There is no "fill" option for Web Map content, like there is for image content, which responsively resizes to accommodate different resolution screens.

Another possible limitation is the complexity of this approach. If your markup needs are simple, and you don't need pop-ups or support for leading the reader around your image, then annotating and cropping your image in traditional image-editing software, and using the modified image in your StoryMap, may be quicker and easier.