Electronic choropleth maps design through SVG

Karel Stanek
Lucie Friedmannova
LGC,Dept.of Geography, Masaryk University
Kotlarska 2
611 37 Brno
Czech Republic
e-mail: mailto:karst@geogr.muni.cz
e-mail: mailto:lucie@geogr.muni.cz
fax: ++420-5-42128314
webpage: http://www.geogr.muni.cz

Keywords: Choropleth maps; Electronic maps; SVG; Cartograpic generalization


Adobe SVGViewer, with implemented DOM and included JavaScript engine, offer good environment for electronic map construction. This paper is focused on design such type of the electronic maps. Key roles in our map design play geodata handling and cartographic zoom.


Our laboratory is oriented on research in area of usage GIS technologies in thematic cartography. Cartographic visualization through the Internet belongs to one of our important topics. Especially we interested in web vector graphic. From many reasons, why vectors rather then images, most important for us is better control of unique graphic elements leading to full exploitation of web possibilities. After some experiments with several web mutations of the CGM, it was before the WebCGM time, we search for something more extendable, well documented and with inexpensive authoring way. During experiments with several different formats we met at the end of 1999 the SVG. Despite rendering problems, at those times, was the SVG very promising according to our intentions. Probably major advantage for us was XML based syntax. At the beginning we use the SVG just such graphic library for web publishing. We just generated code such plain text string through the PHP and after more sophisticated through the XML classes in the Ruby. With improvement of the Adobe SVGViewer we start to think about stand alone one-file electronic map based on the SVG. This paper is focused on creation of that type of electronic map.

Basic concepts

Design of our electronic map was given by several key intentions. Many of our works turn around of choropleth maps. Maps of this type represent relatively simple form of cartographic visualization, but are very easy readable and from this reason belongs to most used form of thematic maps. Designed electronic map is also focused on this type of maps. Key ability, which we implemented in, is a cartographic zoom. Cartographic zoom means that features inside of map face are generalized according to scale. As we mentioned before we suppose to have all inside of one file. One-file condition and cartographic zoom determined structure of our map - it consist from embedded non-SVG XML part, which describe geodata and map face behavior, JavaScript part, which setting values, running controls, generating map face and legend histogram, and couple of SCG elements, which consist mainly from GUI elements.

Cartographic zoom

In case of choropleth maps are generalization issues strongly reduced against, for example, topographic map. We can divide choropleth maps into two classes, one based on hierarchic units and second based on measurement sensitive units. In case of hierarchic units (administrative, river basins…) we have unique hierarchy of units aggregation. In this case we during zoom just need to manage aggregation level and detail of the unit borderline. In case of measurement sensitive units (geomorphologic…) are units borders depended on resolution of measurement of some key characteristic. In this case we provide also amalgamation and filtering of the units, but we can transform this case on previous one by including some fake units. Appropriate scales for aggregation is possible to derive from Topfer law, shape enhancement of the borderlines from display resolution. We used just simplification of the borderlines, because of quicker processing. As a simplification method we chosen Visvalingam-Whyatt algorithm, according to its less spike problems then Douglas-Peucker mutations. Generalization scheme looks like scale succession with appropriate event.

Color management

In our map we use fixed number of classes in every scale. After aggregation we have option either to keep classes from basic units division or to make reclassification. After reclassification we try to keep similar colors with previous class color of majority of subunits. It means that we have big regular difference between colors for classes at the bigger scale and with decreasing of scale color positions on spectral scale becomes more irregular.

Geodata preprocessing

Structure of the mapdata entities

Figure 1: Structure of the mapdata entities

Geodata, which we visualize, are provided by traditional GIS tools. Data was preprocessed from shapefile format either in ArcView 3.x (AVENUE scripts) or in ARGO environment (Ruby based set of tools). Basic feature for our processing is arc segment of the planar graph defined by borderlines of the smallest units division. Each unit that appears in map face is constructed from list of segments. This list consist from id number of segment with sign, sign determine order of vertices how are added in polygon definition. According to generalization purposes segment vertices are equipped by third coordinate, which represent resolution level of it. Similarly units are equipped by aggregation level number, according their position in hierarchy. Unique ids of both geometric features contain five digits of the quad-tree index. In fact real sense has index only in unit case, in segment case it is just method of id creation. In unit record are also data about its MBR and attribute record id. Attributes are separated from geometry into table like elements. Basic element is record with id and list of values. Meaning of values is in table element which play role of the data dictionary and it is connected to the records by part of id string. Only multimedia possibility in this stage is inserting link string in attribute record value. Coordinates are in slightly transformed, because of terrible local coordinate system in our country.

Examples of the Mapdata elements

< mapdata:segment id="s@11111@03" vertices="600,800@1000 700,600@50 750,500@20 900,400@20 1000,200@50 1000,50@1000" />
< mapdata:segment id="s@11111@03" vertices="600,800@1000 700,600@50 750,500@20 900,400@20 1000,200@50 1000,50@1000" />
< mapdata:table id="t@01" fields="pop@number@7.0 man@number@7.0 women@number@7.0 dens@number@7@2"/>
< mapdata:record id="r@01@1452" values="45000 22000 23000 300.00"/>

Design tools

User interface design is created in Adobe Illustrator. For map purposes is corrected in SciTE editor (SciTE is simple open source programmers editor with intelligent text coloring, in fact main tool for whole development, beside alert() function, of course …). Graphic is produced as simple as possible, exporting shades or similar things isn't so good idea for next processing. Visual form of attribute table is also designed in AI.

Layout of the user interface

Figure 2: Layout of the user interface

JavaScript part

Generally JavaScript part doesn't include some extraordinary parts. Main processing turn around of change transformation equations for coordinates, rebuilding of polygons, resize histogram in legend. These operations are provided with each pan, zoom and turn of the north direction (popup pan and zoom is disabled). To the mentionable functions belongs visualization of the attribute table of selected units. Rest function is oriented on setting of various variables.

User control

We designed map not some kind of GIS and it means that user control is limited. But, of course, it is an electronic map that offers much more interactivity then map analogue. User can choose visualized attribute, enabling of attribute links, classification method (Jenks, quantiles, nested means), enabling of reclassification and color scale type. User also obtain info about unit and can see class histogram with two parts - one global and second with topic map face situation.


The SVG implementations reach level to be an engine for construction of electronic maps. Big advantage is possibility either to use data and symbols from different sources or keep everything in one file. Implementation of the DOM model allows easy creation of really dynamic maps. In ongoing activities we are focused on extension functionality by enrichment of statistics and cartometric functions.


[1] "Line Generalisation by repeated elimination of Points", M. Visvalingam, J. D. Whyatt, 1993, Cartographc Journal No. 1.

[2] "System for Dynamic Visualisation of Choropleth Map" L. Friedmanova, K. Stanek,2001, Proceedings of The 20th ICC – Mapping the 21st Century, Bei.-Jing, China

[2] "SVG Format Usage for GIS WWW Interface" L. Friedmanova, K. Stanek,2000, Proceedings of "6th EC-GIS Workshop" (CD-ROM), Lyon, France

[2] "Scalable Vector Graphics (SVG) 1.0 Specification" J. Ferraiolo (editor),September 2001, Available at http://www.w3.org/TR/2001/REC-SVG-20010904/