Attractive Vectormaps - a call for well arranged webmaps

Tobias Dahinden,
Institute of Cartography, ETH Zurich
ETH Hoenggerberg, CH-8093 Zurich
phone: ++41-1-6333037, fax: ++41-1-6331153

Keywords: Mapping with SVG; Cartography; Interaction and Animation; Layout;


If a user has a choice between two maps he/she will often use the map with the 'better' design. This means a map, besides being readable, should be visually attractive, comparable with other maps and eventually deliver some tools to navigate and interact with a map. A further problem is that a lot of maps are not always self-explaining by default. SVG offers some possibility to make maps well designed.
The readability is dependent on several factors: e g. the chosen colors, used fonts or minimal dimensions for symbols, line-styles and fill-patterns. The article is pointing to basic principles for designing visually attractive maps.

1 Introduction

A lot of maps in the internet disregard even the basic rules of mapproduction. SVG offers a lot of possiblities to follow this rules, nevertheless you have to apply the rules yourself.

2 GIS and Cartography

Mapserver normally don't use cartographic data. They often provide data which were not edited. Also GIS data are normally not prepared for maps. There are several tools to convert such data in SVG, e.g. OpenMapServer and SVG-MaPublisher (Picture 1). But if you don't edit your data you will get maps with bad labelplacement, not harmonised data, mixtures of different scales, stupid symbolisation [Mersey, 1996] and unreadable geometric elements. These maps are difficult to read and hence not attractive.

Avenza MaPublisher

Figure 1: GIS data of boston. It is difficult to see details. Source:

Commercial and non-commercial providers offer different data for GIS-applications. You have to look at these data in a critical way. Some of them are wrong in a geometric and thematic way (Picture 2). You have to improve them for cartographic use. You have to adjust data of different sources (in a geometric way) and you have to generalize.

Digital Chart of the world LK1000 L+T

Figure 2: Digital Chart of the world compaired (left) with a swiss map 1:1'000'000 (c) L+T. Source: [Raeber, Jenny, 2001].

3 Mapgraphic for the internet

A well prepared mapgraphic gives a visuell overall impression, that enables a fast and agreable reading and a unique registration of the content. The map should give an impression about the overall topic and also the subtopics.

As another point a map producer is not free in positioning and in choosing of colours. The objects of the map were represented with hue, texture, direction, form and colour [Bertin, 1974].

An increase of the attractivity of a webmap can be reached with the following points (with changes from [Raeber,Jenny, 2001]):




3.1 Maplayout

The principles of webmaps and printed maps concerning layout are quit the same. Every map needs a title, if helpful a short explanation of the topic, a legend, a note about scale, informations about data sources and the name(s) of the author(s). SVG-Maps are always part of a viewer and often also of webpages, hence there should be a tuning between the viewer, the webpage and the map.

It is necessary to write everithing in title and legend that is not clear. (If you are not sure if something is really clear, you should write it in the legend.) The legend explains the qualitative and quantitative meaning of signatures. Legends should be as short as possible. Elements in a legend should be ordered by their importance. This prevents long searches.

Because you don't know the resolution of the final screen, you have to put a scalebar and not a number (e.g. 1:25'000). It is also necessary that there are some navigation elements. Take care, the effect that you can zoom and pan in SVG are not known by the users by default; users have to learn first that they exist. The elements have to be self-explaining and efficient in use [Raskin, 2000]. If you have a lot of possibilites to navigate users are often overemployed. Its more important to find the functions wished fast. It is possible to put the navigation elements in the map. The advantage of this solution is that a mapreader has the elements in the center of his view (no long search). But then the navigation elements has to be very attravtive and well prepared for the map.

Sources and the names of the authors are important for copyright reasons. But they are not very important to understand a map. Thus we propose to make a link to this informations.

National Atlas of US Internet Atlas of Switzerland

Figure 3: National Atlas of US compared to the Internetatlas of Switzerland. Source: [Raeber, Jenny, 2001].

3.2 Signatures and symbols

The geometric representation of signatures and symbols often use the technical limits of screens and software. There are two points we have to look at. First antialiasing and second minimal geometries.

Most screens have a resolution between 72 and 130 dpi. Hence users see curves with steps in sted of smooth curves. To reduce this effect one uses antialiasing. Here the viewer has to calculate semitransparent transitions. This process is rather time-consuming but the graphic becomes much nicer. With use of antialiasing minimal geometries can be reduced. It is possible to use SVG viewer with antialiasing such as the Adobe viewer.

aliasing antialiasing

Figure 4: Aliasing and Antialiasing with Adobe SVG viewer. Source: [Raeber, Jenny, 2001].

It is not possible to define minimal stroke-width for webmaps such as it was done for printed maps in [Hake, Grünreich, 1994]by default. Screens are to different to do this. It is possible to define minimal stroke-widths with visual test. However the result depends on used contrast between fore- and background. It also depends on viewer, e.g. the Adobe SVG viewer shows differences in stroke-width much better than the common Flash plug-in's.

Flash SVG

Figure 5: Rendering of stroke with Flash (left, bad) in Macromedia Flashplayer 5 compared to SVG in Adobe SVG viewer 3. Source: [Raeber, Jenny, 2001].

Also the minimal areas have to be defined. Resonable values are 1.2 mm for the lenght of the edge for rectangles and 1.4 mm for the diameter for circles.

Normally one look at a printed map in a distance of 25 cm (european convention). On screens one look at a distance of about 70 cm. This difference has to be taken in account. The result is that the density of information has to be reduced and the size of signatures increased. [Hochrein et al., 1992], [Hurni, 1992], [Spiess, 1996 a] and [Bruehlmeier, 2000] talk about factors of 2 to 3, but this factors depend on signature. Therefore it is not a good idea to publish the same map on different medias.

stroke-width areadistance

Figure 6: Stroke-width (left) and minimal distance between areas. Source: [Bruehlmeier, 2000].

3.3 Fonts

Names and numbers in maps are needed for identification and explanation. Fonts should be readable and their correlation should be without ambiguity. Important things have to be highlighted. Similar things have to be made in the same style.

There are several rules for labelplacement. We suppose to use one of the following picture.

Label placement

Figure 7: Placement of labels. 1 is the best place, 8 the worste. Source: [Raeber, Jenny, 2001].

Names of lines and areas can be displayed a long a path. It is rather easy to do this in SVG with 'textPath'. Until now automatic label placement is not good enough for cartographic use.

To choose fonts there are some criterias [Spiess, 1996 b]:

The size of the font should be about 12 points or larger in the original view (100%). The size should not increase linear with the zoom value (Picture ). One should omit thin, light, oblique and italic fonts.


Figure 8: Usable Fonts (left), often used fonts (down), unuseable fonts (right) and seldom used fonts (up). Source [Raeber, 2002].

3.4 Self-explanation

It is not easy to say if something is self-explained. There is no signature that is self-explained by default [Meng, 2002]. But the signature can bring associations and - more important - people are already familiar with some signatures. There are also some phsychological effects with colours (see 3.5) which have an explaining character. Only such signatures haven't to be explained. E.g. green is often used for vegetation: in topographic maps a green area is often forest, in an orienteering map a green area is used for underwoods.

3.5 Colours

The choice of readable colours as a lot to do with psychology. Red seems to be warm, dry or heigh, blue seems to be cold, wet or low. Yellow, orange and red seems to be near, blue-green to violett seems to be in the background. Requirements for colours are [Raeber, Jenny, 2001]:

Differences in colour have an effect on contrast. Important informations in a map should have huge contrast to the surrounding area. This also helps people who can't see colours.

There are several differences between colours of different computer systems. The colours vary in colour-depth, calibration and gamma value.

3.6 Adaptive zooming

The density of information should depend on the size of the map. The size change if you zoom in and out thus the density of data should change. For more information see [Bruehlmeier, 2000] or [Cecconi, Galanda, 2002]. (The second papers is also presented at SVGopen.)

3.7 Generalization

The target of generalization is to have a reasonable and readable map for a certain scale. The process itself is [Hake, Grünreich, 1994]: simplification, scaling, merging, selection, classification and revaluation. The process depends on the target of the map, scale, density of information, colours, mapmedia (screens, paper).

3.8 Interaction

SVG has 'zoom and pan' as a default interaction. Zooming can also be done with scaling the viewer's window. However you should only enable this if the map changes its density of content with zooming.

Other interaction can be derived with mouse-over, mouse-out and mouse-down effects. However a problem is that one has to 'find' the interaction. Only few people drive with their mouse over a map and click on every signature, if they don't know that something could happen.

Further you need some navigation elements if navigation is allowed. A very nice possibility is a overview map where you also can pan and zoom.


Figure 9: GUI for navigation and interaction. Source: A. Neumann,

3.9 Animation

There are only few studies whether animation helps user to understand a topic better or not. But up to now it seems that animation is rather useless or even worse if it doesn't bring new information on the screen. And even than only if the animation is not to slow or to fast. See e.g. [Frey, Frey-Eiling, 1999] and [Hegarty, 2000].

progressive drawing progressive drawing

Figure 10: An example for animation (progressive drawing). There is no new information trough the animation. Source:

3.10 Download

Download is fast if the files one has to download are small. There are several possibilites to make your files small:

SVG sourcecode is useless large if you use SVG Exportfilters. You can easy compact this files with editors like Sed and Awk.

It's a pitty that none of the common SVG viewers is able to link SVG in SVG until now. Otherwise it would be rather easy to split different layers of maps.

A problem is also that users sometimes have to download a viewer. This can be rather time-consuming, although there are some small viewer such as that of A. Terribilini ( for Sharp Linux PDA's which has size of about 20 KB.

4 Advantage and Disadvantage of SVG for maps

Some advantages of SVG for making webmaps are very evident: Vectorgraphics with linked rasterimages, small filesize, high quality rendering. And also some disadvantages are quiet clear: huge viewer size, not very common yet. But there are some points we would like to look at more precise:

4.1 Viewer

A problem in using SVG is that plugins for Webbrowser are only on about 30 percent of all computers connected to the web. Also the Flash-plugin is only (!) on 95 percent of all computer. Further it is difficult for a lot of people to install viewer like Csiro's viewer or Batik. If you make a map with SVG (or Flash) you have to take into account that not everybody is able to look at your graphic. This is also a problem because certain users prefer certain Operating Systems, e.g. hackers often use Linux, some people only surf the net with Opera. If you make a map for a special audience, ask yourself whether these people are able to use your map or not!

4.2 Transformations

A very useful tool is the viewbox and the transformation tag. With this it is possible to work with different coordinate systems, e.g. it very easy to put symbols with Swiss-Coordinates in a map of Switzerland. The bad thing is here that also the maplegend has to be transformed. Otherwise the symbols are somehow transformed on the map. Also text is transform and therefore sometimes unreadable.

4.3 Clipping

Clipping is useful if one want to make a map with a path as boundary and a raster image as backgroud. But I had some unexpected error with clipping when I transformed the clipping path, see picture.


Figure 11: Bad transformation and clipping. First the boundary was scaled (about 350 times larger). Then the relief was clipped and then the clip-path was painted in green.

4.4 ASCII-Text Source

Because the source is in ASCII it is possible to get the data used in the map. This is an advantage and a disadvantage for map production because everybody can access data. Sometimes data are not free and you are not allowed to publish them, e.g. DEM25 of the Swiss Federal Office of Cartography. If you use such data you can't use SVG until now (the same problem exist also with Flash).

5 Summary

The huge amount of geographic data has to published with readable and beautiful maps. Otherwise users change to another map provider. However a lot of maps have some mistakes. With SVG cartographers and map-maker have a tool to produce high quality maps if they follow at least basic rules of map production.

The readability is dependent on several factors: e g. the chosen colors, used fonts or minimal dimensions for symbols, line-styles and fill-patterns. Not all fonts, linestyles and fill-patterns are equally suitable for both screen-maps and printed versions. Maps in SVG are most often primarily prepared for screen use. The reading distance between a monitor and a printed map is different - this means that map-designers should use output dependent minimal dimensions. You have also the possibility to zoom. In this context the level of detail is of great interest. The density of information has to correlate with the scale (this is called 'adaptive zooming'). With SVG's scripting capabilities one can use tricks to show symbols and fonts scale-dependent.

SVG helps a lot in designing interactive maps, most notably the event model, scripting and smil-animation capabilities. Interactive Maps are a major advantage of screen-maps and the key to map-analysis and query functionality. However, it is not always obvious to the map user how the interactivity works. A clear navigation and usability concept together with tooltips and a comprehensive help-system can assist users in exploring interactive maps. Too much interactivity and obtrusive animations, however, can bother map users and may rather confuse them than assisting in information retrieval.

6 Biblography

Valid XHTML 1.0!