StoryMapJS Beta gets a fresh look, MapBox maps, and a new gigapixel image tool

Back in December we released an alpha version of StoryMapJS, our tool to help journalists tell better stories with maps. Since then it’s been adopted by a number of journalists and deployed around the world — helping to tell the stories about boarding school runaways in England and chart the impact of the debt ceiling debate in the U.S. among many others.

We have been refining StoryMapJS and rolled out a few bug fixes already, but today we're excited to announce some major interface refinements and a great new feature: gigapixel image mapping.

A beautiful new layout

Introducing an updated StoryMap interface an authoring tool.

We’ve completely flipped the presentation to improve readability and usability. The map and the content are now side-by-side in most situations rather than one on top of the other. The design is responsive so on narrow viewports the map will appear on top of the content instead of side-by-side.

One important note: the changes to StoryMap WILL affect all existing StoryMaps. We’ve done extensive testing on the most popular instances of the tool around the web and haven’t run in to problems so far. StoryMaps of all shapes and sizes have functioned well with the new design and we don’t anticipate problems. In fact, in many cases the new code and design have resulted in better looking and better performing maps. But you should keep an eye on your instances of StoryMap just the same and let us know if you have problems.

A streamlined authoring tool

StoryMap's new editing interface: current slides on the left, and rearranged fields.

In response to user testing and feedback, we've cleaned up the StoryMap editor. The editor screen now looks a lot more like the finished StoryMap, and previews are available to be viewed within the editor. We've added a few configuration options, and added some other "sharing" options along with the "publish" (embed) feature it's had all along.

We're also happy to announce that StoryMap now helps you upload images from your own computer to use in your StoryMap. You don't have to use find another web server anymore.

MapBox Integration

Storytellers can now use their MapBox map IDs in StoryMap.

In addition to the handful of map styles we’ve always offered, we now offer integration with MapBox, which means you can customize the look and feel of the map to suit your needs. MapBox allows you to change colors and other map elements to align with your style guidelines or personal tastes. Linking your custom MapBox map to StoryMap is simple; just click the “Options” button on StoryMap’s editing interface, select "MapBox" from the "Map Type" menu and enter your MapBox map ID in the field.

Many thanks to Alex Barth from MapBox for reaching out and setting the ball in motion for this feature.

Announcing gigapixel image mapping

A sample gigapixel StoryMap as illustrated by this tour of Bosch’s “Garden of Earthly Delights.”

Maybe you wanted to use a historic or fictional map as the basis for a story. Maybe you wanted to lead someone through a close look at the details of a find work of art or an important photograph.

When creating a new StoryMap, you can choose the gigapixel option.

Now you can create a different kind of StoryMap, based on a large image instead of a cartographic map. It functions best with large photos, so we call it "gigapixel," although it will work with images that aren't quite that big. (We recommend 2000x2000 pixels as a minimum.) It takes a little more work to prepare and upload your base image, but we've tried to explain all of the details for you. Take a look at some examples: an example based on a map of Westeros, the fictional setting of Game of Thrones; and a tour of Hieronymus Bosch's "Garden of Earthly Delights."

Loose ends to odds-n-ends

Zach Wise, who conceived of and built a fair chunk of StoryMap, has been relentless squashing browser bugs and fine-tuning everything to make StoryMap beautiful on all desktop and mobile browsers. Unfortunately, we've been unable to solve some technology problems with older versions of Internet Explorer (version 9 and earlier). If you do find anything that's not quite perfect, please let us know.

So please, go out and make beautiful and interesting things with StoryMap. We’d love to see what you do with it. If you deploy it, be sure to tweet at us so we can see what you've created and help spread the word about your projects.

About the author

Ryan Graff

Journalism, revenue, whitewater, former carny. Recently loving some quality time @KelloggSchool.

Latest Posts

  • A Google Spreadsheets change affecting TimelineJS users

    Google recently changed something about their Sheets service which is causing many people to run into an error when they are making a new timeline. Note: there should be no impact on existing timelines! After this change, many of you click on the "preview" and get this message: An unexpected error occurred trying to read your spreadsheet data [SyntaxError] Timeline configuration has no events. There is a straightforward work-around, but it requires those of you who have...

    Continue Reading

  • How Americans think and feel about gun violence

    A man killed his wife, then himself. I want you to see his face and learn that he enjoyed fishing with his grandchildren. A small-time drug dealer is shot by two men in a parking lot. I find his Facebook profile and a photo shows him striking a playfully irreverent pose, giving the camera the middle finger. The photo’s comments take a mournful turn after a certain date. “Rest easy bro ???” Gun Memorial runs...

    Continue Reading

  • Software developers interested in journalism: Northwestern and The Washington Post want you!

    Northwestern University and The Washington Post are offering a unique opportunity for two talented software developers interested in applying their programming skills in media and journalism. Here’s the proposition: (1) a full-tuition scholarship to earn a master’s degree in journalism at Northwestern University, followed by (2) a six-month paid internship with The Post’s world-class engineering team, with the possibility of subsequent full-time employment. These opportunities are made possible by the John S. and James L....

    Continue Reading

  • What happened when Gun Memorial let anyone contribute directly to victim profiles

    If you’re reporting local or niche news, there’s a good chance that your audience collectively knows more about the story than you do. That’s especially true for us at Gun Memorial, a small publication with a nationwide mission of covering every American who is shot dead. In our latest, mostly successful, experiment, we let readers add to our stories without editor intervention. This article shares some lessons from that experience. Asking for reader contributions A...

    Continue Reading

  • How conversational interfaces make the internet more accessible for everyone

    This story is part of a series on bringing the journalism we produce to as many people as possible, regardless of language, access to technology, or physical capability. Find the series introduction, as well as a list of published stories here. In 2004, human-computer interaction professor Alan Dix published the third edition of Human-Computer Interaction along with his colleagues, Janet Finley, Gregory Abowd, and Russell Beale. In a chapter called “The Interaction,” the authors wrote...

    Continue Reading

  • Three tools to help you make colorblind-friendly graphics

    This story is part of a series on bringing the journalism we produce to as many people as possible, regardless of language, access to technology, or physical capability. Find the series introduction, as well as a list of published stories here. I am one of the 8% of men of Northern European descent who suffers from red-green colorblindness. Specifically, I have a mild case of protanopia (also called protanomaly), which means that my eyes lack...

    Continue Reading

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.

View More