Story Maps: Configuring and Customizing Web Apps

Gregory L’Azou - glazou@esri.com - github.com/glazouStephen Sylvia - ssylvia@esri.com - github.com/ssylvia

Agenda

• Introduction to Story Maps• Technical Architecture• Story Maps Builder Demo• Customization Examples• Dive in the Code• Generate your Story Maps• Road Ahead• Conclusion• Questions and Discussion

Thinking AboutStorytelling

Introduction to Story Maps

What is a Story?

An account of events

A way to clarify complex phenomena

A way to communicate

What is a

Map? A representation of the world

A way to reveal patterns

A way to communicate

Story Map

Story Map

Story Maps are simple web apps that combine interactive maps,

What areStory Maps?

Story Maps are simple web apps that combine interactive maps, multimedia content,

Story Maps are simple web apps that combine interactive maps, multimedia content, and user experiences

Story Maps are simple web apps that combine interactive maps, multimedia content, and user experiences to tell stories about the world.

Most Story Maps are hosted by Esri in the cloud. (But you can opt to host them yourself.)

Story Maps are open source. You’re free to download and customize them.

Most Story Maps incorporate builder functions that enable you to build a sophisticated story with no GIS or web development skills.

Most Story Maps work equally well on PCs, laptops, tablets, and smartphones.

Sequential Narrative

Ranked List of Places

List of Items

Comparing Related Maps

Comparing Two Maps

Comparing Two Maps

Comparing Related Maps

Curated List of POIs

Using Maps to Tell Many Kinds of Stories

Journal-style

narrative

Displaying a single map

Custom projects

Timeline

Story Mapapps

A Variety of Story Map Apps

Story Map Tour

Sequential Narrative

Story Map Countdown

Ranked List of Places

Story Map Playlist

List of Items

Story Map Side

Accordion

Comparing Related Maps

Story Map Spyglass

Comparing Two Maps

Story Map Swipe

Comparing Two Maps

Story Map Tabbed

Comparing Related Maps

Story Map Shortlist

Curated List of POIs

Story Map Journal

Journal-style

narrative

Story Map Basic

Displaying a single map

Custom story maps

Custom projects

More to come!

What to consider to make the best Story Maps.

Consider Your Audience

• Your audience may not speak your “language”

• They’ll have a range of knowledge, interest, and expertise

• They’ll all appreciate simplicity and clarity

Lure Them In

• Active, descriptive, evocative text—not a label• Use colors and font styles to call out main points

Make your Map Sing

• Configure your popups

Make your Map Sing

• Configure your popups

Make your Map Sing

• Configure your popups

• Simplify your legends

Make your Map Sing

• Configure your popups

• Simplify your legends

Make your Map Sing

• Configure your popups

• Simplify your legends

• Refine your cartography

Transparency

Display Scale Range

SymbolsNO!

Elimin te!a

Getting Started withStory Maps.

Simple, IntuitiveAnd Hosted

Story Maps Builder Demos

Story Map JournalStory Map Tour

www.arcgis.com/apps/MapTour/?fromScratch www.arcgis.com/apps/MapJournal/?fromScratch

Designing theCode

Technical Architecture

Overview

• Focused, lightweight, responsive• WYSIWYG builder• Good default, some options, easy to customize• Integrated in ArcGIS Online and OpenSource

Technology

• Modular design (AMD)• No JavaScript framework• Views use lodash template• Build chain on node and grunt

Logo source: logo-kid.com/javascript-logo-png.htm

TemplateTemplate

Architecture Overview

Story Maps common

Template

Builder UI

Core

UI Utils

Builder UIUICore

BuilderViewMainView

Libs

NodeGruntJSHint

Require.js Optimizer

ArcGIS API for JavaScript

jQuery, Bootstrap

Architecture detail 1/2• Common framework across templates

• Integrated viewer and builder

Architecture detail 2/2• UI Module

API for developers

Three levels of customizations1. CSS in index.html

2. JavaScript using the app’s API in index.html

3. Modify the source code and build

Get Inspired!

Customization Examples

ExamplesMap Tour

http://www.gis.dcnr.state.pa.us/storymaps/nationalnatural/http://simcoetrails.ca/maps/http://kygeonet.ky.gov/StoryMaps/KyFrontierTrails/

Map Journalhttp://www.animalplanet.com/tv-shows/ice-cold-gold/episode-journals/prelude/http://storymaps.esri.com/stories/2014/growth-of-cities/http://www.unaids.org/citiesreport/http://geoapps.esri.co/dakar2015/

Map Serieshttp://demos.esri.cl/SanValentin2015/index.htmlhttp://kygeonet.ky.gov/StoryMaps/KyFromAbove/http://storymaps.esri.com/stories/2015/circles/

Shortlisthttp://storymaps.esri.com/stories/2015/presidential-colleges/http://www.macarteweb.com/defi-nature-30X30/

Playlisthttp://storymaps.esri.com/stories/2014/wilderness-photos/

Customhttp://storymaps.esri.com/stories/2014/zoo-babies/http://storymaps.esri.com/stories/2014/farmers-markets/http://storymaps.esri.com/stories/2014/tornadoes/http://www.directrelief.org/voices/

See how it’sDone

Dive in the Code

Dive in the code• Explore The Rockefeller Foundation Resilient Cities

• CSS in index.html• http://downloads.esri.com/agol/pub/resilientcities/index.html

• A world of circles• JavaScript using the API in index.html• http://storymaps.esri.com/stories/2015/circles/

• Where are the bodies• JavaScript using the API in index.html• http://storymaps.esri.com/stories/2014/where-are-the-bodies/

• Growth of cities• JavaScript customization of Map Journal using the source code• http://storymaps.esri.com/stories/2014/growth-of-cities/• https://github.com/ssylvia/growth-of-cities

Peek Behind the Curtain

Generate your Story Map

github.com/glazou/story-map-journal-generator

Demo

What’s new andUpcoming

Road Ahead

Road Ahead

• New Map Tour and Map Journal Layouts

A New Map Tour Layout

• More immersive design

• Ability to switch between map-centric and image-centric views

A new Map Journal layout

• Full-screen scroll

Road Ahead

• New Map Tour and Map Journal Layouts• Shortlist builder• A Prototype Crowdsourcing App

A Prototype Crowdsourcing App

• Fun and easy to use

• Sign in with social media account

• Share photo via social media, drag-n-drop…

• Smartphone

Road Ahead

• New Map Tour and Map Journal Layouts• Shortlist builder• A Prototype Crowdsourcing App• Enhancements to our website: My Stories

My Stories

• Manage your Story Maps

• Automatically find issues

• Submit your story to our gallery

Road Ahead

• New Map Tour and Map Journal Layouts• Shortlist builder• A Prototype Crowdsourcing App• Enhancements to our website

• Better performance• 3D and Vector Basemaps• More Features, better developer API, more Samples…

Join the community

Conclusion

Conclusion

• We’d love to hear from you!• Submit your app to the gallery (storymaps.arcgis.com/gallery/)• Checkout the forum (storymaps.arcgis.com/en/support/)• Get in touch on GitHub (esri.github.io/#Storytelling)

• Watch the repos for updates• Open issues• Contribute with pull-requests

• Like what we’re doing? We’re hiring JavaScript developers

Questions and Discussion

Rate This Sessionwww.esri.com/RateMyDevSummitSession