Adding interaction to interactive maps: isiMap and Layoutdescription

Keywords: Cartography, Interaction, Scalable Vector Graphics (SVG)

Tobias Dahinden
Research Associate
Institute of Cartography
Swiss Federal Institute of Technology (Hoenggerberg) 8093 Zurich Switzerland dahinden@karto.baug.ethz.ch http://www.ika.ethz.ch/td/

Biography

Tobias Dahinden (b. 1973) studied geodesy. Currently he's a PHD student and Research Associate at the Institute of Cartography of the Swiss Federal Institute of Technology. He is working with SVG since spring 2000. He was part of the organization committee of the 1st SVGopen conference. He coaches students in works concerning SVG. Since 2004 he's developer an open source SVG-Viewer based on PersonalJava.

Urs Hensler

Biography

Urs Hensler studied Geography and Computer Science at the Department of Geography of University of Zurich (Switzerland).


Abstract


Producing interactive maps is still a problem for non-prgrammers because of the lack of useful software. Thus we developed software for adding interactions to maps. First we asked some Cartographers which interaction they need. Then we developed a program called "isiMap" for producing interactive maps as output of Adobe Illustrator by mouse-clicks. As a third step we made an evaluation about the usefulness of the software. The newest development is a software where one can describe the interaction in XML.


Table of Contents


1. Introduction
2. isiMap
     2.1 Evaluation of Requests
     2.2 Impementation of the Software
     2.3 Post-Evaluation
3. isiChart
4. Conclusions and further developments
Bibliography

1. Introduction

Last year we started the project "isiSVG". isiSVG stands for "integrate scripts in SVG" and is pronounced like "easy - SVG". The Projects deals with automatic script generation. The basic idea follows a software called ezJava for creating JavaScript for HTML.

Cartographers are often people that are not able to write programs. Even to look at a XML-Source is already very complicated. So they won't make an interactive map with SVG because of the lack of appropriate software. Thus we decided to make a Software where you can draw the map, the legend and the navigation with a program like Adobe Illustrator and export the graphic as SVG. After you did, you should load this map into our software. Then you should be able to add interaction by just clicking. This Software is an Evaluation-Prototyp, we call it "isiMap".

During the first evaluation we were asked if it would be possible to intergrate data from a DB. Because it isn't we decided to start a second project. Here you should be able to describe your map in an XML-File. The source of the geometries have to be SVG-Fragments. They can be stored local or in somewhere in the Internet. As a last step the XML-File has to be generated by a wizard. This product is a Demonstration-Prototyp, we call it "isiChart".

2. isiMap

This section we decribe the development of "isiMap" developed by Urs Hensler (see [Hensler05]) and give an overview about the research we did during the development.

2.1 Evaluation of Requests

In a first phase we asked 7 Cartographers which interaction they use often in a map. The evaluation was done in a semi-free manner. This means we proposed some interactions and asked wheather they are useful or not.

From this evaluation we made a list with preferences of interactions. We followed the "MoSCoW" method. MoSCoW stands for "must", "should", "could" and "would" (or "won't"). We put every interaction in one of this four sections. So we can say that we must implement an interaction for zooming a map area. Yet we only could implement a pan option and maybe we would implement a option to use our tool as Plugin for Adobe Illustrator.

2.2 Impementation of the Software

To add interaction visually it is necessary to render an SVG document. For rendering SVG we used the batik toolkit. But we implemented our own user interface. We made a menu called "interaction". To add interaction a user has to select a entry of this menu and then a Wizard is started. The user has to answer the questions. After adding a certain interaction it is imediately active and the user can test it.

We also created a german Tutorial where people can learn how to use the software. As example we made a map about Biodiversity in Europe [URL: isiMap Example]

isiMapWiz.jpg

Adding interaction is done with a Wizard (left) while you select elements by click on them (right).

Figure 1: isiMap Menus

2.3 Post-Evaluation

After implementing most of the "must, "should" and "could" properties we showed the program to 13 people and asked questions about its usability. For this evaluation we used a very common questionaire that followed ISO-Norm 9241/10. We found that isiMap is very useful for people that are not common with (JavaScript-)programming. People who are used to create maps with JavaScripts said that they won't use the program. People who never made a interactive map before, said that the will use this program in future. A graphic impression about the results gives image Figure 2.

One of the major problems is that the menu of the software is in english. But all people we asked about the software were nativ german. So they were often confused by the english expressions.

isiMapFreundlich.gif

Critic about isiMap: The software is not adaptable and not very self descriptive.

Figure 2: Quality of isiMap

3. isiChart

When we started the development of isiMap we were asked, why we just implement the software for a workflow with Adobe Illustrator. So we decided to make another software that deals with databases. The map is described in XML.

The description contains a part where the source of data is declared. This sources are SVG-Fragments. They can be files or in a (PostgreSQL)-Database. The sources may be local or on a server. Further one has to describe which interaction is needed by which part of the map.

For each possible interaction we have a directory. In this directory there is a file with the main Script, the initScript, some SVG Code that is used and with a description of the dependencies to other interactions and depencies map elements.

This software is still in prototype mode. So we are not yet able to tell you here something about results. Nonetheless we plan to create a Wizard

4. Conclusions and further developments

The software isiMap seems to be useful but not very flexible. It can help Cartographers that are not common with programming. Yet it is not useful for people who know how to create JavaScripts.

The software isiChart is just an demonstration prototype. To create a useful software we have to make futher developments.

Bibliography

[Hensler05]
Hensler, U. (2005): Automatische Erstellung von JavaScript-Interaktionen fuer SVG-Karten
[URL: isiMap Example]
http://www.ika.ethz.ch/td/isiSVG/isiMap/example/Karte.svg Visited: June 22, 2005

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.