Tirol Atlas

An SVG based online Atlas Information System

Keywords: Online Atlas, Web Mapping, Thematic maps, Topographic maps, PostgreSQL, Postgis, SVG, Javascript, Ecmascript, Perl, Linux, Opensource, Tirol, Austria, Southtirol, Italy, European Community, Interreg 3b, University of Innsbruck, Department of Geography

Klaus Förster
Tirol Atlas - University of Innsbruck
Innsbruck
Tirol
Austria
klaus.foerster@uibk.ac.at
http://geowww.uibk.ac.at/~klaus/

Biography

Klaus Förster works for the Tirol Atlas in the fields of application programming, database administration, server administration and teaches web mapping courses at the University of Innsbruck, Department of Geography.


Abstract


The Tirol Atlas (http://tirolatlas.uibk.ac.at/) aims to build an online Atlas Information System for the regions of Tirol, Austria (http://www.tirol.gv.at/) and South-Tirol, Italy (http://www.provinz.bz.it/), providing geographical knowledge with a scientific background relevant for planning and everyday life. Spatial information is displayed in a modern and innovative way using open standards like Linux, PostgreSQL, Perl, HTML and last but not least SVG.


Table of Contents


1. Where do we use SVG
     1.1 Thematic Maps
         1.1.1 Process of Map definition
         1.1.2 Process of Map creation within the Interface
         1.1.3 Featureset of the Interface
     1.2 Visualization of data
     1.3 Topographic Maps
2. Where else do we use SVG

1. Where do we use SVG

1.1 Thematic Maps

The first field of SVG usage is creation of thematic maps. Right now there are about 37 map-sets online consisting of 165 maps with 205 map-layers dealing with population and tourism (http://tirolatlas.uibk.ac.at/maps/thematic/).

1.1.1 Process of Map definition

An intranet application written in Perl allows editors to create maps choosing variables from a PostgreSQL database (http://www.postgresql.org/, set formulas, colors, thresholds, scales and legend features. Each map is made up by one or more map-layers (e.g. colored areas with circles on top) and can be assigned to a menu that appears as pulldown list within the interface. Event listeners may be attached to single map layers triggering scripts that perform tasks like displaying graphs or additional datasets in external windows. Optional introductory texts may be referenced as well. Each map-set, map or map-layer can be set to inactive causing exclusion from the online thematic map application.

The whole process of map definition is based on HTML input-forms and a few helper applications. All configuration is stored within the PostgreSQL database consisting of approximately 20 tables that hold definitions for relationship between map-layers, maps and map-sets, contain event assignments and scripts for layers as well as texts for map-sets and maps. All language relevant content is kept in at least german and italian. There are several tasks to perform until a map is ready to be displayed:

  1. create a map-set that will appear as pulldown menu within the interface
  2. define single maps with title, information and stacking order within menu
  3. define map-layers that make up the map
  4. Add commentary text to each map or map-set if desired using the info editor (http://tirolatlas.uibk.ac.at/papers/svgopen2003/pages/config_info_editor.html)

1.1.2 Process of Map creation within the Interface

All of the above mentioned definitions are stored in the database, queried when the user selects a specific topic and translated to data objects and function calls that correspond to methods in Map_Thematic.js, a visualization object that "knows" how to color areas, draw circles, piecharts, barcharts, legends and output metadata. Central component in preparation of this process is map.pl, a Perl script which queries configuration for the desired map or map-set and creates an HTML page on-the-fly containing the following components:

1.1.3 Featureset of the Interface

The rich feature set of SVG allows realization of a user friendly map interface through:

All necessary tasks are implemented with JavaScript on the client side using the browser's scripting engine. Keeping the main map static in a frame helps to reduce data traffic (http://tirolatlas.uibk.ac.at/maps/thematic/).

	index.html:
	+-------------------------------------------------------------+
	|                                                             |
	|                          menu (.svg)                        |
	|                                                             |
	+------------+------------------------------------------------+
	|            |             dynamic (.pl)                      |
	|            +------------------------------------------------+
	|            |                                                |
	|            |                                                |
	| navigate   |                                                |
	|  (.html)   |                                                |
	|            |                                                |
	|            |                                                |
	|            |             mainmap                            |
	|            |              (.svg)                            |
	|            |                                                |
	|            |                                                |
	+------------+                                                |
	|            |                                                |
	| overview   |                                                |
	|  (.svg)    |                                                |
	|            |                                                |
	+------------+------------------------------------------------+
					

The main script resides in index.html, holds global functions and a global object that builds the backbone of inter-frame communication. Several other small Javascript libraries are included wich take care of displaying the menu or opening windows for object search and scale configuration. The mainmap references Load.js which makes sure that appropriate geometry is loaded prior to drawing, Text_Wrap.js a simple text wrapping library needed for help and info texts within the legend window and Text_Zoom.js which is responsible for resizing city-labels during zooming in and out. The dynamic area contains map.pl the central map creation script referencing Map_Thematic.js the map drawing library and Map_Meta.js that takes care of map metadata.

Used Javascript libraries

The following features are available in the current version:

  1. general language switch between german and italian.
  2. all menus and maps may be called directly using the url's querystring - e.g. index.html?menu=999&map=142&lang=de
  3. switches for layers relief, water, cities, legend and scale, setting their display to "inline" or "none"
  4. search functionality that queries the database for objects in the currently displayed layer and generates an HTML result page in a seperate window that calls a function to highlight the specific object. Right now it's possible to search for administrative units. Rivers and lakes will follow as soon as names are present for all of them.
  5. overview map with zoom an navigation features:
  6. dynamically built menu that uses xml like menu definition to read labels and urls to be displayed. All entries are generated on load and set to hidden or visible according to user action. Selected menus change color. When you specify a querystring to display a distinct map, the menu is collapsed automatically to match the current state. Introductory texts for map-sets are linked form the menu as well.
  7. legend and info window with:
  8. real scale application with ability to set the scale taking screen width into account.

Due to constraints in viewer implementation and the fact that SVG is (not yet) perfectly suited as mapping format, a lot of script code represents workarounds that could be omitted as soon as SVG implementation enhances. Viewbox issues and lack of browser to plugin communication in "modern" browsers like mozilla and netscape strike the most.

1.2 Visualization of data

As mentioned before, it is possible to attach event listeners to map layers that call predefined scripts to display additional information like commentary texts, data sheets, charts or further maps. Some of these visualizations are realized with a datasheet application that allows to take variables from the database and feed HTML or SVG templates. Amongst these are:

1.3 Topographic Maps

One of the current main tasks is the creation of a topographical map in UTM WGS84 projection at a scale of about 1:100.000. The first prototype (http://tirolatlas.uibk.ac.at/maps/topo/proto.html) contains static maps for each community in north- and southtirol with layers for rivers, lakes, contour lines, streets and villages. Additional background images may be chosen as well.

ESRI shapefiles with object id, type, level and names are imported into a point-, line- or polygon table within the PostgreSQL/PostGIS (http://postgis.refractions.net/) database according to their feature type. These tables are then queried by a Perl script using community-ID or arbitrary x-y location to determine the desired extent. A PostGIS function (http://tirolatlas.uibk.ac.at/papers/svgopen2003/postgis_inout_assvg.c) translates lines and polygons into SVG path data during the query process. Map features are grouped according to their type that corresponds to a central stylesheet taking the chosen background into account and written out using their level item as stacking order.

Image tiles for backgrounds are cut out from master tif-images sized 5364x4540 Pixels (~70MB) covering the whole Tirol Atlas area using "convert" from the ImageMagic package (http://www.imagemagick.org/ according to settings in the tif's worldfile. Each tile covers an area of 25x18.75 kilometers and is preprocessed. On the other hand vector data is queried from the PostgreSQL database on runtime and line features are clipped at the viewBox by ClipLine.pm (http://tirolatlas.uibk.ac.at/papers/svgopen2003/pages/ClipLine.pm), a Perl libraray that implements the Cohen-Sutherland lineclipping algorithm.

Examples:

  1. Shaded relief (http://tirolatlas.uibk.ac.at/maps/topo/map.pl?id=170101&bg=hill)
  2. Shaded relief, forests (http://tirolatlas.uibk.ac.at/maps/topo/map.pl?id=170101&bg=hillw)
  3. Shaded relief, coloured (http://tirolatlas.uibk.ac.at/maps/topo/map.pl?id=170101&bg=iso)
  4. NASA satellite image (http://tirolatlas.uibk.ac.at/maps/topo/map.pl?id=170101&bg=sat)

A second prototype (http://tirolatlas.uibk.ac.at/maps/topo/pan/index.svg) allows panning through the whole region using a pre generated set of 621 regular 10x10km SVG slices that are loaded according to the current viewport and unloaded if they are out of sight. The background image may be specified by query-string, a small overviewmap shows the current position, allows to jump to a location onclick and a legend window contains switches to turn map-layers on and off. Scrollbars are added if necessary by Scroll.js (http://tirolatlas.uibk.ac.at/papers/svgopen2003/pages/Scroll.js.txt). Keeping track of current position, remembering already loaded polygons and slices is managed on client side using javascript.

2. Where else do we use SVG

.. well, there are a lot of other areas where we use SVG. In the places section (http://tirolatlas.uibk.ac.at/places/) where each community is briefly described with text & picture, an SVG overview map showing a dynamic marker reflects the current position. On click a spatial query is sent to the database that returns villages located within 15 kilometers ordered by distance. In preparation of the childrens & youth corner that will be established within the next year a configurable Memory Game (http://tirolatlas.uibk.ac.at/papers/svgopen2003/memory/) with "didactical background" and a simple Puzzle (http://tirolatlas.uibk.ac.at/papers/svgopen2003/puzzle/) have been realized.

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