story maps: configuring and
TRANSCRIPT
Story Maps: Configuring and Customizing Web Apps
Gregory L’Azou - [email protected] - github.com/glazouStephen Sylvia - [email protected] - 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