1. Karsten Vennemann, Seattle Cartography and composition of interactive Maps

2. slide 2 of 13 Cartography and composition of interactive Maps Talk Focus Motivation and Goals Rapid Evolution of Interactive Maps (Short Review) Goals of Map Communication Composition of Interactive Maps Cartography of Interactive Maps  Highlight differences web vs. static maps Conclusions Talk Focus

3. slide 3 of 13 Cartography and composition of interactive Maps 1. Motivation and Goals rapid evolution of interactive maps few resources regarding design and composition overview of differences between static maps and interactive maps introduce a selection of concepts (design and composition) NOT covered here complete guidelines web map production technical implementation and software animation, sound, and touch in interactive maps Motivation and Goals

4. slide 4 of 13 Cartography and composition of interactive Maps 2. Rapid Evolution of Interactive Maps Rapid Evolution of Interactive Maps

5. slide 5 of 13 Cartography and composition of interactive Maps Map Quest1996 Yahoo maps 2002 Open Street Map2004 Google maps 2005 Bing maps2005 Rapid Evolution of Interactive Maps 1994/95 early web maps Internet just starting to take off Tile services and mapping APIs emerge

6. slide 6 of 13 Cartography and composition of interactive Maps “Mash-ups” appear  many created by “non-cartographers” Map Rendering Server software releases 1994 MapServer (NASA/ForNet) 1997 ArcView Internet Map Server 2000 ArcIMS 3 2001 GeoServer 2004 ArcGIS Server 2005 Mapnik (OSM) 2006 MapGuide Open Source Rapid Evolution of Interactive Maps

7. slide 7 of 13 Cartography and composition of interactive Maps Rapid Evolution of Interactive Maps Over time many different display devices

8. slide 8 of 13 Cartography and composition of interactive Maps Four examples from my work 1998 to 2014 Rapid Evolution of Interactive Maps - Examples

9. slide 9 of 13 Cartography and composition of interactive Maps Atlas of Natural and Agronomic Resources of Niger and Benin - static map images, legends and data base Example Year 1998 Rapid Evolution of Interactive Maps

10. slide 10 of 13 Cartography and composition of interactive Maps ArcGIS and Citrix-Metaframe - Soil Erosion Modeling Graduate classes, e-learning in landscape planning Example Year 2002 Rapid Evolution of Interactive Maps - Examples

11. slide 11 of 13 Cartography and composition of interactive Maps Year 2008 - Examples Mapping People in Need The WA State Office of Civil Legal Aid Web GIS The WA State Office of Civil Legal Aid Web GIS Obama Campaign 2008 Mapping voters with MapServer, PostGIS and OpenLayers Mapping voters with MapServer, PostGIS and OpenLayers Rapid Evolution of Interactive Maps - Examples

12. slide 12 of 13 Cartography and composition of interactive Maps JS Library Leaflet + GeoJSON + data base (PostGIS) Downloads of gvSIG desktop GIS Example Year 2014 Rapid Evolution of Interactive Maps

13. slide 13 of 13 Cartography and composition of interactive Maps 3. Goals of Map Communication Goals of Map Communication

14. slide 14 of 13 Cartography and composition of interactive Maps Purpose of a Map Goals of Map Communication Maps are a form of spatial communication Presentation medium does not matter most maps are designed to communicate and convey information to a map user / reader Effective map design: Establish the communicative purpose of the map ! Goals of Map Communication

15. slide 15 of 13 Cartography and composition of interactive Maps Principles of effective Map Communication Purpose of the map is essential and should drive all design decisions Appeal to audience, but not necessarily everyone Limit what the map tries to convey Add interactive elementes not by default BUT only if they facilitate communication goals Adapted from Muehlenhaus, I. ( 2014): Web Cartography Goals of Map Communication

16. slide 16 of 13 Cartography and composition of interactive Maps 3. Goals of Map Communication 3a. Composition of Interactive Maps Goals of Map Communication

17. slide 17 of 13 Cartography and composition of interactive Maps Differences vs paper maps Map reader is now a map user Form of multimedia mapping Human – map interactivity can change state of the map Interactive Elements Many unknowns viewing device resolution screen real estate representation Goals of Map Communication - Composition of Interactive Maps

18. slide 18 of 13 Cartography and composition of interactive Maps Human interaction with a map Mice vs touch screens WIMP interfaces windows, icons, menues, pointer based Touch screens multi touch, can also have gesture control, eye tracking etc New interactive elements (vs paper maps) map elements have become part of the GUI Goals of Map Communication - Composition of Interactive Maps

19. slide 19 of 13 Cartography and composition of interactive Maps Interactive elements - Examples Title and splash screen Map area Pan or Zoom user interfaces Info Window Locator Maps Menu and its design, Neat lines, Help Menu Smart Legends Other Multimedia graphics, Images, Videos, Graphs + Highlighting Goals of Map Communication - Composition of Interactive Maps

20. slide 20 of 13 Cartography and composition of interactive Maps Visual Hierarchy Levels & relative importance Goals of Map Communication - Composition of Interactive Maps Adapted from Dent et all (2008) LevelMap Element 1 Title /Splash Screen Thematic Visualizations Legend 2 Base Map Info Windows Chart Graphics 3 Base Map Labels Map Interactivity pan /zoom/rotation etc menus with additional tools 4 Locator Maps Multimedia Supplements 5 Map Interactivity Attribution and copyright Neatlines /Grids/Graticules Tool Tips Level Map Element 1aThematic Symbols 1b Title Legend Map Symbols Labels 2 Base Map Land areas Political Boundaries Significant Physical Features 2-3 Explanatory Materials Map sources Credits 3 Base Map: Water Features 4 Other Base Map Elements Labels Grids Scales Adapted from Muehlenhaus, I. ( 2014) INTERACTIVE MAPS STATIC MAPS

21. slide 21 of 13 Cartography and composition of interactive Maps Layout + Organization depends on screen real estate resolution (size in pixel vertical columns * horizontal rows) pixels per inch another thing (size of each pixel) -> size of a pixel becomes tiny in high Def. devices Goals of Map Communication - Composition of Interactive Maps

22. slide 22 of 13 Cartography and composition of interactive Maps Pixels per inch - implications SOURCE Muehlenhaus, I. ( 2014): Web CartographySOURCE IDC 2005 Goals of Map Communication - Composition of Interactive Maps

23. slide 23 of 13 Cartography and composition of interactive Maps SOURCE http://jgrasstechtips.blogspot.com/2014/05/geopaparazzi-395-is-out.htmlhttp://jgrasstechtips.blogspot.com/2014/05/geopaparazzi-395-is-out.html NOT scaled, tiny labels scaled, bigger labels Scaling of OSM online tiles on high resolution devices Goals of Map Communication - Composition of Interactive Maps NOT scaled, tiny labels scaled, bigger labels NOT scaled, tiny labels

24. slide 24 of 13 Cartography and composition of interactive Maps Web map layout types compartmentalized fluid formal presentation separation of maped area and other map elements work well on big screens Goals of Map Communication - Composition of Interactive Maps map elements distributed around the mapped area best choice for mobile devices

25. slide 25 of 13 Cartography and composition of interactive Maps Effective Web map Design – short „How to“ according to Muehlenhaus 2014 Identify user audience & expectations Determine type of Interactive map Select Map elements Design mock-up and user test Finalize map and user test Goals of Map Communication - Composition of Interactive Maps

26. slide 26 of 13 Cartography and composition of interactive Maps 3. Goals of Map Communication 3b. Cartography of Interactive Maps Goals of Map Communication

27. slide 27 of 13 Cartography and composition of interactive Maps Cartography of Interactive Maps Many of the following apply largely unchanged – Color – Typography – Core Visual Variables – Symbolization – Thematic Visualization Goals of Map Communication - Cartography of Interactive Maps Source: Muehlenhaus, I. ( 2014): Web Cartography, page 127 Shape Size Orientation Height Texture Hue Value Saturation

28. slide 28 of 13 Cartography and composition of interactive Maps Less certainty of representation than print maps many unkowns Color RGB, additive color model for all screens Depending on screen, not 100% sure of representation Typography Vector labels depend on installed fonts, ccs style specifies font family Sans serif face types recommended ( often called fonts) per map 2 types of fonts maximum Goals of Map Communication - Cartography of Interactive Maps

29. slide 29 of 13 Cartography and composition of interactive Maps Symbolization Mash-up syndrom - just say „web map“ and everybody instantly sees a Google base map with upside down teardrops Goals of Map Communication - Cartography of Interactive Maps

30. slide 30 of 13 Cartography and composition of interactive Maps Default or custom symbols Goals of Map Communication - Cartography of Interactive Maps

31. slide 31 of 13 Cartography and composition of interactive Maps Mercator Web Projection - Issues – Ubiquitous Google type layers Arnulf Christl at FOSS4G 2010 (2008-2012 President of OSGeo): “In 2008: All maps have become static and street maps” – Familarity of users with these set expectations – Often web map makers do not create their own base maps – consequently often overlooked: does color scheme match the communicative message? does the base map match the web site style it is embeded into? Goals of Map Communication - Cartography of Interactive Maps How Google enabled Web mapping ? How Google enabled euthanized Web mapping ?

32. slide 32 of 13 Cartography and composition of interactive Maps Goals of Map Communication - Cartography of Interactive Maps Base Map Google vs Custom

33. slide 33 of 13 Cartography and composition of interactive Maps Aerial Photography Layers traditionally goal was to abstract reality mimicking reality, makes decison making harder, less predictable often does not add communicative value difficult to make important other information noticeable better avoided Thematic maps best choice is to use equal area map projections Goals of Map Communication - Cartography of Interactive Maps

34. slide 34 of 13 Cartography and composition of interactive Maps 4. Conclusions Many factors play a role how well an interactive map „works“ for the audience Technology anxiety - Don‘t worry about it it is NOT about using the latest or coolest technology it is about communicating well Main Goal: communicate clearly and intuitively Conclusions

35. slide 35 of 13 Cartography and composition of interactive Maps References Muehlenhaus, I. (2014): Web Cartography. Map design for Interactive and Mobile devices. 240 pages. CRC Press, Boca Raton Dent, B. D., Torguson J. et all (2008): Cartography: Thematic Map Design. 369 pages. New York. McGraw-Hill. Edition 6. References