1	"Originally presented at the Canadian..." Originally presented at the Canadian Cartographic Association Conference Sir Sandford Fleming College, Lindsay Ontario, 8 June 2004
2	Cartographic Design for Web GIS
3	"GIS specialists focus on geographic..." GIS specialists focus on geographic precision and topology required for spatial analysis, whereas map designers are more concerned with effective visual communication. While there is significant overlap between GIS and cartography, there has been some tension between the areas of emphasis in each since the early days of GIS. Now, maps are proliferating on the Internet at an exponential rate, and becoming available to an ever-expanding audience; at the same time, an increasing number of GIS specialists, CAD technicians, and even web developers are creating maps for publication on the web. This presentation deals with various factors relating to effective cartographic design for web-based GIS projects and, in particular, where it differs from traditional map design. Topics include typography, color, and line weight, along with map layout, symbolization, and generalization. Some examples are included to demonstrate proper and improper application of design principles.
4	A colleague recently lamented… …“Cartography is dying" No, it's just experiencing a pendulum swing It has been temporarily overwhelmed by technological developments in both computer and telecommunications fields On the web, emphasis is being placed back on effective design Maps are an integral part of that trend
5	Where does Cartographic Web Design belong?
6	What’s It All About? “The purpose of [carto]graphic design is to facilitate human thought and communication. “Success in [carto]graphic design is achieved when diverse design principles are manipulated and adapted to produce an image with a high degree of readability.” - Wood, 1992
7	The Internet The Internet provides new challenges and opportunities for the integration, representation, dissemination, and communication of geographic information.
8	Web GIS: Challenges Cartographer no longer has full control of what the users will see… client computer configuration and capability browser type, version, and preferences screen size and resolution available colours and fonts More effort is required to allow for many possible map views
9	Web GIS: Challenges (cont’d) Response time depends on network, interface, data design, and on Internet connection and traffic Media size and resolution significantly limited compared to traditional paper maps Variety of (new) tools and technologies HTML, CSS, JavaScript, API, Database, PHP/ASP/CFML, and web GIS software
10	Web GIS: Opportunities New ways of using maps thanks to dynamic and interactive nature of web. Substitute design principles with functional requirements: “Success in [carto]graphic design is achieved when diverse functional requirements are manipulated and adapted to produce an image with a high degree of readability.”
11	To “Rise to the Challenge”… Understand specific characteristics of web as a visualization medium and respond with specialized cartographic design tools/techniques, for example… Web GIS software with capabilities to facilitate cartographic design Cartographic expertise to design maps specifically for the web only a subset of traditional cartographic design new possibilities for user interaction, dynamic elements, hyperlinking, animation, etc.
12	Areas of Preparation
13	Digital Cartography vs Web Map screen display was part of the design and production phases for paper maps now, screen display is the final display medium for many maps
14	Map Design Constraints
15	Audience Groups
16	Audience Considerations
17	Technical Limitations Data processing and transmission speed Client/server balance Connection bandwidth Browser-dependence Browser brands and versions HTML and scripting incompatibilities Client computers Text (and symbols) Line weights Colours Palette Map size and scale
18	Data Processing: Limitations Turns “W W W” into “World Wide Wait” Will limit potential audience based on “patience” and connection speed General users spend less time reading a map today than historically
19	Data Processing: Remedies Alleviated by several factors in our control: proper client/server processing balance spatial data generalization and pre-processing effective database design (e.g. indexing and de-normalization) efficient web design “10 second rule” for General users
20	Cross Platform Compatibility Advantage Reach the widest audience Limitations less control design for “lowest common denominator”
21	Cross Compatibility: Remedies
22	Type (& Symbols): Limitations Poor screen resolution à small sizes (< 10pt) likely difficult to read Inconsistent: same point size larger on PC than Macintosh computers Most serif fonts and italicized faces are not suitable (poor rendering at small sizes) Annotation of point and linear features poorly supported Some type faces may not be available on client machine
23	Type (& Symbols): Remedies Verdana & Georgia designed for screen display Arial and Univers also work well ClearType can facilitate sub-pixel elements effective on LCD screens only Use text sparingly and implement dynamic annotation (text displays on mouse-over) Implement over-posting reconciliation avoid label collisions Avoid italics –use colour to differentiate instead
24	Linear Symbology and Annotation
25	Line Weight: Limitations smallest width is 1 pixel, about 4 times heavier than a printed hairline adjustment increment is coarse, especially at small widths quality suffers at angles other than 0, 45, or 90 due to orthogonal pixel grid and anti-aliasing
26	Line Weight: Remedies need special attention to ensure space between close lines is discernable can not alter lines representing natural features, but should control “artificial” lines (e.g. grids, area and point symbols)
27	Colour Palette: Limitations established by techies not designers colour palettes of PCs and Macs are different PCs usually darker dithering reduces graphics quality especially for points and lines
28	Colour Palette: Remedies Use 216 web-safe colours particularly for text, point symbols, lines common to PCs and Macs “base” colour definitions, do not require dithering Avoid saturated colours most subjective on browsers
29	Map Size & Scale: Limitations little control on client screen size and resolution limited view window size zooming out loses detail zooming in and scrolling/panning reveals only a portion of a map
30	Comparison of Paper and Web: Media Size and Resolution
31	Comparison of Paper and Web: Total Resolution
32	Map Size & Scale: Remedies Plan on 800 x 600 for public users, 1024 x 768 for technical users Design efficient interface using pop-up windows, sliding panels, tabbed forms when appropriate Display instructions at startup and on-demand or based on context e.g. help pages map browsing controls are mandatory
33	Map Size & Scale: Remedies include overview map & scale indicator legend should be limited to eight or less themes if more, use a “tabbed interface” set intelligent scale-dependent layer visibility based on priority data prepared for specific scale range set intelligent scale-dependent display symbology
34	A Few Examples The Good, the Bad, and the Ugly Not meant as a endorsement or critique of specific sites, but as a critique based on design principles discussed
35
36
37
38
39
40
41
42
43
44
45	References MacGillavry, E. (2000) Thesis: Cartographic Aspects of WebGIS-Software http://www.webmapper.net/thesis/ Department of Cartography, Utrecht University Supervising staff: Prof. M.J. Kraak, Prof. F.J. Ormeling Kuunders, R.E. (1998) Netkartografie; Kan digitale kartografie de stap naar Internet wel maken? Kartografisch Tijdschrift XXIV (4), p.13-17 Muehrcke, P.C. & J.O. Muehrcke (1992) Map Use. Reading – Analysis – Interpretation. Madison: J.P. Publications, 3rd edition. Web Style Guide, 2nd edition http://www.webstyleguide.com/type/character.html Web Standards: A List Apart http://www.alistapart.com