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

Communications and Outreach Manager, 2011-2016

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

Latest Posts

  • A Big Change That Will Probably Affect Your Storymaps

    A big change is coming to StoryMapJS, and it will affect many, if not most existing storymaps. When making a storymap, one way to set a style and tone for your project is to set the "map type," also known as the "basemap." When we launched StoryMapJS, it included options for a few basemaps created by Stamen Design. These included the "watercolor" style, as well as the default style for new storymaps, "Toner Lite." Stamen...

    Continue Reading

  • Introducing AmyJo Brown, Knight Lab Professional Fellow

    AmyJo Brown, a veteran journalist passionate about supporting and reshaping local political journalism and who it engages, has joined the Knight Lab as a 2022-2023 professional fellow. Her focus is on building The Public Ledger, a data tool structured from local campaign finance data that is designed to track connections and make local political relationships – and their influence – more visible. “Campaign finance data has more stories to tell – if we follow the...

    Continue Reading

  • Interactive Entertainment: How UX Design Shapes Streaming Platforms

    As streaming develops into the latest age of entertainment, how are interfaces and layouts being designed to prioritize user experience and accessibility? The Covid-19 pandemic accelerated streaming services becoming the dominant form of entertainment. There are a handful of new platforms, each with thousands of hours of content, but not much change or differentiation in the user journeys. For the most part, everywhere from Netflix to illegal streaming platforms use similar video streaming UX standards, and...

    Continue Reading

  • Innovation with collaborationExperimenting with AI and investigative journalism in the Americas.

    Lee este artículo en español. How might we use AI technologies to innovate newsgathering and investigative reporting techniques? This was the question we posed to a group of seven newsrooms in Latin America and the US as part of the Americas Cohort during the 2021 JournalismAI Collab Challenges. The Collab is an initiative that brings together media organizations to experiment with AI technologies and journalism. This year,  JournalismAI, a project of Polis, the journalism think-tank at...

    Continue Reading

  • Innovación con colaboraciónCuando el periodismo de investigación experimenta con inteligencia artificial.

    Read this article in English. ¿Cómo podemos usar la inteligencia artificial para innovar las técnicas de reporteo y de periodismo de investigación? Esta es la pregunta que convocó a un grupo de siete organizaciones periodísticas en América Latina y Estados Unidos, el grupo de las Américas del 2021 JournalismAI Collab Challenges. Esta iniciativa de colaboración reúne a medios para experimentar con inteligencia artificial y periodismo. Este año, JournalismAI, un proyecto de Polis, la think-tank de periodismo...

    Continue Reading

  • AI, Automation, and Newsrooms: Finding Fitting Tools for Your Organization

    If you’d like to use technology to make your newsroom more efficient, you’ve come to the right place. Tools exist that can help you find news, manage your work in progress, and distribute your content more effectively than ever before, and we’re here to help you find the ones that are right for you. As part of the Knight Foundation’s AI for Local News program, we worked with the Associated Press to interview dozens of......

    Continue Reading

Storytelling Tools

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

View More