Interactive Topographic Web-Maps Using SVG

Keywords: webmapping, topographic maps, interactive maps

Andreas Neumann
Institute of Cartography, ETH Zurich
ETH Hoenggerberg, CH-8093 Zurich
Fax: ++41-1-6331153

The presentation shows how to present interactive topographic maps with high graphical quality (both for viewing and printing) using open standards and open-source software. Because SVG graphics can be structured and linked to attribute data it allows the display of corresponding attribute-data with mouse-over effects, querying of geographical objects, user-defined symbolization and personalization. As to enhanced topographic functionality, interactive topographic maps allow to define analytical hillshading-parameters along with various standard dtm- analysis, such as extracting profiles, calculating exposition, aspect and visibility. Map calculation may be done either on the server- or on the client-side, depending on computing power, data licensing issues and responsivenes.

The presentation also deals with optimization techniques to keep filesizes small and enhance data maintenance, while still keeping display quality high. Optimization includes the use of centralized symbol libraries, re-useable objects, style-sheets, path-optimizations and XML-entities. Topographic databases tend to get large. Webbased mapping systems therefore usually send a subset of the whole data. Because SVG is a text-based format any sql-compatible database along with the developers favourite scripting or programming language will do the job. A solution for open-source databases, such as MySQL or Postgres will be presented.

The user-interface of the maps will also be implemented using SVG. This has a number of advantages above plain HTML GUI's: It looks consistent across all platforms, it is highly configurable, it can be run within the SVG Viewers javascript engine (thus it works on all platforms where the viewer is available, because it does not rely on the browsers javascript-engine) and it allows to use GUI-Elements not implemented in HTML 4 (f.e. knobs, sliders, etc.). To centrally define GUI-objects an approach similar to Kevin Lindsey's GUI project will be used, or - if already available - his GUI-library directly. This approach uses a separate XML-namespaces and introduces new tags declared in a separate DTD. A dom-tree parser then reads the file and replaces the GUI-Tags with SVG-Code and javascript interactivity.

About the author

The author is currently PHD student at the Institute of Cartography, ETH Zurich - His interests are in webmapping, terrain representation and cave-mapping. He is experimenting with SVG since late 1999 and co-founded the "" project - together with Andréas M. Winter - to make SVG technology available and transparent to cartographers and GIS people. The author is also part of the conference organization committee.