WCA Technology Research Memo 1: ESRI Story Maps

To assist in the development of the Wisconsin Coastal Atlas, we are undertaking a project to research the web mapping technologies that are of potential usefulness to coastal atlas developers, and further develop sets of best practices for their use of interactive web mapping technology. A pilot evaluation was conducted using ESRI’s Story Maps framework, which is of interest as a platform for developing a narrative map to describe the impact of Sea Grant programs on communities in Wisconsin. This report may undergo future editing, and we hope to add new reports on different technologies throughout the summer.

TYPE: Framework

LANGUAGES: HTML5/CSS/JavaScript

REFERENCE MAP SUPPORT: Toggle Map Type (1), Custom Vectors (2)

THEMATIC MAP ISOMORPHS: Choropleth (1), Proportional Symbol (1), Isoline/Surface (1), Flow (1), Animation (1), Dot Density (3), Graph/Chart (3)

CARTOGRAPHIC INTERACTIONS: Arrange/Linked Views (1), Sequence/Animate (1), Resymbolize (1), Overlay/Toggle Layers (1), Pan (1), Zoom (1), Filter (2), Search (2), Retrieve (1),

OTHER ISSUES: Currently in beta, with little developed support for web application templates. Although ESRI products, built in JavaScript with minified library files, so open-source, and the “Story Maps” term is not copyrighted.

WEBSITE: http://storymaps.esri.com/wordpress

DOCUMENTATION: http://storymaps.esri.com/downloads/Building%20Story%20Maps.pdf

OTHER RESOURCES: White paper, “Telling Stories with Maps,” http://storymaps.esri.com/downloads/Telling%20Stories%20with%20Maps.pdf

EXAMPLES: Links in Gallery on the home page.

Click “Continue reading” for full description.
WHAT IT IS

In its “Workflows and Best Practices” document, ESRI uses “story maps” as a general term for “interactive maps combined with text and other content to tell a story about the world.” The downloads that they currently provide from the beta-release Story Maps website are packaged HTML/CSS/JavaScript templates for out-of-the-box websites designed to map data atop ESRI-served base maps.

ESRI continues to develop their ArcGIS Online web application, which has some interesting functionality, including the ability to upload and render on the fly gpx, zipped shapefiles, and tab- or comma-delimited text files with lat and long columns. ArcGIS Explorer Online, the newer and more robust of two offered mapping applications (the other being the ArcGIS.com Map Viewer), includes some spatial analysis functionality, albeit still a shadow of the functionality of the desktop software. This functionality will be better described in a separate memo.

The main story behind Story Maps is in the template files, which include a number of libraries compiled by ESRI. These assume you have first acquired data for the type of thematic map you want to show up in the map display div of the web page. The templates assume one primary dataset, either point data or choropleth polygons, or two sets in the case of the slider or side-by-side map templates. The templates come with example datasets which can be easily edited, but some code modification is required if you want to add or change fields. The templates can be coded to parse CSVs, Shapefiles, or KML files, or to draw directly from a web service. The easiest way to do it with point files in the template I tried out (“Map Tour”) appears to be to simply modify the example csv file.

The rest of the job basically involves playing around with the code to adjust elements on the page, link to or embed photos in the right spots, and customize the dynamically generated elements of the dataset. For example, in the simple Cincinnati Planets story map I made, which took about 8 hours as a complete beginner (the template came with a 2-step “readme” instructions file), I replaced the data in the template CSV with my own lat/longs based on a buffer map I made in ArcGIS 10 and uploaded to ArcGIS Online. One mistake I initially made was thinking I could create the map in ArcGIS Online and embed it directly in the page—which you can do, but it is NOT what the template was made for. The slideshow only links with the map and info windows if the data is loaded from a separate CSV on a standard ESRI MapServer base map.

The web page also accesses URLs in the CSV to load photos for the slideshow. These can be hosted locally, but I just threw in links to random pictures of planets on the internet. The CSV includes a “description” field to hold the text for the pop-up info window for each location. Finally, I configured a few highlighted variables in the index file (which I actually moved to a separate linked JavaScript file to improve the code organization), and bingo, bango, it’s done.

I’m sure I could do a lot more to customize the page, and certainly expert web developers could cook up their own versions from scratch. But the bottom line ESRI is pushing with these Story Map templates is they make it relatively simple for noobs like me to put together a cool-looking web page that links narrative or a message to map elements to, well, tell a story.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s