Telling Stories with Map Templates

2. July 25, 2012 Telling Stories with Map Templates Allen Carroll, Andrew Skinner, and Rupert Essinger

3. What We’ll Discuss Today 1 What are story maps? 2 Quick tour of recent story maps 3 Components of story maps • Including base maps (Andy) 4 Publishing Web maps into templates 5Shortlist San Diego (Rupert) 6Call to action Questions and discussion

4. 1 What are Story Maps?

5. What are Story Maps? • Story maps combine intelligent Web maps with Web applications and templates that incorporate text, multimedia, and interactive functions. • Story maps inform, educate, entertain, and inspire people about the world.

6. Story maps inspire and inform They’re built with care and thought about your audience Compiled on ArcGIS Online from desktop maps, services, CSVs Repeatedly refined design, configured popups, edited titles and descriptions Published into websites, apps, and templates that provide context and user experience Web map Intelligent map Story map

7. Why are we Making Story Maps? Our team: • Allen Carroll, David Asbury, Lee Bock, Stephen Sylvia • Others: Andy, Rupert, Jim Bernie Szukalski, Herries, Esri’smarketing group, mobile team Our goals • Showcase important geographic information • Develop new ways to tell stories with maps • Demonstrate the power of ArcGIS as a communication platform • Enable thousands of people to create and publish their own story maps

8. 2 Quick Tour of Recent Story Maps

9. Demo • Titanic • National Mall Tour • Feeding the World • Civil War • Olympic Torch Relay storymaps.esri.com

10. 3 Components of Story Maps

11. Assembling a Story Map Raw Materials Map services Tabular data Multimedia content Desktop map Text Base map

12. Assembling a Story Map Raw Materials Web Map(s) • Shared on ArcGIS Online • Ingredients: • Basemap • One or more services • Point data from spreadsheet • Maintains source info • Lightweight, versatile Map services Tabular data Multimedia content Desktop map Text Base map

13. Assembling a Story Map Raw Materials Web Map(s) Apps/templates • Apps provide: • Format for title, text, legend • Key functionalities, e.g., swipe tool, timeline Map services Tabular data Multimedia content Desktop map Text Base map

14. Assembling a Story Map Raw Materials Web Map(s) Apps/templates Audience Map services Mobile Tabular data Tablet Multimedia content Desktop map Text Web Base map

15. Base Maps! Andrew Skinner Raw Materials Web Map(s) Apps/templates Audience Map services Mobile Tabular data Tablet Multimedia content Desktop map Text Web Base map

16. Choosing a Basemap Andy Skinner

17. Choosing a basemap: Types of data • Polygon data

18. Choosing a basemap: Types of data • Polygon data • Line and Point data

19. Choosing a basemap: Selected examples • Imagery

20. Choosing a basemap: Selected examples • Imagery • Light Gray Canvas

21. Choosing a basemap: Selected examples • Imagery • Light Gray Canvas • National Geographic

22. Choosing a basemap: Selected examples • Imagery • Light Gray Canvas • National Geographic • Street

23. Choosing a basemap: Selected examples • Imagery • Light Gray Canvas • National Geographic • Street • Topographic

24. Polygon-based maps: • Is the base detail relevant? • Does the color palette work? • Does transparency help or hinder?

25. Imagery Polygon-based Maps • Is the basemap detail relevant? • Does the color palette work? • Does transparency help or hinder?

26. Light Gray Canvas Polygon-based Maps • Is the base detail relevant? • Does the color palette work? • Does transparency help or hinder?

27. National Geographic Polygon-based Maps • Is the base detail relevant? • Does the color palette work? • Does transparency help or hinder?

28. World Street Polygon-based Maps • Is the basemap detail relevant? • Does the color palette work? • Does transparency help or hinder?

29. World Topographic Polygon-based Maps • Is the basemap detail relevant? • Does the color palette work? • Does transparency help or hinder?

30. Light Gray Canvas

31. World Topographic Map revision

32. Imagery Line and/or Point maps • Is the basemap detail relevant? • Does the color palette work? • Does transparency help or hinder?

33. Light Gray Canvas Line and/or Point maps • Is the basemap detail relevant? • Does the color palette work?

34. National Geographic Line and/or Point maps • Is the basemap detail relevant? • Does the color palette work?

35. World Street Line and/or Point maps • Is the basemap detail relevant? • Does the color palette work?

36. World Topographic Line and/or Point maps • Is the basemap detail relevant? • Does the color palette work? • Does transparency help or hinder?

37. Other web map tips How to make your Web maps Intelligent • Eliminate! • Simplify • Make legends clear and simple • Configure pop-ups

38. Pop-ups from Spreadsheets Name for popup title Description for popup text Typebecomes icon styles Lat-Long for location Image URL for photos Links for “more info”

39. Pop-ups from Spreadsheets Name for popup title Description for popup text Typebecomes icon styles Lat-Long for location Image URL for photos Links for “more info”

40. Pop-ups from Spreadsheets Name for popup title Description for popup text Typebecomes icon styles Lat-Long for location Image URL for photos Links for “more info”

41. Pop-ups from Spreadsheets Before… …After

42. Spend Time Configuring your Pop-ups! Especially useful: “Custom attribute display” option See white paper: “Designing Web Map Popups”

43. 4 Publishing Web Maps into Templates

44. Templates! What do templates do? They provide… Most importantly, a simple user experience that supports the story A place for title and subtitle Social media links Branding Multimedia and text windows Web map placement and controls

45. Basic Storytelling Template

46. Compare Template

47. Swipe Template

48. Side Panel Template

49. Side Panel Template Provides tabbed themes and timeline

50. Map Tour Template Now accommodates web maps