Aspects of Web map design in practice

This presentation deals with the practical application of some basic cartographic webmap design principles as were applied for the design and production process of a number of webmaps for the new WebCartography site of our Division.

This site is designed and maintained to accompany a book on Web cartography written by the division and  which will be published end of this month by Francis and Taylor. The target readers of this book are cartographers and GIS users who are on the point to publish maps on the Web, web designers not familiar with cartographic design principles and all others who are interested in webmaps in general This overview may give you new ideas and will show that maps on the web can be more than just scanned, digital versions of existing paper maps, popping up on your screen even when you did not expect them, as is the case with the majority of webmaps.

Designing web maps is a new and challenging task.  Multimedial Web technology and web design software offer the cartographer a way to the creative application of “derived” graphic variables such as shadow and transparency, which were infrequently applied in papermap design due to technical reproduction constraints.

The whole design and production process has become a single man job, giving more freedom to individual creativity.  And this all at very reasonable costs…However, the cartographer also must consider limitations and opportunities and even experienced cartographers have to adjust their map design habits towards the nature of the Web and what it can offer. Web map designers have to worry about factors over which they have little to no control, and which are influenced by user decisions, actions and system configurations. File sizes must be small to speed up downloading., which may lead to simpler maps than prefered. On the other hand, the possibility to add links or to apply mouse-over or roll-over techniques may overcome certain disadvantages. The conventional cartographic visualisation process, guided by the phrase: “How do I say what to whom and is it effective?” can also be applied to web maps although the last part of the phrase is not always as unambiguous as it seems, as the impact on the use of web maps and their users is not yet fully deploited.

Web maps can be divided into static and dynamic maps, each subdivided into view only and interactive.  Maps of the view only type fit the conventional “geographic information data presentation” approach and can be compared to the conventional paper maps. Their design should be based upon the nature and required perception of the data to be visualised.   The following webmap shows population data for the municipalities of the province of Overijssel in the Netherlands, whereby size and colour have been conventionally applied to depict the nominal and quantitave character of the information.

Map symbols in view only, interactive maps where “mouse-over” or “clicking” leads to further information or data, can be related to the nature of the mapped data but not exclusevily. It is the navigational, interactive function that forms a definitive map design factor.

The next map shows the first map redesigned to express the ‘clickable” character of the mapsymbols. By presenting the proportional symbols in button form they express: “Just click on me and you will find more information!" When these symbols are activated a small table, that might be connected with a GIS data base appears with more details on the mapped subject.

Sometimes the use of webmaps is not so much to actually depict spatial data but its only purpose is to be attractive and guide the user to other (related) sites or pages, as can be seen on the next map:

Considering the role of the web cartographer the design approach of the shown maps is not much different from conventioanl paper map design.  The cartographer still plays a considerable role during the actual design process. If interactivity is taken a step further, the role of the cartographer is less sharply defined. He may simply be the person who provides cartographic symbolisation “tools”, making it possible for users to design maps themselves.

This a map, on line created using Descartes web software. Here it is the user who ultimately decides which design options will be selected and how these will be applied to the data made available to him or based upon his own datasources.

Referring to the mentioned phrase “How do I say….” it can be said that “I” and “whom” have become the same person. This samples illustrate that the function of the web map has a direct impact on the map symbol design and the role of the cartographer.

Besides this, it is important to keep in mind that not all visitors to a page containing a web map are per definition interested in a presented map and/or its contents as such. Most web users do not look specifically for a map, but the map is found on their way, “surfing” the Web and “zapping” from page to page. To hold the user’'s attention such a map should not only be functional but also be attractive from an aesthetic point of view. In addition, it is important for the user to discover very quickly whether a map is interactive or not. It can be concluded therefore, that successful web maps have to be specially designed for their purpose.

Factors involved in web map design include:

·        The analysis of geospatial data characteristics and the definition of the map content

·        The analysis of required perception levels to portray the data based on the purpose of the map and the required “default” scale and required “default” accuracy.  This, because webmaps are in fact scaleless, and therefore some default scale must be taken into account to define the map content and degree of generalisation.

·        As in all mapping, aesthetics, production costs and time play a prominent role

·        Special design opportunities may arise because of the additional properties of the medium such as interactivity, animation and multimedial options.

·        The  application of special graphic and symbol design options such as shading, shadow and transparency.

Thisd all, keeping in mind the limiting technical factors that come into play related to  the state of art of Web technoloy..

One of those technological factors is the need to keep mapfile sizes small in order to facilitate downloading. This in turn leads to a limitation of the amount of information that can be portrayed on the map.

Because of the situation sketched above, the visual hierarchy of web map information content deserves more attention compared to maps in general.

In webmaps three distinct content levels be clearly distinguishable:

·        The primary content level, formed by the main theme of the map and interactive web objects such as hotspots and  mouse-overs that will trigger events resulting in the supply of main theme information.

·        The secondary content level referring to the base map information, but also to pop-up menus, movies, tables, sounds, etc. supplying additional information on the main map theme.

·        The supportive content level that includes marginal information, illustrations, graphs or for instance pop-up menus to supply the user with additional information not directly related to the main theme.

The content of the map is defined by the use but also by the scale of the map. In principle web maps, have no fixed scale. There is, however, an ideal scale (or scale range) to display any particular map. The definition of such “default” scale and accuracy standard is necessary as as it forms the reference for the cartographer to define the map content.

The options to rescale web maps by zooming-in, depend upon the system and the plugins installed, and upon the available mapcontent.

The most commonly applied zooming option is Static linear zooming.

When zooming into the map, the image is linearly enlarged. Vector-based images such as those stored in Shockwave, Flash or scale vector graphics format will keep their sharp character when enlarged but raster-based images will show enlarged pixels, a phenomenum that all of you will be familiar with. A variation on this option is called  Static stepped zooming.

In this case a hyperlinked series of maps of the same area is available, each one designed for a different scale range. This system is widely used on route planning sites and by webcontent suppliers such as MapQuest.

A variation on this technique is to allow a “magnifying glass” to be moved over a map using Macromedia’s Flash technology.

The procedure to create such a lens effect can be found on the Ian Kelleigh's site: The Freehand Source, devoted to macromedia's software Freehand and Flash.

When  there is a  direct relation between scale and map content we speak about dynamic zooming . A direct link between the image and some kind of GIS database is necessary while the cartographic symbolisation may change with scale.

Whereas scale refers to geometric accuracy, semantic accuracy relates to the way data are symbolised and represented which in turn are related to the intended web map  use. Web maps may be more limited in this respect than paper maps. One reason for this is that in general the viewing time for web maps is while in addition, the information content level of web maps is lower because of low resolution and the need to keep file sizes (and thus the maps) small.  Taken together this leads to the use of simple, easily recognisable symbols and much use of conventional map symbol associations that are already familiar to the user. Becauae of the relative , short map reading time, self-explanatory symbols are preferable, leading to webmaps without any legend.

However, depending upon the complexity of the information to be portrayed, this is not always possible. Therefore, for most Webmaps, some kind of legend is still  needed. For web maps 3 different types of legend can be distinguished.

Non-interactive legends correspond to the legends found on paper maps.

In fact one of the many problems associated with the use of scanned paper maps on the Web is that their fixed legend is visible simultaneously with the map face. When the viewer zooms in to part of the map the legend disappears.  Pop-up legends are displayed at the moment the user selects a map object. This system has the advantage that the user does not have to memorize the map symbols.

The disadvantage of a pop-up legend is that the map symbols that need to be described all have to be made active.

If the legend is treated as a separate image it can be kept in view in a separate frame or else moved to any convenient location in the map window. Another option allows the user to “minimise” the legend.

The second option is the application of a Control-panel legend.

By selecting specific items in the legend the user can cause the corresponding map layers to switch on

Show application

Legends are used as the key to spatial information visualised by cartographic symbols. On web maps these symbols may be used differently than on paper maps. Conventionally, point symbols are used to depict geographic features that occupy a relative small area.

On web maps a point symbol is often also a clickable object that can trigger “events” such as JavaScript functions and hyperlinks. The typically low resolution of web maps, makes it difficult to design complex point symbols, as can be noted in the radio sender symbol.. Since web maps may attract in-experienced map readers, cartographers often attempt to use easy to understand pictorial point. For on-screen maps these symbols may need to be larger than  on the equivalent paper maps in order to aid legibility. For all these reasons the creation of pictorial webmap symbols can be time consuming and an creative mind is certainly an asset.

Whereas pictorial symbols are selfexplaining, the application of geometric pointsymbols necessitates a legend. However, their application certainly makes the live of a webmap designer more easy!! The third group of point symbols uses letters and numbers. This type of point symbols can frequently be found on web maps despite their wellknown disadvantages. 

Line symbols on web maps can be used in their conventional way to to represent linear features but they can also be used in more abstract ways, for example to visualise geographic links between URLs. The use of line symbols as clickable web objects is less common. In web maps, line symbols may also be animated, for example to present traffic flows or for routing purposes.

Considering the application of area symbols, the graphic variables typically used are colour, value, texture, shape and orientation.

Many web design programs offer tools to apply these variables to areas. Together, these variables can be used to create quite complex area patterns. The careful use of variables other than just “flat” colour and value can make a web map more lively and interesting,

Also in this case web design software offers a wealth of tools to the cartographer to create meaningfull textures that may even show a "living" charcacter. In web maps area symbols function very well as clickable, web objects, because in general they are relatively large and are easily detected by the user.

In principle the map design process is a rather straightforward intellectual process consisting of a series of steps beginning with an analysis of the type of information to be presented and ending with the evaluation of the effectiveness of the designed map. As the map also has a promotional function, attractiveness got a high priority.  The map shows detailed information on the road network, settlements, etc. A point to note is that the map has been designed as view only, with a scrollable text panel. It may be noteworthy to see that the application of Flash technology enables overlap between the map and the text panel.

The technical aspects of sending and receiving coloured images over the Internet are discussed in detail on many websites and in subject related literature. Important is to bear in mind is that the cartographer  has less control over how the map will appear on the user’s monitor: as this partly depends on the user system configuration and settings. Although most computers nowadays are able to display 16-bit or 24-bit colour it is safest to assume that the user’s configuration is set to 256 colours. The 216 colours of the Web (or Browser) Safe colour palette fit into this and are guaranteed to be “non-dithered” on any configuration. For a map using only “flat” colours the use of the Web Safe palette would appear to pose no problem but the Web Safe palette offers only very few pale colours. Many map designers just ignore this problem and simply choose pale colours from a larger palette, in the hope that the users also will be able to display this larger palette. Also,  colours can be used in a more artistic way, with for example gradient colours or when photographic images are included. Take care that the file format used to compress the image for sending over the Web may influence the display of the colour range selected.

Next to colour, text on web maps cannot be omitted but the impact of text on the appearance and perception of maps is considerable. Some cartographers have claimed that names on maps are a “necessary evil”. Nothing can be truer than this statement applied to web maps.

There are two main applications: text applied outside the map face and

text within the map face.

Text outside the map face can be treated like any other text application within a web page. This includes precautions taken to avoid font replacement or to control readibility, text flow, letter spacing and leading. Concerning the readability of text: This is influenced by several factors such as:

selected font, font variation and font size, font orientation and anti-aliasing rate but specifically text placement. In contradiction to paper maps, on which lower case lettering is generally preferred, capital lettering may improve readability, particularly at small sizes. Italic text may appear very “jagged” on low-resolution web maps. The placement of text along a path as for river names etc, makes the result even worse. It is obvious that this constraint has a big impact on the name placement. The section of open letter fonts, the application of a moderate anti-aliasing rate and the avoidance of extreme inclines may improve this "jagged" effect.

To be sure that no font replacement inside the mapface will take place the text is best saved in raster format or can be converted to vector based paths. Also the figure-ground relation affects the legibility of the text. The figure-ground relation between text and background can be improved by adding (if possible) a thin white outline to the text Another option is to a apply a cast shadow. This option is best applied as cast shadow may also create map “noise” and may increase file size. 

For conventional mapdesign,  the graphic variables colour, value, size, texture, orientation and form have become widely accepted since they were introduced at the end of the sixties by Bertin. Several authors have suggested additional variables or variations on these variables. The application of these newer variations in combination with the traditional graphical variables, using for instance webdesign software such as Macromedia Fireworks or Adobe Livemotion can lead to some interesting design options.

Two effects will be elaborated on: transparency and shading/shadow.

Transparency represents a kind of fogginess, by which map themes can be obscured. The term transparency is also used to describe map features that overlap each other whereby the feature “underneath” is dimly visible under the feature “on top”.  

Shadow or shading and cast (or drop) shadow can be used to enhance the contrast between “figure” and “ground” or to enhance the sense of depth. The shading of map objects can be compared to the creation of hill shading. As such, shading is widely applied in web design to create “3D” buttons. Cast (or drop) shadow is caused by the object itself casting a shadow on to the background. It is possible to use this to create the impression of objects (symbols) “floating” above the background.

Let us have a look at a conventional type of touristmap to find out whether some of the described principles and options can improve the usefulness of these maps.

The symbol design of this map is restricted to the application of the graphical variables of Bertin The full potential of putting maps on the Web is, however, only achieved when they are made interactive in some way. This added functionality can be conveyed to the user by using some of the additional visual variables just mentioned, to draw attention to clickable objects and areas where “mouse-over” applies.

In the new map forest is shown now by a combination of colour, form and shading, resulting in a natural-looking texture. Shading has been applied to create a semi-3D effect to the water bodies and forest areas.  The figure-ground relation is emphasised by applying a drop-shadow effect to the provincial boundary. Shading is also applied to create a raised effect to the point symbols, emphasising their clickable character. By selecting one of these objects the symbol lights up and a window pops up giving information about (in this case) the name of the object.. By clicking on the bicycle symbol a with a downloadable and printable detailed cycling route map. To reduce download time and promote a shorter map reading time the content of the map is simplified to a bare minimum.  

In this this paper I have tried to bring over some of my ideas on webmap design, and the influence of web technology and use of these maps on webmap design.

Maybe not everything presented  here has been new for you. Nevertheless, I do hope that I have been able to convey something of our experience and enthousiasm about this new new field  of cartographic design.

 Jeroen van den Worm, 2001