WEB MAPPING
© 2008 TAYLOR & FRANCIS GROUP, LLC CONTENTS 1 INTRODUCTION THE PURPOSE OF THIS BOOK QUALIFIER: THIS IS NOT A BOOK ABOUT CODING (THAT IS, NO JAVASCRIPT REQUIRED) THE INTENDED AUDIENCE CONTEMPORARY MAPMAKING: A QUARTER CENTURY OF RAPID EVOLUTION WEB CARTOGRAPHY: A BRIEF HISTORY THEMATIC CARTOGRAPHY: THE PRECURSOR TO MULTIMEDIA CARTOGRAPHY THE RISE OF MULTIMEDIA MAPMAKING WHAT HAPPENED TO PAPER? EARLY HYPERMEDIA WHY HYPERMEDIA EVOLVED INTO WEB MAPPING HOW GOOGLE MAPS REVOLUTIONIZED (OR WAS IT EUTHANIZED?) MAPMAKING THE FUTURE OF WEB CARTOGRAPHY MAY BE BROWSER-LESS THE GOALS OF MAP COMMUNICATION REMAIN THE SAME ESTABLISHING A COMMUNICATIVE PURPOSE FOR YOUR MAP WHO IS THE INTENDED AUDIENCE? WHAT DATA NEED TO BE COMMUNICATED? HOW DO I DESIGN MY MAP SO INFORMATION IS EASILY RECALLED? HOW DO I DETERMINE WHICH, AND HOW MUCH, DATA TO INCLUDE? DESIGNING YOUR MESSAGE THE REST OF THIS BOOK KEY CONCEPTS FURTHER READING REFERENCES 2 HUMAN-MAP INTERACTIVITY INTRODUCTION OF MICE AND TOUCH SCREENS NEW INTERACTIVE MAP ELEMENTS FURTHER READING AND RESOURCES ONLINE RESOURCE © 2008 TAYLOR & FRANCIS GROUP, LLC 3 MAP ELEMENTS TITLE/SPLASH SCREEN THE ARGUMENT FOR SPLASH SCREENS MAPPED AREA PAN USER INTERFACES PANNING ARROWS SHOULD BE BANNED ARROW KEYS CLICK AND DRAG AND TOUCH PAN ZOOM USER INTERFACES ZOOM BARS PLUS AND MINUS ZOOM BUTTONS DOUBLE CLICK AND TAP SCROLL WHEEL AND PINCH TO ZOOM KEYBOARD SHORTCUTS RECTANGLE ZOOM ZOOM USER INTERFACES CONCLUSION MAP ROTATION INTERFACES TWO TYPES OF ROTATION INFORMATION WINDOW DESIGN LOCATOR MAPS MENU DESIGN THE THREE-CLICK RULE IS WRONG BUT IT REMAINS A USEFUL AXIOM ORGANIZE, TEST, AND CONFIRM STEP ONE: ORGANIZE YOUR MENUS STEP TWO: DESIGN YOUR MENUS STEP THREE: CONDUCT USER TESTS STEP FOUR: REORGANIZE YOUR MENUS SUPPLEMENTAL INFORMATION HELP MENU NEAT LINES AND FRAME LINES DESIGNING SMART LEGENDS THE PURPOSE OF A LEGEND REMAINS THE SAME HOW TO AVOID CREATING INEFFECTIVE WEB MAP LEGENDS HOW INTERACTIVITY MAKES LEGENDS MORE POWERFUL HAVING OPTIONS = FEELING IN CONTROL LAYER INTERACTIVITY MAP AND DATA GENERALIZATION SYMBOL AND THEMATIC MODIFICATION TEMPORAL LEGENDS FOR ANIMATIONS OTHER WEB MAP ELEMENTS MULTIMEDIA GRAPHICS IMAGES VIDEOS GRAPHS AND HIGHLIGHTING © 2008 TAYLOR & FRANCIS GROUP, LLC TIPS FOR EFFECTIVE MAP–CHART GRAPHIC HIGHLIGHTING WEB SITES 4 MAP COMPOSITION AND LAYOUT MAP COMPOSITION AND VISUAL HIERARCHY TECHNIQUES OF EMPHASIZING MAP ELEMENTS IN THE VISUAL HIERARCHY NEW VISUAL HIERARCHIES FOR WEB MAP ELEMENTS REFERENCE/GENERAL-INTEREST WEB MAP VISUAL HIERARCHY THEMATIC WEB MAPS TEMPORAL ANIMATED WEB MAPS MAP LAYOUT AND ORGANIZATION SCREEN REAL ESTATE, RESOLUTION, AND THE PIXEL PROBLEM SCREEN REAL ESTATE SCREEN RESOLUTION PIXELS PER INCH PPI ADVANCEMENT = BIG MESS TWO TYPES OF WEB MAP LAYOUTS FLUID MAP LAYOUT COMPARTMENTALIZED MAP LAYOUT WEB MAP LAYOUTS COMPARTMENTALIZED MAP LAYOUTS FLUID MAP LAYOUTS HOW TO DESIGN AN EFFECTIVE WEB MAP LAYOUT CONCLUSION RESOLUTION TESTERS TUTORIAL RESOURCES 5 COLOR DEFINING AND UNDERSTANDING COLOR THREE PROPERTIES OF COLOR HUE VALUE SATURATION MAKING SENSE OF THE COLOR WHEEL WARM AND COLD COLORS PRIMARY COLORS SECONDARY COLORS © 2008 TAYLOR & FRANCIS GROUP, LLC TERTIARY COLORS MONOCHROMATIC COLORS ACHROMATIC COLORS COMPLEMENTARY COLORS SPLIT COMPLEMENTARY COLORS ANALOGOUS NEUTRAL INCONGRUOUS SIMULTANEOUS CONTRAST: IT HAPPENS COLOR RULES THAT REMAIN UNCHANGED FROM PRINT LESS COLOR VARIATION IS MORE POWERFUL DIFFERENT COLORS HAVE DIFFERENT MEANINGS TO DIFFERENT PEOPLE COLORS AND FEELINGS THE MEANING OF COLOR VARIES BY CULTURE COLOR PREFERENCES CHANGE OVER TIME COLOR MODELS FOR THE WEB RGB (RED, GREEN, AND BLUE) RGB DECIMAL RGB HEXADECIMAL HUE, SATURATION, AND LIGHTNESS RGB COLORS WILL LOOK DIFFERENT DEPENDING ON THE SCREEN NEVER DESIGN WEB MAPS WITH CMYK COLORING YOUR BASE MAP SOLID-COLOR BASE MAPS SHADED RELIEF AERIAL PHOTOGRAPHY REFERENCE MAP COLOR SCHEMES WHEN TO IGNORE COLOR CONVENTIONS NOVELTY EQUALS ATTENTION DOES THE COLOR SCHEME MATCH THE MESSAGE? RESOURCES FOR FINDING COLORS CHOOSING THEMATIC MAP COLORS BEWARE OF COLOR BLINDNESS ONLINE COLOR RESOURCES COLOR MEANINGS AND EMOTIONS COLOR PICKERS COLOR STYLE TOOLS FOR DIFFERENT MAP SERVICES HEXADECIMAL COLOR CREATOR 6 TYPOGRAPHY ALL IN THE FAMILY: EXPLAINING TYPEFACE AND FONT © 2008 TAYLOR & FRANCIS GROUP, LLC TYPOGRAPHIC RULES THAT STAND FIRM NO MORE THAN TWO FONTS PER MAP FONT STYLES AND PROPERTIES INDICATE DIFFERENT THINGS TEXT AS A CORE MAP ELEMENT LABELING NORMS TYPOGRAPHIC RULES THAT HAVE CHANGED WHEN POSSIBLE, DITCH SERIF FONTS SIZE DOES MATTER FONT SIZE IS NOW VOODOO SCIENCE NOT EVERYONE HAS ACCESS TO THE FONTS YOU DO WILL YOUR MAP HAVE INTERACTIVE TEXT? FONTS THAT PLAY WELL WITH WEB MAPS VERDANA CENTURY GOTHIC ARIAL AND HELVETICA TREBUCHET MS TAHOMA CORBEL MYRIAD PRO AND MYRIAD WEB GEORGIA PALATINO COMPARING TYPE ON YOUR WEB MAP FONT MYTHS, REALITIES, AND WEB MAPS WEB SITES ON WEB TYPOGRAPHY 7 CORE VISUAL VARIABLES DEFINING THE VISUAL VARIABLES SHAPE ORIENTATION TEXTURE SIZE PERSPECTIVE HEIGHT WHEN TO USE THE DIFFERENT VISUAL VARIABLES VISUAL VARIABLES FOR MAPPING QUALITATIVE DATA VISUAL VARIABLES FOR MAPPING QUANTITATIVE DATA COMBINING VISUAL VARIABLES © 2008 TAYLOR & FRANCIS GROUP, LLC FURTHER READING 8 SYMBOLIZATION DESIGNING EFFECTIVE WEB MAP SYMBOLS KEEP SYMBOLS SIMPLE GENERIC CARICATURES ARE BEST SYMBOLS ARE ERA AND AUDIENCE DEPENDENT SYMBOLS ARE CONTEXT DEPENDENT HOW DO YOU REPRESENT A STADIUM? 9 THEMATIC VISUALIZATION DATA AND TECHNOLOGY LIMITATIONS THE NATURE OF THE MAPPED DATA TECHNOLOGICAL LIMITATIONS MERCATOR’S APPARITION DIFFERENT THEMATIC REPRESENTATIONS CHOROPLETH MAPS DATA CLASSIFICATION NATURAL BREAKS QUANTILES EQUAL INTERVALS STANDARD DEVIATIONS UNCLASSED CHOROPLETH MAPS BENEFITS OF CHOROPLETH MAPS DRAWBACKS OF CHOROPLETH MAPS DOT MAPS HEAT MAPS BENEFITS OF DOT MAPS DRAWBACKS OF DOT MAPS PROPORTIONAL AND GRADUATED SYMBOL MAPS BENEFITS OF PROPORTIONAL AND GRADUATED SYMBOL MAPS DRAWBACK OF PROPORTIONAL AND GRADUATED SYMBOL MAPS ISARITHMIC MAPS ISARITHMIC MAP DESIGN BENEFITS AND DRAWBACKS OF ISARITHMIC MAPS FLOW MAPS BENEFITS AND DRAWBACKS OF FLOW MAPS CARTOGRAMS BENEFITS AND DRAWBACKS OF CARTOGRAMS MULTIVARIATE MAPS © 2008 TAYLOR & FRANCIS GROUP, LLC THEMATIC COMBINATIONS COLORED DOTS CHART MAPS CHERNOFF FACES BIVARIATE CHOROPLETH MAPS THE ROLE OF INTERACTIVITY IN THEMATIC REPRESENTATIONS RESOURCE 10 ANIMATION TO TWEEN OR NOT TO TWEEN? STOP-FRAME ANIMATION TWEENING THE VISUAL VARIABLES OF ANIMATION DIBIASE’S VISUAL VARIABLES FOR ANIMATION DURATION RATE OF CHANGE ORDER ADDITIONAL VISUAL VARIABLES OF MAP ANIMATION DISPLAY DATE FREQUENCY SYNCHRONIZATION TYPES OF MAP ANIMATION DESIGNING TEMPORAL ANIMATIONS KEEP THE ANIMATIONS SHORT SIMPLIFY THE DATA GIVE THE MAP USER SOME CONTROL TEMPORAL LEGENDS TEMPORAL LEGEND STYLES TEMPORAL LEGEND ENHANCEMENTS OTHER TYPES OF MAP ANIMATION ZOOM ANIMATIONS FLY-THROUGH ANIMATIONS PATH ANIMATIONS SUMMARY FURTHER READING AND ONLINE RESOURCES ONLINE RESOURCES EXAMPLE ANIMATIONS © 2008 TAYLOR & FRANCIS GROUP, LLC 11 SOUND AND TOUCH SOUND VARIABLES KRYGIER’S SOUND VARIABLES LOUDNESS PITCH ATTACK AND DECAY SOUND DECAY? TACTILE VARIABLES FURTHER READING AND RESOURCE 12 WEB MAP PRODUCTION THE GIST ON CODING WHAT WAS FLASH? WHAT IS HTML5? HTML CASCADING STYLE SHEETS JAVASCRIPT APPLICATION PROGRAMMING INTERFACES PREPPING SPATIAL DATA FOR THE WEB CHOOSING A PROJECTION COMMON WEB MAP DATA FORMATS KEYHOLE MARKUP LANGUAGE GEOJSON SCALABLE VECTOR GRAPHICS MAP TILES GEOSPATIAL PDFS HOW DO I CREATE THESE DATA TYPES? GEOGRAPHIC INFORMATION SYSTEMS NON-GIS DATA CREATION APPLICATIONS A WEB CARTOGRAPHER’S TOOL BOX HTML5 AND SVGS AVENZA MAPUBLISHER ADOBE FLASH AND ADOBE AIR ORACLE JAVA ESRI ARCGIS ONLINE AND API TILEMILL APPLICATION AND MAPBOX API CARTODB WEB SITE AND API GOOGLE MAPS API CLOUDMADE LEAFLET API © 2008 TAYLOR & FRANCIS GROUP, LLC OTHER APIS CLOSING ADVICE ONLINE RESOURCES AND TUTORIALS WEB CARTOGRAPHY COMPANION WEB SITE (HTTP://WWW MUEHLENHAUS COM/WEBCARTOGRAPHY) FLOWING DATA (HTTP://WWW FLOWINGDATA COM) LYNDA COM (HTTP://WWW LYNDA COM) W3SCHOOLS (HTTP://WWW W3SCHOOLS COM) RECOMMENDED TUTORIAL GUIDES AND BOOKS THE MISSING MANUAL SERIES BY O’REILLY FROM PRINT TO MOBILE MAPPS TUTORIAL VISUALIZE THIS BY NATHAN YAU WISCONSIN STATE CARTOGRAPHER WEB SITE (HTTP://WWW SCO WISC EDU) CARTOGRAPHIC PERSPECTIVES JOURNAL (HTTP://WWW CARTOGRAPHICPERSPECTIVES ORG) CARTOGRAPHY AND GEOGRAPHIC INFORMATION SCIENCE JOURNAL (CAGIS) ONLINE MAPS WITH APIS AND WEB SERVICES, EDITED BY MICHAEL P PETERSON