Digital Mapping Specificity

Digital Mapping Limitations

The visual limitations of the computer monitor are immediately apparent when compared with a finely printed image. Until computer screens get closer to producing images as fine as on paper, you have to use new techniques and overcome these limitations by seeking solutions through innovative map design. We are going to depict here the restrictions of digital map display, but above all see how to overcome them with adapted design techniques.

Screen Dimensions

While nowadays most desktop computers are capable of displaying 1280 by 1024 pixels with 32-bit colour, the default settings on these machines out of the box are usually 1024 by 768 or even 800 by 600. The average user will not change this, so you are forced to design digital maps with the low-resolution user in mind.
With limited resolution, many designs can end up looking clunky. A judicious use of colour can minimise some of these problems along with concise data selection and deliberate typography.

remark

Overall the best way to make digital maps clear and readable is to reduce the map elements shambles.

Pixel size and screen resolution.

Discover how screen size, pixel number, and resolution are interrelated by pushing the three buttons with your mouse.

Screen colours

Computer monitors are poor imitators of nature. Indeed, the additive colour space of RGB (Red Green Blue) does not come close to covering the gamut of colours perceivable to the human eye. Furthermore, you might be surprised by the colour restitution when viewing your map on a different computer. In fact, colours are not rendered in the same way on different monitors.

The following hardware related reasons can be identified:

Other reasons are software related:

You cannot foresee any of these factors. The following recommendations can at least partially solve this problem:

Some general advice concerning colour design for digital mapping:

Colour differences between Mac and PC

The following pictures show you the colour differences between Mac and PC operating systems.
On the left, the map viewed on a Mac screen seems to be lighter then the map viewed on a PC screen (on the right).

Colour      differences example between Mac and PC (Kartenquelle: Studentenarbeit FHBB)Colour differences example between Mac and PC (Kartenquelle: Studentenarbeit FHBB)

Screen and antialiasing

For screen display, vector data are converted to raster images. Simple algorithms used for rasterizing vector data create an aesthetic step effects in edges. The “antialiasing” correction consist relatively complex mathematical operations that create semi-transparent transitional borders at the edges of objects and thereby produce a more appealing appearance. However, the conversion process from vector data to raster image is much more time consuming when antialiasing is used.

Antialiasing on a map.

The following pictures show you the difference between a map exerpt with and without antyaliasing. The readability of the map without antyaliasing (left) is not very good, whereas the right map with antyaliasing is easy to read.


 Excerpt from MapQuest’s web map of Zurich         without antialiasing Excerpt from MapQuest’s web map of Zurich without antialiasing (mapquest)

 Same excerpt with antialiasing (rendering with         Adobe Illustrator). Same excerpt with antialiasing (rendering with Adobe Illustrator).

Screen and fonts

The selection of an appropriate font for a web map is a difficult task, since a balance between often contradicting criterions has to be found. Therefore, you have to analyse existing fonts for their suitability to be used for web maps. As for paper maps, a font must be easily legible and should also be optically pleasing. You can find some further information concerning fonts for digital mapping in the unit “Typography” of the lesson “Layout Design” (Basic Module).

Font effects on a digital map.

Discover in the following animation some useful advice for choosing the adequate font for your digital map.

Screen fonts (Jenny et al.)

Screen and minimal dimensions

The symbolisation of graphical objects for digital maps has to be adapted to the peculiarities of screens. Line widths, minimum sizes for point symbols and minimum distances between graphical elements have to be larger than on paper maps in order to be optically well discernible. This is a consequence of low screen resolution and the use of antialiasing.

remark

Reference values for sizes and distances will be suggested in the following paragraph. However, the suggested values do not replace visual control of the map when displayed with the respective software program or plug-in. The future will certainly provide us with better monitors, improved browsers, and more advanced viewer technologies. Therefore, you must constantly update your knowledge.

Lines width on the screen

Sometimes, you might be surprised not to see the expected difference of the width of two lines on the screen. Indeed, the quality of the antialiasing algorithm can differ between distinct graphics programs and browser plug-ins. The following example shows Bézier curves with increasing width rendered with by the Macromedia Flash Player and the Adobe SVG Viewer. The SVG Viewer on the left renders lines that are narrower than half a pixel more accurately than the Flash Player (on the right).

SVG Bézier curves
Flash Bézier curves (Jenny et al.)


Furthermore, with the Adobe SVG Viewer, line widths do not increase linearly, but grow irregularly. Lines between 0 and 0.14 pixel are always rendered with the same width and in grey colour. Between the pair’s 0.22/0.24 pixel and 0.3/0.32 pixel differences of the apparent line with become recognisable. Other renders may have completely different characteristics.

Map design and screen

Because the distance the user keeps to the display device when studying a digital map is approximately 80 cm, whereas a paper map is typically held at a distance of only 30 cm:

Notice in the following example, the very distinctive density of information between the paper map and the digital map.

Traditional road map on paper  Traditional road map on paper (Kümmerli & Frey 2003)
A         similar map that was optimised for screen display.A similar map that was optimised for screen display.

Discover in the following animation, the minimum dimension and the minimum distance in a digital map.