A story that presents something tied to a location should always provide its readers with a clear and concise visual of where that location is. When building a web application like a story map, one cannot assume that the entirety of their audience, targeted or not, will know exactly where things are taking place from large-scale maps or photos alone.
If you were viewing a web map showing an aerial photo zoomed in to a street-corner of a busy downtown core, it might be hard to differentiate between two cities that might actually be nowhere near each other. The same could be said of two similar rural landscapes with few recognizable features. A well-placed overview map near the start of an application can provide clarity for audiences who might be discovering a certain topic or geographic area for the first time, despite sometimes seeming obvious to those audiences already in the know.
Looking specifically at story maps, there are a few techniques that I like to use to ensure that my audience has full understanding of the location being presented.
Static Overview Maps
A static image of a map in a format like .jpg or .png might be all you need in many cases. If you don't need the user to perform any map-related actions in order to grasp context, then don't force them to. Static overview maps also let you add a bit of creative flair, like filters, borders and decorative symbols or text that fit the overall style of your application.
I recently made a story map presenting locations around Charleston, South Carolina, from the television show called Southern Charm. I placed a static overview map showing the position of Charleston within the southern United States as part of the introduction before users reach the map tour of the city. I did this for two main reasons: first, I cannot assume that users know where Charleston is, especially those who are unfamiliar with the show itself; and second, it added a nice piece of visual media that suits the look and feel of the application.
Consider using free photo editing tools like Photoscape to touch-up your static maps before adding them to your web apps.
Dynamic Overview Maps
A dynamic overview map, one where users have the option to zoom, pan and click on features, can be a great starting point for users if your app dives into very specific locations, like buildings. It can also allow for users to zoom out to a region or scale that they recognize to help orient themselves.
When I made a map journal application that presents the loudest NCAA football stadiums, I decided to present the aerial map view of each stadium. But when looking at close-ups of the stadiums themselves, it's not obvious where these stadiums are located in relation to one another, or their place within the United States as a whole. So, I decided to begin the application with an overview map of the entire United States showing each team logo pinned on the city where their stadium resides:
Users can zoom, pan, and click on each stadium before jumping into the aerial map views on the subsequent journal sections.
Small-scale Starting Extents
Depending on the layout of a story map, it may not always make sense to have an overview map displayed on its own. I have several applications that are either entirely or almost entirely just a map designed for user interaction. In these cases, it is crucial to have the map begin at an extent that shows all of the data or features being presented and provides context as to where these data or features are happening.
For example, the World Hockey Association (WHA) had teams in both Canada and the United States during its brief existence in the 1970s. So naturally, if I want to show users all of the cities that had a team, my starting extent should be small enough to include nearly the entirety of both countries:
I understand that users will likely zoom in and pan around at scales that are larger than the starting extent for the majority of the time that they use the map but starting them off with all cities is the most logical choice.
Comments