Map Symbol Brewer

Keywords: map, symbol, diagram, chart, generation

Olaf Schnabel
ETH Zurich
Institute of Cartography


Olaf studied Cartography at the Dresden University of Technology (Germany). In 2002 he wrote his master thesis about a concept for the Online-National Atlas of Germany. Since 2002 he is teaching assistant and Ph.D. student at the Institute of Cartography of the Swiss Federal Office of Technology ( His Ph.D. thesis is currently under development and will be written about the easy creation of map symbols and diagrams for internet maps with SVG.


In this work the focus was set on the creation of map symbols with SVG. With a few basic shapes and eight arrangement principles we can derive almost all point-related map symbol situations, ranging from proportional scaled map symbols over combined map symbols to diagrams. A SVG prototype was developed to demonstrate our assumptions.

Table of Contents

         Simple map symbols (basic shapes)
Future enhancements


In many thematic internet maps the map topic is visualized by using map symbols. However, as an inexperienced user, the task of efficiently creating such maps is not easy.

Of course some ideas for automatically generated map symbols, e.g. SageBrush (, already exist, but many of these projects currently fail when it comes to the adaptation of automatical input data analysis and symbolization according to the needs of the users.

Currently, the map author can choose from one of the following symbol creation methods:


Within the scope of the research project "Distributed Mapping on Demand" ( of the Institute of Cartography, ETH Zurich ( a "Map Symbol Brewer", a tool to solve this problem, is being developed. The main idea behind the project is similar to the "Color Brewer" application ( The use of the application will be free and open source, if possible browser and plattform independent, and most importantly easy to use. The tool should respect cartographic visualization principles and generate symbols that can be used in interactive map applications.


The "Color Brewer" is an example of an easy to use interface for a similar cartographic problem (coloring of choropleth maps). Therefore the problem to create map symbols as fast and as easy as possible can be divided into two parts:

First, the map symbol has to be designed. Secondly, this symbol has to be applied in the map and the apearance changed based on the given thematic data. Currently literature can provide ideas and mechanisms to solve the problem in these two steps.

With the help of the symbol classifications by [Arnberger 1977] , [Imhof (1972)] , [Wilkinson (1999)] , [Schroeder (1985)] , etc. the meaning of a symbol can be made clear. Furthermore a nearly complete list of frequently used symbols can be created. These symbols can be examined concerning their properties. After examining the properties of the symbols, a few basic shapes were found. For diagrams these shapes can be applied using arrangement principles. Finding and structuring these principles is also an important task in the project. Bertin's model of value orientations ( [Bertin 1974] ) provides a good approach for these principles.

The automatically created symbols are placed within the internet map. Starting from the anchor points of the symbols, this step will also respect basic placement rules (e.g. [Arnberger 1977] , 172pp.; [Hochrein (1986)] , p. 30) that are common knowledge in the cartographic domain. The symbol placement process will also take into account proper proportional scaling of the map symbols (e.g. [Arnberger 1977] , 83pp.), as well as minimal dimensions and avoid overlapping. Finally, we need to do research, if and how interactivity should effect placement, appearance and sensitivity of map symbols. Information about the data, the map and the link between data and symbol attributes are necessary to reach this aim.



Research was done in the field of creating point-related geometric symbols. These symbols can be further divided into simple map symbols and diagrams.

Simple map symbols (basic shapes)

Based on the principles of symmetry and simplicity only three basic shapes were assigned to this group:

Starting from these three basic shapes (their construction is based on the unit circle) all geometric point-related map symbols (see Figure 1 ) can be derived.


Figure 1: Simple map symbols derived from the three basic shapes

Currently intersections are not available in the prototype. Therefore the ring and the ring sector are extracted.

The ellipse has the construction properties position and two radii. If the radii are equal in both directions, a circle as a special shape is created. Another special shape is the ring (intersection of two circles or ellipses).

The symmetric polygon has the properties position, radius of the circumference and number of edges. Triangles, squares, pentagons, etc. can be derived from this shape type. A special shape is the star, which needs the radius of a second inner circle as further property (between zero and 100 percent of the circumference).

As a third basic shape the pie sector has the properties position, radius as well as an angle. Special shapes are a ring sector (intersection of two pie sectors) and a pie sector without a connection to the center.

With a few transformations (rotate, translateX, translateY, scaleX, scaleY) entirely different map symbols can be created. Additional shapes can be added by overlaying the shape over the first basic shape or through the intersection of two basic shapes resulting in more complex map symbols. For example the overlay of a star and a circle ring can result in a new symbol.

These basic shapes and the resulting map symbols can partially be reused for the diagram generation, but the main purpose of these symbols is to use them for quantitative or qualitative depiction of constant or discrete values.


On the other hand diagrams for visualization of more than one value are offered. They are also based on the basic shapes, but have more complex arrangement principles, due to the higher number of shapes within the diagram. An improved version of Bertins model of value orientations leads to eight different arrangement principles, which can applied to the diagram basic shapes (see Figure 2 ):


Figure 2: Diagrams created with the eight arrangement principles

The circular principle places the basic shapes around the center of the point of reference (e.g. sectors of a pie chart). The value direction runs clockwise around the point of reference. Useful basic shapes for this type of diagram are pie sectors or ring sectors. These sectors can also be subdivided. For this subdivision the number of values (diagrammed by the number of sectors) multiplied with the number of the parts per value determines the total number of the sectors, which need to be created (see Figure 3 for an example). Further construction properties are the distance of the basic shapes to the center (e.g. for the displacement of all pie sectors) and the angles of the subdivided sectors (each angle depends on a data value). The radius of the diagram can depend on the sum of the data values or is constant for all diagrams in the internet map.


Figure 3: Circular principle and its properties

If the polar principle is applied, the basic shapes will be arranged around the center of the point of reference and the value orientations run from the center outwards (e.g. wing charts (proportional divided circles) or rose diagrams). Therefore changes can be made by applying data values to the radius (or width) of the parts. Pie sectors, ring sectors, bars and area polygons (e.g. for net diagrams) can be used as basic shapes. If pie or ring sectors are chosen, the angles of the subdivided sectors will automatically be calculated from the total angle of the whole sector and the adequate percentage of the subdivided value in relation to the total value.

For single diagrams lines are often used to connect the calculated endpoints of a net diagram. Due to the fact that lines are poorly seen in a map, polygons are used. The number of values, the number of parts per value, the distance of the basic shapes to the center (For net diagrams it is zero, because area information would be false.) and the total angle of the diagram can be chosen as construction properties (That makes sense, if only semicircle or quartercircle are to be created.).

With the row principle the basic shapes are arranged side-by-side on a reference line. The value orientations start at the reference line and positive values are placed vertically above the line and negative values below. As basic shapes, bars and area polygons can be used. As construction properties, the number of values, the number of parts per value, the number of groups (e.g. for grouped bar charts) and the distance of the basic shapes between each other and between the groups can be used to create a bar chart. The data can be applied to the height of the bars (distance of the polygon points from the reference line). For bars the width of the bars is relevant. The distance from the reference line is a possible property which is not recommended for diagrams in internet maps.

If the population pyramid principle is applied, the basic shapes are arranged side-by-side and bipolar from a reference line. The two value orientations run perpendicular to the reference line. This diagram is only useful for positive value pairs. The properties are the same as the ones used in the row principle. Only the number of groups differs from the row principle, as they always appear in pairs (bipolarity). The data determines the width of the bars (distance of the polygon points from the reference line).

The orthogonal principle requires value pairs that determine the position within the diagram. The two value orientations (axis) run perpendicular to each other starting from a common reference point. This principle is often used for scatter plots. As the points interfere with the map content, a diagram background is recommended.

The triangular principle is based on three reference lines, that are arranged with an angle of 60 degrees. The three value orientations run parallel to the reference lines. A typical application of this principle is the triangle diagram (ternary diagram). Only percent value triples between zero and 100 percent can be used to change the position of the points. An equilateral triangle is necessary as a background. This triangle can be divided into guide areas (also equilateral triangles) to define regions. This helps to determine the number of points within a region.

The grid principle can only be used for one value. The shapes are arranged in a grid. Only basic shapes which have a good symmetry are recommended. This improves the readability of the diagram. Each basic shape represents a unit (e.g. a basic shape is equivalent to 100 sheep). Additional properties are the number of basic shapes per row or column, the number of basic shapes per group as well as the distance between the basic shapes and the distance between the groups. One should avoid using fractions of a basic shape. That increases the readability and comparability between the data values in different regions of the map.

If the arcuated bar principle will be applied, the basic shapes will be arranged around a reference point. The value orientation runs clockwise around the center until a given endpoint is reached. The length of the arcuated bars (The length depends on the angle.) represents the data values. Bars can be used as basic shapes. Different bars can be drawn in a various distance from the center. They can also be divided.

A rotation can be applied to all diagrams. Combinations of diagrams are theoretically possible, but in an internet map this decreases the comparability between the different diagram values. The single diagram parts will be altered according to the data and the declaration of the changeable diagram property (e.g. bar height).


SVG currently provides one of the best technical foundations to efficiently generate online data visualizations and also adds interactivity and simplicity in the combination with ECMAScript and CSS. A clientside SVG-prototype was created to demonstrate and apply all of the previously described principles. The SVG application provides a graphical user interface (GUI) with a panel for the basic shapes and one for the diagrams on the left side and a preview area on the right side (see Figure 4 ).


Figure 4: Graphical user interface of the SVG prototype

The preview can be switched between the construction view (symbol appears once, see Figure 5 ) and the map preview (symbol will be placed 20 times, see Figure 6 ). Only the first step is visible after initially loading the SVG application. With each decision of the user follow-up options appear. The GUI consists of standard form elements, such as textboxes and buttons. These form elements are implemented in SVG and object oriented ECMAScript. In three steps (and a minimum of two mouseclicks) the user can create a basic shape and change the settings for his personal symbol (see Figure 7 ).


Figure 5: Construction view of the SVG prototype


Figure 6: Map preview of the SVG prototype


Figure 7: Panel of the SVG prototype GUI

Based on the user's settings a SVG symbol definition is created and applied to the construction view or map preview.

<!-- code example for a circle ring -->

<defs id="symbolDefs">
  <symbol overflow="visible" id="basic1" 
          transform="rotate(0 0 0), translate(0 0)" 
          preserveAspectRatio="xMidYMid meet">
    <path d="M 0 -1 a 1 1 0 0,1 0 2 a 1 1 0 0,1 0 -2 z 
          m 0 0.5 a 0.5 0.5 0 0,0 0 1 a 0.5 0.5 0 0,0 0 -1 z"/>

The included basic shape is based on the unit circle and is scaled according to the thematic data.

<!-- code example for the applied circle ring in the
     map preview -->

<g id="mapPreview" visibility="visible">
  <g id="el1" transform="translate(147 16),scale(60)">
    <use xlink:href="#basic1" transform="translate(0 0)"/>
  <g id="el2" transform="translate(100 240),scale(50)">
    <use xlink:href="#basic1" transform="translate(0 0)"/>
  <g id="el3" transform="translate(100 200),scale(10)">
    <use xlink:href="#basic1" transform="translate(0 0)"/>

Any other basic shape can be added and overlaid over the previously created basic shapes (see Figure 8 ).


Figure 8: Combinations of basic shapes

This results in a growing number of symbol definitions and symbol instances. Since the scale transformation also changes the distances between the basic shapes it is necessary not to combine them in one single symbol definition. This ensures that the distances can be recalculated. The result can be exported as a SVG symbol definition. This definition can be used in any SVG map. The whole symbol has to be transformed and scaled depending on the data.

The diagram symbol definition is more abstract. It is completely written in a separate namespace. The attribute "dataConnect" in these tags marks the shape properties, where data can be applied. Because we work on the client side we cannot read in separate files. For this reason we provide example data that exists in an ECMAScript array.

The abstract diagram description in a separate <defs /> section is parsed by an ECMAScript function. A separate function calculates the parts of the diagram dependent on the number of data values and the diagram description. This procedure has the advantage, that user-made errors during the input in the menu can potentially be corrected. The generated symbols are directly appended to the map.

Some of the features of the prototype differ from the previously summarized theory. For example five instead of three basic shapes for simple map symbols were introduced, because intersection is currently not implemented in SVG viewers (extra buttons for rings and ring sectors).

The prototype was tested under different platforms (Windows, Linux and MacOSX) with the newest versions of different browsers (Internet Explorer, Mozilla Firefox, Netscape, Opera, Konqueror, Safari, Galeon) (see Table 1 ). The plugins Adobe SVG Viewer 3.1 and 6 pre-alpha as well as the SVG viewer Batik 1.5.1 support the full range of the application. The Corel SVG Viewer 2.1 has some limitations.

The prototype was tested with:
platform browser ASV 3.1 ASV 6 pre-alpha CSV 2.1 Batik 1.5.1
(1) ... without key events      (2) ... alert function does not work      (3) ... text input problems due to browser shortcuts
Windows 2000/XP Internet Explorer X X ? -
Windows 2000/XP Firefox - X ? -
Windows 2000/XP Mozilla - X ? -
Windows 2000/XP Netscape ? ? X (1) -
Windows 2000/XP Opera ? X (3) ? -
Windows 2000/XP - - - - ?
Mac OS X Safari X - ? -
Mac OS X Opera X - ? -
Mac OS X Internet Explorer X - ? -
Mac OS X Firefox X - ? -
Mac OS X - - - - ?
SuSE Linux Konqueror X (2) - ? -
SuSE Linux Opera X - ? -
SuSE Linux Mozilla X - ? -
SuSE Linux Firefox X - ? -
SuSE Linux Galeon X - ? -
SuSE Linux - - - - X
X ... works       - ... cannot be installed       ? ... not tested

Table 1

Future enhancements

The SVG prototype needs to be extended to apply visualization attributes like the fill and stroke colors to the created map symbols and diagrams. Also intersections should be possible.

Further extensions concern the use of the map symbols in internet maps. To achieve this goal, research needs to be done for the use of cartographic principles regarding placement, generalization, minimal dimensions, interactivity and scaling of symbols. This second step can only be implemented on the server side because data files need to be read in.


[Arnberger 1977]
Arnberger, E. (1977). Thematische Kartographie. Braunschweig, Westermann Verlag.
[Bertin 1974]
Bertin, J. (1974). Graphische Semiologie. Berlin / New York, Walter de Gruyter.
[Bollmann / Koch 2002]
Bollmann, J. / Koch, W. G. (2002). Lexikon der Kartographie und Geomatik. Heidelberg, Berlin, Spektrum Akademischer Verlag.
[Bounford 2000]
Bounford, T. (2000). Digital Diagrams. New York, Watson-Guptill Publications.
[Color Brewer]
Color Brewer (last viewed 20 July 2004). .
[Dent (1999)]
Dent, B. D. (1999). Cartography - Thematic map design. Boston, WCB McGraw-Hill.
[Hake / Gruenreich / Meng (2001)]
Hake, G. / Gruenreich, D. / Meng, L. (2001). Kartographie. Berlin, Walter de Gruyter.
[Hochrein (1986)]
Hochrein, W. (1986). Modell zur Entwurfsgestaltung von Diagrammkarten. Zurich, Institute of Cartography, ETH Zurich.
[Imhof (1972)]
Imhof, E. (1972). Thematische Kartographie. Berlin, Walter de Gruyter.
[Kamps (1999)]
Kamps, T. (1999). Diagram Design. A constructive theory. Berlin / Heidelberg, Springer-Verlag.
[MacEachren (1994)]
MacEachren, A. M. (1994). Some Truth with Maps: A Primer on Symbolization and Design. Washington, Association of American Geographers.
[Monmonier (1982)]
Monmonier, M. S. (1982). Computer-assisted Cartography: Principles and Prospects. Englewood Cliffs, N.J., Prentice Hall.
Sagebrush (last viewed 20 July 2004). .
[Schroeder (1985)]
Schroeder, P. (1985). Diagrammdarstellung in Stichworten. Unteraegeri, Verlag Ferdinand Hirt AG.
[Slocum (1999)]
Slocum, T. A. (1999). Thematic Cartography and Visualization. New Jersey, Prentice Hall.
[Truran (1975)]
Truran, H. C. (1975). A practical guide to statistical maps and diagrams. London, Heinemann Education Books Ltd.
[Tyner (1992)]
Tyner, J. (1992). Introduction to Thematic Cartography. Upper Saddle River, New Jersey, Prentice Hall.
[White (1984)]
White, J. V. (1984). Using Charts and Graphs. New York and London, R.R. Bowker Company.
[Wilkinson (1999)]
Wilkinson, L. (1999). The Grammar of Graphics. New York, Springer-Verlag.
[Witt (1970)]
Witt, W. (1970). Thematische Kartographie. Hannover, Gebrueder Jaenecke Verlag.

XHTML rendition created by gcapaper Web Publisher v2.0, © 2001-3 Schema Software Inc.