GIS and Remote Sensing M Map Design for Interactive and Mobile Devices u e “If you have interests in web maps but feel lost in a push-pin forest, this book will h chart a course for you. If you know about cartography but are unsure how to project le Web Cartography your knowledge to web space, this book will help you make the transformation. n h Ian Muehlenhaus provides us with an insightful, accessible, readable, and spirited a perspective on web mapping for everyone interested in effectively and clearly u Map Design for Interactive s communicating their spatial ideas to the world.” —Patrick Kennelly, Long Island University and Mobile Devices “This book fills an important need for attention to map design in that new technology. … could serve as the cartography textbook in web cartography class, W or as an ancillary text for any course dealing with mobile application development that incorporates map resources. … Its focus on design, its non-technical approach, E and conversational tone make this book accessible to everybody who is interested in the subject, regardless of technological skill level.” B —Jeffrey S. Torguson, St. Cloud State University C Guidelines and Best Practices for Designing Aesthetically Pleasing Interactive Web Maps A Web mapping technologies continue to evolve at an incredible pace. Technology R is but one facet of web map creation, however. Map design, aesthetics, and user- interactivity are equally important T for effective map communication. O From interactivity to graphical user interface design, from symboliza- Web Cartography G tion choices to animation, and from layout to typeface and color selec- R tion, Web Cartography offers the A first comprehensive overview and guide for designing beautiful and P effective web maps for a variety of devices. Visit the accompanying H book site at: www.ian.muehlen- haus.com/webcartography Y K13537 Ian Muehlenhaus 6000 Broken Sound Parkway, NW Suite 300, Boca Raton, FL 33487 ISBN: 978-1-4398-7622-0 711 Third Avenue 90000 New York, NY 10017 an informa business 2 Park Square, Milton Park www.crcpress.com Abingdon, Oxon OX14 4RN, UK 9 781439 876220 w w w. c r c p r e s s . c o m K13537 cvr mech.indd 1 11/7/13 3:34 PM Web Cartography Map Design for Interactive and Mobile Devices Web Cartography Map Design for Interactive and Mobile Devices Ian Muehlenhaus CRC Press Taylor & Francis Group 6000 Broken Sound Parkway NW, Suite 300 Boca Raton, FL 33487-2742 © 2014 by Taylor & Francis Group, LLC CRC Press is an imprint of Taylor & Francis Group, an Informa business No claim to original U.S. Government works Version Date: 20131113 International Standard Book Number-13: 978-1-4398-7623-7 (eBook - PDF) This book contains information obtained from authentic and highly regarded sources. Reasonable efforts have been made to publish reliable data and information, but the author and publisher cannot assume responsibility for the validity of all materials or the consequences of their use. The authors and publishers have attempted to trace the copyright holders of all material reproduced in this publication and apologize to copyright holders if permission to publish in this form has not been obtained. If any copyright material has not been acknowledged please write and let us know so we may rectify in any future reprint. Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmit- ted, or utilized in any form by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying, microfilming, and recording, or in any information storage or retrieval system, without written permission from the publishers. For permission to photocopy or use material electronically from this work, please access www.copyright. com (http://www.copyright.com/) or contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923, 978-750-8400. CCC is a not-for-profit organization that provides licenses and registration for a variety of users. For organizations that have been granted a photocopy license by the CCC, a separate system of payment has been arranged. Trademark Notice: Product or corporate names may be trademarks or registered trademarks, and are used only for identification and explanation without intent to infringe. Visit the Taylor & Francis Web site at http://www.taylorandfrancis.com and the CRC Press Web site at http://www.crcpress.com To Birgit, Svenja, Antja, and Mette. Ich hab euch Lieb. © 2008 Taylor & Francis Group, LLC Contents Preface ..................................................................................................................xvii Acknowledgments ..............................................................................................xix About the Author ................................................................................................xxi 1. Introduction .....................................................................................................1 The Purpose of This Book ..............................................................................1 Qualifier: This Is Not a Book about Coding (That Is, No JavaScript Required) .............................................................2 The Intended Audience ..............................................................................2 Contemporary Mapmaking: A Quarter Century of Rapid Evolution .......3 Web Cartography: A Brief History ................................................................4 Thematic Cartography: The Precursor to Multimedia Cartography ..........................................................................................4 The Rise of Multimedia Mapmaking .......................................................5 What Happened to Paper? ....................................................................8 Early Hypermedia ..................................................................................8 Why Hypermedia Evolved into Web Mapping .................................9 How Google Maps Revolutionized (or Was It Euthanized?) Mapmaking ...........................................................................................10 The Future of Web Cartography May Be Browser-less...................11 The Goals of Map Communication Remain the Same .............................12 Establishing a Communicative Purpose for Your Map............................14 Who Is the Intended Audience? ..............................................................14 What Data Need to Be Communicated? ................................................15 How Do I Design My Map So Information Is Easily Recalled? ......15 How Do I Determine Which, and How Much, Data to Include? .....17 Designing Your Message .........................................................................18 The Rest of This Book ....................................................................................18 Key Concepts ..................................................................................................19 Further Reading .............................................................................................19 References .......................................................................................................20 2. Human-Map Interactivity ...........................................................................21 Introduction ....................................................................................................21 Of Mice and Touch Screens ..........................................................................21 New Interactive Map Elements ....................................................................24 Key Concepts ..................................................................................................25 Further Reading and Resources ..................................................................25 Online Resource ........................................................................................25 Further Reading ........................................................................................25 © 2008 Taylor & Francis Group, LLC vii viii Contents 3. Map Elements ................................................................................................27 Introduction ....................................................................................................27 Title/Splash Screen ........................................................................................27 The Argument for Splash Screens ..........................................................30 Mapped Area ..................................................................................................30 Pan User Interfaces ........................................................................................33 Panning Arrows Should Be Banned ......................................................33 Arrow Keys ................................................................................................34 Click and Drag and Touch Pan ...............................................................34 Zoom User Interfaces ....................................................................................35 Zoom Bars ..................................................................................................35 Plus and Minus Zoom Buttons ...............................................................37 Double Click and Tap ...............................................................................37 Scroll Wheel and Pinch to Zoom ............................................................37 Keyboard Shortcuts ..................................................................................39 Rectangle Zoom.........................................................................................39 Zoom User Interfaces Conclusion ...........................................................40 Map Rotation Interfaces ................................................................................41 Two Types of Rotation ..............................................................................41 Information Window Design .......................................................................42 Locator Maps ..................................................................................................45 Menu Design ..................................................................................................46 The Three-Click Rule Is Wrong But It Remains a Useful Axiom ......47 Organize, Test, and Confirm ...................................................................47 Step One: Organize Your Menus ............................................................47 Step Two: Design Your Menus ................................................................48 Step Three: Conduct User Tests ..............................................................49 Step Four: Reorganize Your Menus ........................................................50 Supplemental Information ...........................................................................50 Help Menu ......................................................................................................50 Neat Lines and Frame Lines .........................................................................51 Designing Smart Legends ............................................................................51 The Purpose of a Legend Remains the Same .......................................51 How to Avoid Creating Ineffective Web Map Legends .......................52 How Interactivity Makes Legends More Powerful ..............................52 Having Options = Feeling in Control ...............................................52 Layer Interactivity ................................................................................53 Map and Data Generalization ............................................................53 Symbol and Thematic Modification ..................................................54 Temporal Legends for Animations.........................................................55 Other Web Map Elements .............................................................................55 Multimedia Graphics ................................................................................55 Images ....................................................................................................55 Videos .....................................................................................................57 Graphs and Highlighting.........................................................................57 © 2008 Taylor & Francis Group, LLC Contents ix Tips for Effective Map–Chart Graphic Highlighting ......................58 Key Concepts ..................................................................................................58 Further Reading and Resources ..................................................................59 Web Sites .....................................................................................................59 Further Reading ........................................................................................59 4. Map Composition and Layout ....................................................................61 Introduction ....................................................................................................61 Map Composition and Visual Hierarchy ...................................................61 Techniques of Emphasizing Map Elements in the Visual Hierarchy ...63 New Visual Hierarchies for Web Map Elements ..................................63 Reference/General-Interest Web Map Visual Hierarchy ................64 Thematic Web Maps ............................................................................64 Temporal Animated Web Maps .........................................................65 Map Layout and Organization ....................................................................65 Screen Real Estate, Resolution, and the Pixel Problem ........................66 Screen Real Estate .................................................................................66 Screen Resolution .................................................................................68 Pixels Per Inch .......................................................................................69 PPI Advancement = Big Mess .............................................................70 Two Types of Web Map Layouts ..................................................................71 Fluid Map Layout ......................................................................................72 Compartmentalized Map Layout ...........................................................73 Web Map Layouts......................................................................................74 Compartmentalized Map Layouts .....................................................74 Fluid Map Layouts ...............................................................................76 How to Design an Effective Web Map Layout ..........................................76 Conclusion ......................................................................................................79 Key Concepts ..................................................................................................80 Further Reading and Resources ..................................................................80 Resolution Testers .....................................................................................80 Tutorial Resources .....................................................................................80 Further Reading ........................................................................................81 5. Color ................................................................................................................83 Introduction ....................................................................................................83 Defining and Understanding Color ............................................................83 Three Properties of Color .........................................................................83 Hue .........................................................................................................83 Value .......................................................................................................84 Saturation ..............................................................................................84 Making Sense of the Color Wheel ..........................................................85 Warm and Cold Colors ........................................................................86 Primary Colors .....................................................................................86 Secondary Colors..................................................................................86 © 2008 Taylor & Francis Group, LLC