Using Digital Maps and Images as Interactive Web Maps

StoryMaps is an undeniably useful tool for story telling, presenting research, or just sharing an interesting topic. Part of this process will likely involve the use of images or maps to aid in the flow and purpose of a StoryMap.

This StoryMap illustrates a useful technique that allows you to use images in the same way that maps can be used throughout StoryMaps. This can be especially useful, as exampled throughout this StoryMap, when wanting to use a digital map interactively.

Traditionally, images are only presentable in the following format:

 This map , however, is not easily navigable and might not be as useful to the StoryMap's intended purpose.

Alternatively, the following map is the end result of what this tutorial helps to create: a fully interactive and navigable digital map:

In order to create an interactive map from an image, the image must be turned into a Web Map in ArcGIS Online. This process is extremely useful, as it requires no official georeferencing in ArcGIS Pro and can be done completely through ArcGIS Online.

Uploading and hosting an image as a Web Map is possible thanks to the recently updated software  ArcGIS Image for ArcGIS Online . More about the workflow behind ArcGIS Image for ArcGIS Online can be read  here,  and an introduction to several possibilities of the function can be viewed  here. 

This StoryMap highlights digital maps downloaded from the  Penn State Digital Map Drawer , which includes "a nearly complete collection of the Sanborn Fire Insurance Maps of Pennsylvania (1884 – 1938), historical maps from around the world, and an assortment of other historical Pennsylvania maps including the 1861 Tilden Map of Centre County"

The methods for this tutorial were adapted from  Interactive Images in StoryMaps , which describes a more in-depth tutorial on how to use both ArcGIS Image for ArcGIS Online and ArcGIS Pro for this process. For this tutorial, the ArcGIS Image for ArcGIS Online method is the only one exampled, as it is the easiest for anyone to use regardless of experience in the ArcGIS Suite.

The first step is downloading the image or digital map that you would like to use; for this example, I downloaded the  1909 Bellefonte Quadrangle topographic map  from the  Penn State Digital Map Drawer 

In order for the image to be uploaded as a Web Map, it must have a matching world file. The  tutorial provided above  contains an example world file that can be downloaded and used for this example as well. The world file must be renamed to match the name of the downloaded image.

A world file is a text file containing the coordinates and information needed to correctly georeference the image you are uploading. For the means of this example, our images do not need to be "correctly" georeferenced, as they are just going to be used as interactive maps on their own and not compared to real coordinates.

More information on how to correctly create and format a world file can be found  here . There are different types of world files that must be used for different accompanying image files- to accompany a .jpg image, a .jgw world file should be used.

Below is an example of the files you should have ready before moving into ArcGIS Online:

Now that the image and world files are correctly named and filed, they can be uploaded to ArcGIS Online.

After navigating to ArcGIS Online, Select the Content tab --> "New Item" --> "Imagery Layer"

Next, select "Tiled Imagery Layer"

Select "One Mosaicked Image"

With "Raster Dataset" selected, add the image and world files and allow the upload status to complete. After they are fully loaded, click "Next"

After this step, you will now name the layer and add any extra details you may need, such as tags or a summary. After entering this information, click "Create". Wait for the screen to fully finish creating the layer before moving away from it.

After this step has finished loading, the imagery layer will be created and we can move on to the next step of adding it to a Web Map.

After the tiled imagery layer is created, either select "Open in Map Viewer" from the layer's home page or open a blank map and add in the layer from your contents.

Once the imagery layer is added, it will look something like this:

Reminder: our goal is to digitize an image as a Web Map, not georeference the image to its correct coordinate extent, which is why the world file we used places the digital map in a small, inspecific region. Full georeferencing can be completed in ArcGIS Pro- this is just the shortcut through ArcGIS Image for ArcGIS Online.

Next, the layer must be added as part of the basemap. This process is necessary for later steps when implementing this map into a StoryMap.

Under the layer's information, select "Move to Basemap"

Under the Basemap tab, you can now see that the layer is registered as part of the Basemap. You can now delete the World Topographic Map and World Hillshade Basemap as well.

While you could end the process here and save the Web Map, there are a few technical changes to make that will help when presenting the map in StoryMaps.

Deleting the World Topographic Map and World Hillshade Basemap will display the background behind the image as white in the Map Viewer, but will appear gray when using these maps in StoryMaps. To correct this, you can add a new blank basemap from the Living Atlas under the imagery layer, such as the two shown below.

Since the tan color fits better with the topographic map I am using, I added the Khaki Basemap underneath the imagery layer. The end result will look somehting like this:

Once the Web Map is complete and saved, it is ready to be added to a StoryMap.

All that is left now is inserting the Web Map into the StoryMap.

This process takes a digital map from this....

...to this:

While it is possible to turn any type of image into a Web Map, creating an interactive map from a digital map can be especially useful in a StoryMaps, as it allows previously static images to be fully navigable. Also take note of how the interactive map does not lose any of its quality while being navigated.

While the process could end here, it is possible to further digitize and enhance these interactive images both in ArcGIS Online and within StoryMaps. The following sections will demonstrate multiple examples on how these newly-interactive maps can be utilized and presented.

A Web Map can be further customized using one of MapViewer's newest features,  the sketch layer. 

The sketch layer feature can be found on the right hand side of the MapViewer and allows the user to markup the map using points, symbols, polygons, circles, and text.

Creating a sketch layer will also allow the user to input the map into StoryMaps with the sketches displayed.

This process can be especially useful for making an interactive map to highlight specific information or features on that map, as the following example will display

Using the same process as described previously, we can turn the following  1874 map of Harris County  into an interactive Web Map:

Utilizing the sketch feature in ArcGIS Online, we can further enhance the Web Map to emphasize specific features. For this map, I added circles, lines, and polygons to highlight specific towns, roads, streams, and buildings:

The difference between these two maps can be better seen in the following Swipe. This is especially impactful when wanting to digitize an older map where certain features might not be as clear.

While this next image is not a map, it can still be useful to use as an interactive image in a StoryMap for story telling purposes. Here, I used the sketch feature to add extra text to the following image of the  Farmers High School of PA :

This next section introduces how to utilize  express maps  with interactive images in a StoryMap.

An express map is a tool located within StoryMaps that allows the user to mark up a map with polygons, lines, points, texts, arrows, etc. This is similar to what can be done in ArcGIS Online, however express maps are made specifically for StoryMaps and allow for better interactivity and pop-up features in StoryMaps.

The following map is a  1922 Sanborn Fire Insurance map of State College . Sanborn Fire Insurance maps are extremely useful in researching and displaying historic business and property ownership in cities all across the U.S.

Since these maps are used so frequently, they are a perfect example of why creating an interactive Web Map from from a digital image can be so useful. The following is an navigable version of the digital map from the Penn State Digital Map Drawer:

While using an image as an interactive map just on its own is useful, we can take the process even further using express maps.

When inserting a map into a StoryMap, the option to create an express map will appear in the top right of the content screen.

Once " + New express map" is selected, a blank world map will be created:

This is where the step from the Set-Up section regarding adding the image as the Web Map's basemap becomes important. To change the express map to your interactive image, go to the options tab and under "Select basemap", choose "Browse more maps"

You can now choose the basemap that is saved to your content and you can begin editing the map as an express map.

The following map displays the possibilities that combining a digital map with the express map function can provide.

With express maps, the user can add titles, descriptions, and images to all of the drawn features, which creates pop-ups when selected. For example, the railroad, athletic field, and dairy farm in the following map all contain pictures that will pop-up when browsed over.

This function can also be useful when wanting to highlight a specific aspect within the map, as I did here with the fire department. All features of the fire department are highlighted in red, easily allowing the viewer to draw a connection betweeen all of them.

The possibilities of using digital maps as interactive images are endless: what started out as a static image is now a fully customizable and interactive map that can be edited depending on the mapmaker's goal.

While the State College Sanborn example provides details on using points, lines, polygons, and images to highlight specific map features, express maps can also be used to fully transform a digital map.

The following is a digital map (now turned Web Map using the same process as above) of  Centre County from the 1874 Atlas of Centre County . As shown below, the colors of the township are relatively dull and the names of each township are not easily readable.

With the polygon creation tool in express maps, we can create a fully digitized version of this map that displays each township as its own entity, which allows us to not only emphasize each township on the map, but also to add pop-ups that display each township name.

A similar method can be used to enhance the Sanborn Map from above to better display the different sections of the map. This method can be especially useful when wanting to dive further into pre-defined areas (counties, blocks, townships, buildings, etc.) of a digital map for storytelling purposes.

If you hover over each of the blocks in the Sanborn map, the special features are written in the pop-up description. This is a very useful tool for a map like this, as it allows the viewer to easily access the contents of the legend by just selecting a polygon.

The difference between the original digital map and the express map helps to display the possibilites of this function, as express maps can be used to simply highlight a road or fully digitize a set of townships.

In the Set-Up section, we turned an image into an interactive Web Map. Since these images now function as Web Maps, they can be implemented into any immersive map-based feauture in StoryMaps, including a Slideshow, Sidecar, or Map tour.

While each of these functions will not be demonstrated, an example of a map tour using the first map we digitized is shown below. This helps to fully visualize what can be done with what started as a static digital map.

This StoryMap demonstrated how to turn a digital map or image into an interactive map in StoryMaps.

Through the sketch layer in ArcGIS Online or the express map feature in StoryMaps, these images can become fully navigable and customizable based on what features the user wants to display and what story they want to tell.

Images and digital maps are an extremely important resource to use in almost any StoryMap; turning these feautres interactive will help enhance the StoryMap and allow for a more accessible and enjoyable user experience.