Download - Story Maps: Configuring and
![Page 1: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/1.jpg)
![Page 2: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/2.jpg)
Story Maps: Configuring and Customizing Web Apps
Gregory L’Azou - [email protected] - github.com/glazouStephen Sylvia - [email protected] - github.com/ssylvia
![Page 3: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/3.jpg)
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
![Page 4: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/4.jpg)
Thinking AboutStorytelling
Introduction to Story Maps
![Page 5: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/5.jpg)
What is a Story?
An account of events
A way to clarify complex phenomena
A way to communicate
![Page 6: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/6.jpg)
What is a
Map? A representation of the world
A way to reveal patterns
A way to communicate
![Page 7: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/7.jpg)
Story Map
![Page 8: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/8.jpg)
Story Map
![Page 9: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/9.jpg)
Story Maps are simple web apps that combine interactive maps,
What areStory Maps?
![Page 10: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/10.jpg)
Story Maps are simple web apps that combine interactive maps, multimedia content,
![Page 11: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/11.jpg)
Story Maps are simple web apps that combine interactive maps, multimedia content, and user experiences
![Page 12: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/12.jpg)
Story Maps are simple web apps that combine interactive maps, multimedia content, and user experiences to tell stories about the world.
![Page 13: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/13.jpg)
Most Story Maps are hosted by Esri in the cloud. (But you can opt to host them yourself.)
![Page 14: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/14.jpg)
Story Maps are open source. You’re free to download and customize them.
![Page 15: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/15.jpg)
Most Story Maps incorporate builder functions that enable you to build a sophisticated story with no GIS or web development skills.
![Page 16: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/16.jpg)
Most Story Maps work equally well on PCs, laptops, tablets, and smartphones.
![Page 17: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/17.jpg)
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
![Page 18: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/18.jpg)
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!
![Page 19: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/19.jpg)
What to consider to make the best Story Maps.
![Page 20: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/20.jpg)
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
![Page 21: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/21.jpg)
Lure Them In
• Active, descriptive, evocative text—not a label• Use colors and font styles to call out main points
![Page 22: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/22.jpg)
Make your Map Sing
• Configure your popups
![Page 23: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/23.jpg)
Make your Map Sing
• Configure your popups
![Page 24: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/24.jpg)
Make your Map Sing
• Configure your popups
• Simplify your legends
![Page 25: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/25.jpg)
Make your Map Sing
• Configure your popups
• Simplify your legends
![Page 26: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/26.jpg)
Make your Map Sing
• Configure your popups
• Simplify your legends
• Refine your cartography
Transparency
Display Scale Range
SymbolsNO!
![Page 27: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/27.jpg)
Elimin te!a
![Page 28: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/28.jpg)
Getting Started withStory Maps.
![Page 29: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/29.jpg)
Simple, IntuitiveAnd Hosted
Story Maps Builder Demos
![Page 30: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/30.jpg)
Story Map JournalStory Map Tour
www.arcgis.com/apps/MapTour/?fromScratch www.arcgis.com/apps/MapJournal/?fromScratch
![Page 31: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/31.jpg)
Designing theCode
Technical Architecture
![Page 32: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/32.jpg)
Overview
• Focused, lightweight, responsive• WYSIWYG builder• Good default, some options, easy to customize• Integrated in ArcGIS Online and OpenSource
![Page 33: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/33.jpg)
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
![Page 34: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/34.jpg)
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
![Page 35: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/35.jpg)
Architecture detail 1/2• Common framework across templates
• Integrated viewer and builder
![Page 36: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/36.jpg)
Architecture detail 2/2• UI Module
![Page 37: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/37.jpg)
API for developers
![Page 38: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/38.jpg)
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
![Page 39: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/39.jpg)
Get Inspired!
Customization Examples
![Page 40: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/40.jpg)
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/
![Page 41: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/41.jpg)
See how it’sDone
Dive in the Code
![Page 42: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/42.jpg)
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
![Page 43: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/43.jpg)
Peek Behind the Curtain
Generate your Story Map
![Page 44: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/44.jpg)
github.com/glazou/story-map-journal-generator
Demo
![Page 45: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/45.jpg)
What’s new andUpcoming
Road Ahead
![Page 46: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/46.jpg)
Road Ahead
• New Map Tour and Map Journal Layouts
![Page 47: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/47.jpg)
A New Map Tour Layout
• More immersive design
• Ability to switch between map-centric and image-centric views
![Page 48: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/48.jpg)
A new Map Journal layout
• Full-screen scroll
![Page 49: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/49.jpg)
Road Ahead
• New Map Tour and Map Journal Layouts• Shortlist builder• A Prototype Crowdsourcing App
![Page 50: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/50.jpg)
A Prototype Crowdsourcing App
• Fun and easy to use
• Sign in with social media account
• Share photo via social media, drag-n-drop…
• Smartphone
![Page 51: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/51.jpg)
Road Ahead
• New Map Tour and Map Journal Layouts• Shortlist builder• A Prototype Crowdsourcing App• Enhancements to our website: My Stories
![Page 52: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/52.jpg)
My Stories
• Manage your Story Maps
• Automatically find issues
• Submit your story to our gallery
![Page 53: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/53.jpg)
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…
![Page 54: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/54.jpg)
Join the community
Conclusion
![Page 55: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/55.jpg)
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
![Page 56: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/56.jpg)
Questions and Discussion
![Page 57: Story Maps: Configuring and](https://reader031.vdocuments.mx/reader031/viewer/2022020620/61e41ce541a59a755e6f78d8/html5/thumbnails/57.jpg)
Rate This Sessionwww.esri.com/RateMyDevSummitSession