Preface |
|
xvii | |
Acknowledgments |
|
xix | |
About the Author |
|
xxi | |
|
|
1 | (20) |
|
|
1 | (2) |
|
Qualifier: This Is Not a Book about Coding (That Is, No JavaScript Required) |
|
|
2 | (1) |
|
|
2 | (1) |
|
Contemporary Mapmaking: A Quarter Century of Rapid Evolution |
|
|
3 | (1) |
|
Web Cartography: A Brief History |
|
|
4 | (8) |
|
Thematic Cartography: The Precursor to Multimedia Cartography |
|
|
4 | (1) |
|
The Rise of Multimedia Mapmaking |
|
|
5 | (3) |
|
|
8 | (1) |
|
|
8 | (1) |
|
Why Hypermedia Evolved into Web Mapping |
|
|
9 | (1) |
|
How Google Maps Revolutionized (or Was It Euthanized?) Mapmaking |
|
|
10 | (1) |
|
The Future of Web Cartography May Be Browser-less |
|
|
11 | (1) |
|
The Goals of Map Communication Remain the Same |
|
|
12 | (2) |
|
Establishing a Communicative Purpose for Your Map |
|
|
14 | (4) |
|
Who Is the Intended Audience? |
|
|
14 | (1) |
|
What Data Need to Be Communicated? |
|
|
15 | (1) |
|
How Do I Design My Map So Information Is Easily Recalled? |
|
|
15 | (2) |
|
How Do I Determine Which, and How Much, Data to Include? |
|
|
17 | (1) |
|
|
18 | (1) |
|
|
18 | (1) |
|
|
19 | (1) |
|
|
19 | (1) |
|
|
20 | (1) |
|
2 Human-Map Interactivity |
|
|
21 | (6) |
|
|
21 | (1) |
|
Of Mice and Touch Screens |
|
|
21 | (3) |
|
New Interactive Map Elements |
|
|
24 | (1) |
|
|
25 | (1) |
|
Further Reading and Resources |
|
|
25 | (2) |
|
|
25 | (1) |
|
|
25 | (2) |
|
|
27 | (34) |
|
|
27 | (1) |
|
|
27 | (3) |
|
The Argument for Splash Screens |
|
|
30 | (1) |
|
|
30 | (3) |
|
|
33 | (2) |
|
Panning Arrows Should Be Banned |
|
|
33 | (1) |
|
|
34 | (1) |
|
Click and Drag and Touch Pan |
|
|
34 | (1) |
|
|
35 | (6) |
|
|
35 | (2) |
|
Plus and Minus Zoom Buttons |
|
|
37 | (1) |
|
|
37 | (1) |
|
Scroll Wheel and Pinch to Zoom |
|
|
37 | (2) |
|
|
39 | (1) |
|
|
39 | (1) |
|
Zoom User Interfaces Conclusion |
|
|
40 | (1) |
|
|
41 | (1) |
|
|
41 | (1) |
|
Information Window Design |
|
|
42 | (3) |
|
|
45 | (1) |
|
|
46 | (4) |
|
The Three-Click Rule Is Wrong But It Remains a Useful Axiom |
|
|
47 | (1) |
|
Organize, Test, and Confirm |
|
|
47 | (1) |
|
Step One Organize Your Menus |
|
|
47 | (1) |
|
Step Two Design Your Menus |
|
|
48 | (1) |
|
Step Three Conduct User Tests |
|
|
49 | (1) |
|
Step Four Reorganize Your Menus |
|
|
50 | (1) |
|
|
50 | (1) |
|
|
50 | (1) |
|
Neat Lines and Frame Lines |
|
|
51 | (1) |
|
|
51 | (4) |
|
The Purpose of a Legend Remains the Same |
|
|
51 | (1) |
|
How to Avoid Creating Ineffective Web Map Legends |
|
|
52 | (1) |
|
How Interactivity Makes Legends More Powerful |
|
|
52 | (1) |
|
Having Options = Feeling in Control |
|
|
52 | (1) |
|
|
53 | (1) |
|
Map and Data Generalization |
|
|
53 | (1) |
|
Symbol and Thematic Modification |
|
|
54 | (1) |
|
Temporal Legends for Animations |
|
|
55 | (1) |
|
|
55 | (3) |
|
|
55 | (1) |
|
|
55 | (2) |
|
|
57 | (1) |
|
|
57 | (1) |
|
Tips for Effective Map-Chart Graphic Highlighting |
|
|
58 | (1) |
|
|
58 | (1) |
|
Further Reading and Resources |
|
|
59 | (2) |
|
|
59 | (1) |
|
|
59 | (2) |
|
4 Map Composition and Layout |
|
|
61 | (22) |
|
|
61 | (1) |
|
Map Composition and Visual Hierarchy |
|
|
61 | (4) |
|
Techniques of Emphasizing Map Elements in the Visual Hierarchy |
|
|
63 | (1) |
|
New Visual Hierarchies for Web Map Elements |
|
|
63 | (1) |
|
Reference/General-Interest Web Map Visual Hierarchy |
|
|
64 | (1) |
|
|
64 | (1) |
|
Temporal Animated Web Maps |
|
|
65 | (1) |
|
Map Layout and Organization |
|
|
65 | (6) |
|
Screen Real Estate, Resolution, and the Pixel Problem |
|
|
66 | (1) |
|
|
66 | (2) |
|
|
68 | (1) |
|
|
69 | (1) |
|
PPI Advancement = Big Mess |
|
|
70 | (1) |
|
Two Types of Web Map Layouts |
|
|
71 | (5) |
|
|
72 | (1) |
|
Compartmentalized Map Layout |
|
|
73 | (1) |
|
|
74 | (1) |
|
Compartmentalized Map Layouts |
|
|
74 | (2) |
|
|
76 | (1) |
|
How to Design an Effective Web Map Layout |
|
|
76 | (3) |
|
|
79 | (1) |
|
|
80 | (1) |
|
Further Reading and Resources |
|
|
80 | (3) |
|
|
80 | (1) |
|
|
80 | (1) |
|
|
81 | (2) |
|
|
83 | (28) |
|
|
83 | (1) |
|
Defining and Understanding Color |
|
|
83 | (7) |
|
Three Properties of Color |
|
|
83 | (1) |
|
|
83 | (1) |
|
|
84 | (1) |
|
|
84 | (1) |
|
Making Sense of the Color Wheel |
|
|
85 | (1) |
|
|
86 | (1) |
|
|
86 | (1) |
|
|
86 | (1) |
|
|
86 | (1) |
|
|
87 | (1) |
|
|
87 | (1) |
|
|
88 | (1) |
|
Split Complementary Colors |
|
|
89 | (1) |
|
|
89 | (1) |
|
|
89 | (1) |
|
|
89 | (1) |
|
Simultaneous Contrast: It Happens |
|
|
90 | (1) |
|
Color Rules That Remain Unchanged from Print |
|
|
90 | (2) |
|
Less Color Variation Is More Powerful |
|
|
90 | (1) |
|
Different Colors Have Different Meanings to Different People |
|
|
90 | (1) |
|
|
91 | (1) |
|
The Meaning of Color Varies by Culture |
|
|
91 | (1) |
|
Color Preferences Change over Time |
|
|
92 | (1) |
|
|
92 | (3) |
|
RGB (Red, Green, and Blue) |
|
|
92 | (1) |
|
|
93 | (1) |
|
|
93 | (1) |
|
Hue, Saturation, and Lightness |
|
|
94 | (1) |
|
RGB Colors Will Look Different Depending on the Screen |
|
|
94 | (1) |
|
Never Design Web Maps with CMYK |
|
|
95 | (1) |
|
|
95 | (4) |
|
|
95 | (1) |
|
|
96 | (1) |
|
|
97 | (2) |
|
Reference Map Color Schemes |
|
|
99 | (5) |
|
When to Ignore Color Conventions |
|
|
102 | (1) |
|
|
102 | (1) |
|
Does the Color Scheme Match the Message? |
|
|
102 | (1) |
|
Resources for Finding Colors |
|
|
102 | (2) |
|
Choosing Thematic Map Colors |
|
|
104 | (1) |
|
Beware of Color Blindness |
|
|
104 | (3) |
|
|
107 | (1) |
|
Further Reading and Resources |
|
|
108 | (3) |
|
|
108 | (1) |
|
Color Meanings and Emotions |
|
|
108 | (1) |
|
|
108 | (1) |
|
Color Style Tools for Different Map Services |
|
|
109 | (1) |
|
Hexadecimal Color Creator |
|
|
109 | (1) |
|
|
109 | (2) |
|
|
111 | (14) |
|
|
111 | (1) |
|
All in the Family: Explaining Typeface and Font |
|
|
111 | (1) |
|
Typographic Rules That Stand Firm |
|
|
112 | (1) |
|
No More Than Two Fonts per Map |
|
|
112 | (1) |
|
Font Styles and Properties Indicate Different Things |
|
|
112 | (1) |
|
Text as a Core Map Element |
|
|
112 | (1) |
|
|
112 | (1) |
|
Typographic Rules That Have Changed |
|
|
113 | (6) |
|
When Possible, Ditch Serif Fonts |
|
|
114 | (1) |
|
|
115 | (1) |
|
Font Size Is Now Voodoo Science |
|
|
115 | (2) |
|
Not Everyone Has Access to the Fonts You Do |
|
|
117 | (1) |
|
Will Your Map Have Interactive Text? |
|
|
117 | (2) |
|
Fonts That Play Well with Web Maps |
|
|
119 | (3) |
|
|
119 | (1) |
|
|
119 | (1) |
|
|
119 | (1) |
|
|
120 | (1) |
|
|
120 | (1) |
|
|
120 | (1) |
|
Myriad Pro and Myriad Web |
|
|
121 | (1) |
|
|
121 | (1) |
|
|
121 | (1) |
|
Comparing Type on Your Web Map |
|
|
121 | (1) |
|
Font Myths, Realities, and Web Maps |
|
|
122 | (1) |
|
|
122 | (1) |
|
|
123 | (1) |
|
Further Reading and Resources |
|
|
123 | (2) |
|
Web Sites on Web Typography |
|
|
123 | (1) |
|
|
124 | (1) |
|
|
125 | (12) |
|
|
125 | (1) |
|
Defining the Visual Variables |
|
|
125 | (6) |
|
|
126 | (1) |
|
|
126 | (2) |
|
|
128 | (1) |
|
|
128 | (1) |
|
|
128 | (1) |
|
|
128 | (2) |
|
|
130 | (1) |
|
|
130 | (1) |
|
When to Use the Different Visual Variables |
|
|
131 | (4) |
|
Visual Variables for Mapping Qualitative Data |
|
|
131 | (1) |
|
Visual Variables for Mapping Quantitative Data |
|
|
132 | (1) |
|
Combining Visual Variables |
|
|
133 | (2) |
|
|
135 | (1) |
|
|
135 | (2) |
|
|
137 | (6) |
|
|
137 | (1) |
|
Designing Effective Web Map Symbols |
|
|
137 | (4) |
|
|
138 | (1) |
|
Generic Caricatures Are Best |
|
|
138 | (1) |
|
Symbols Are Era and Audience Dependent |
|
|
138 | (1) |
|
Symbols Are Context Dependent |
|
|
139 | (1) |
|
How Do You Represent a Stadium? |
|
|
140 | (1) |
|
|
141 | (1) |
|
|
142 | (1) |
|
|
143 | (30) |
|
|
143 | (1) |
|
Data and Technology Limitations |
|
|
143 | (3) |
|
The Nature of the Mapped Data |
|
|
144 | (1) |
|
Technological Limitations |
|
|
145 | (1) |
|
|
145 | (1) |
|
Different Thematic Representations |
|
|
146 | (23) |
|
|
147 | (1) |
|
|
148 | (1) |
|
|
148 | (1) |
|
|
149 | (2) |
|
|
151 | (1) |
|
|
152 | (1) |
|
Unclassed Choropleth Maps |
|
|
152 | (1) |
|
Benefits of Choropleth Maps |
|
|
153 | (1) |
|
Drawbacks of Choropleth Maps |
|
|
154 | (1) |
|
|
154 | (1) |
|
|
155 | (2) |
|
|
157 | (1) |
|
|
157 | (1) |
|
Proportional and Graduated Symbol Maps |
|
|
157 | (2) |
|
Benefits of Proportional and Graduated Symbol Maps |
|
|
159 | (1) |
|
Drawback of Proportional and Graduated Symbol Maps |
|
|
159 | (1) |
|
|
160 | (1) |
|
|
161 | (1) |
|
Benefits and Drawbacks of Isarithmic Maps |
|
|
162 | (1) |
|
|
162 | (1) |
|
Benefits and Drawbacks of Flow Maps |
|
|
163 | (1) |
|
|
164 | (1) |
|
Benefits and Drawbacks of Cartograms |
|
|
164 | (1) |
|
|
165 | (1) |
|
|
166 | (1) |
|
|
167 | (1) |
|
|
167 | (1) |
|
|
167 | (2) |
|
Bivariate Choropleth Maps |
|
|
169 | (1) |
|
The Role of Interactivity in Thematic Representations |
|
|
169 | (1) |
|
|
170 | (1) |
|
|
171 | (1) |
|
Further Reading and Resources |
|
|
171 | (2) |
|
|
171 | (1) |
|
|
171 | (2) |
|
|
173 | (18) |
|
|
173 | (1) |
|
To Tween or Not to Tween? |
|
|
174 | (1) |
|
|
174 | (1) |
|
|
174 | (1) |
|
The Visual Variables of Animation |
|
|
175 | (5) |
|
DiBiase's Visual Variables for Animation |
|
|
176 | (1) |
|
|
176 | (1) |
|
|
176 | (2) |
|
|
178 | (1) |
|
Additional Visual Variables of Map Animation |
|
|
178 | (1) |
|
|
178 | (1) |
|
|
179 | (1) |
|
|
179 | (1) |
|
|
180 | (4) |
|
Designing Temporal Animations |
|
|
180 | (1) |
|
Keep the Animations Short |
|
|
181 | (1) |
|
|
181 | (1) |
|
Give the Map User Some Control |
|
|
182 | (1) |
|
|
182 | (1) |
|
|
182 | (1) |
|
Temporal Legend Enhancements |
|
|
183 | (1) |
|
Other Types of Map Animation |
|
|
184 | (2) |
|
|
185 | (1) |
|
|
185 | (1) |
|
|
186 | (1) |
|
|
186 | (1) |
|
|
187 | (1) |
|
Further Reading and Online Resources |
|
|
188 | (3) |
|
|
188 | (1) |
|
|
188 | (1) |
|
|
188 | (3) |
|
|
191 | (6) |
|
|
191 | (1) |
|
|
191 | (3) |
|
Krygier's Sound Variables |
|
|
191 | (1) |
|
|
192 | (1) |
|
|
192 | (1) |
|
|
192 | (1) |
|
|
193 | (1) |
|
|
193 | (1) |
|
|
194 | (1) |
|
|
195 | (1) |
|
Further Reading and Resource |
|
|
195 | (2) |
|
|
195 | (1) |
|
|
195 | (2) |
|
|
197 | (34) |
|
|
197 | (1) |
|
|
198 | (6) |
|
|
198 | (1) |
|
|
199 | (1) |
|
|
199 | (1) |
|
|
200 | (1) |
|
|
201 | (2) |
|
Application Programming Interfaces |
|
|
203 | (1) |
|
Prepping Spatial Data for the Web |
|
|
204 | (12) |
|
|
204 | (2) |
|
Common Web Map Data Formats |
|
|
206 | (1) |
|
|
206 | (1) |
|
|
206 | (1) |
|
|
206 | (2) |
|
|
208 | (1) |
|
|
209 | (1) |
|
How Do I Create These Data Types? |
|
|
209 | (1) |
|
Geographic Information Systems |
|
|
209 | (2) |
|
Non-GIS Data Creation Applications |
|
|
211 | (5) |
|
A Web Cartographer's Tool Box |
|
|
216 | (10) |
|
|
216 | (1) |
|
|
217 | (2) |
|
Adobe Flash and Adobe AIR |
|
|
219 | (1) |
|
|
220 | (1) |
|
ESRI ArcGIS Online and API |
|
|
220 | (1) |
|
TileMill Application and MapBox API |
|
|
221 | (2) |
|
|
223 | (1) |
|
|
223 | (2) |
|
|
225 | (1) |
|
|
225 | (1) |
|
|
226 | (1) |
|
|
227 | (1) |
|
Further Reading and Resources |
|
|
227 | (4) |
|
Online Resources and Tutorials |
|
|
227 | (1) |
|
Web Cartography Companion Web Site (http://www.muehlenhaus.com/webcartography) |
|
|
227 | (1) |
|
Flowing Data (http://www.flowingdata.com) |
|
|
228 | (1) |
|
Lynda.com (http://www.lynda.com) |
|
|
228 | (1) |
|
W3Schools (http://www.w3schools.com) |
|
|
228 | (1) |
|
Recommended Tutorial Guides and Books |
|
|
228 | (1) |
|
The Missing Manual Series by O'Reilly |
|
|
228 | (1) |
|
From Print to Mobile mApps Tutorial |
|
|
228 | (1) |
|
Visualize This by Nathan Yau |
|
|
229 | (1) |
|
Wisconsin State Cartographer Web Site (http://www.sco.wisc.edu) |
|
|
229 | (1) |
|
|
229 | (1) |
|
Cartographic Perspectives Journal (http://www.cartographicperspectives.org) |
|
|
229 | (1) |
|
Cartography and Geographic Information Science Journal (CaGIS) |
|
|
229 | (1) |
|
Online Maps with APIs and Web Services, Edited |
|
|
230 | (1) |
|
Index |
|
231 | |