Web-Based SVG Map System: Design and Implementation

Web-Based SVG Map System: Design and Implementation

Robert P. Biuk-Aghai
Faculty of Science and Technology
University of Macau
Macau S.A.R., China
Email: robertb@umac.mo

Abstract
Systems providing geospatial information are numerous, but often are complex and difficult to use, preventing the more wide-scale utilization of geospatial information. We have designed and implemented a system that is easy to deploy and use, yet provides sophisticated map views. Our Web-Based SVG Map System, besides having traditional map viewing and navigation functions, provides map printing, map exporting into GML and PNG formats, and a simple map editing function. It was built using open standards and open source components, and is centred on Scalable Vector Graphics (SVG) technology. It consists of a relational database backend storing geospatial information, a map server implemented by us using Java servlet technology, and a web-based frontend implemented by us using SVG and JavaScript technology. Through the innovative use of asynchronous JavaScript, data transfer requirements are minimized and system responsiveness is improved. This system has the potential to make geospatial information significantly more accessible to and usable by general users.

1. Introduction
Many organizations world-wide are deploying and using geographic information systems (GIS), providing geospatial information to assist management, planning, and decision making. Utility companies, government departments, and others often possess large amounts of geospatial information in these systems which frequently is vital for their operation. However, geographic information systems are usually complex and require significant amounts of training and expertise to be used effectively. This prevents the wider use of geospatial information within the organization, limiting it to a relatively small group of experts. Managers, planners, and other non-technical end users would have much to gain from greater access to this information.

Web-based interfaces to geospatial information have emerged over the past years as an alternative to using the complex interfaces of geographic information systems [6],[9].

However, web-based interfaces usually suffer from several limitations. Firstly, the map displays are typically of inferior quality when compared to those of a desktop GIS. Secondly, the map displays are static, meaning that they cannot provide other information than what they initially display. Any map interaction such as zooming or getting information on map features (i.e. objects on the map) requires a separate request to the GIS web server, resulting in poor responsiveness as the new map view has to be downloaded from the server. Thirdly, web-based interfaces are almost exclusively for viewing only, disallowing editing of geospatial information. Finally, existing web-based interfaces use proprietary technology and data formats that work only with certain proprietary geographic information systems. We have developed the Web-Based SVG Map System to overcome all of these limitations. It uses Scalable Vector Graphics (SVG) as the core technology for producing and interacting with all map views. The resulting maps are of high visual quality. Moreover, given the nature of SVG, some map manipulation operations can be performed within the web browser without having to contact the web server to request a new map view. Given the programmatic capabilities of SVG, map editing can be performed through this interface. Finally, our system is based entirely on open standards and open source components and is independent of any existing proprietary GIS. Details of our Web-Based SVG Map System are introduced in the sections that follow.

The remainder of this paper is structured as follows: Section 2 gives a brief overview of SVG technology, the backbone of our system. Section 3 presents our system in more detail, and Section 4 discusses the system’s design and implementation. Finally, conclusions are presented in Section 5.

2. SVG
Scalable Vector Graphics (SVG) is a recent technology for producing two-dimensional graphics and graphical applications. The SVG technology consists of two parts: the SVG language for specifying graphics and graphical applications; and an SVG viewer for displaying SVG content.

The SVG language is based on (i.e. it is an application of) the eXtensible Markup Language (XML), and is thus both human-readable and machine-processable. It has the status of a W3C (World Wide Web Consortium) Recommendation. The SVG language provides facilities for document structuring, definition of shapes, painting, clipping and masking, compositing, text manipulation, styling, linking, scripting, animation, interactivity, integration of multimedia content, and others [10]. It is thus a very expressive language for creating rich graphics and highly interactive user interfaces for use on the Web.

The SVG viewer is software that interprets and renders an SVG document. It typically integrates into a web browser, either as a plug-in or as a built-in component. There are several SVG viewers on the market, including the Adobe SVG viewer [1] which can be installed in a web browser as a plug-in, and a native SVG viewer integrated in the Mozilla Firefox web browser [7]. Development on both of these viewers is still in progress in order to achieve full compliance with the SVG specifications.

In scope and capability SVG is similar to Shockwave Flash technology. However, it is different from Flash in being a W3C recommendation, rather than a proprietary technology; in being XML-based, rather than being based on a closed binary format; and in being explicitly designed to work with other W3C standards such as CSS (Cascading Style Sheets), DOM (Document Object Model), and SMIL (Synchronized Multimedia Integration Language).

Because of the capability of SVG of producing high-quality graphical displays, the ability to develop interactive user interfaces with it, and the ability to manipulate the contents and structure of an SVG document, it is very well suited for developing interactive web-based map applications. Details of our Web-Based SVG Map system are introduced next.

3. System Overview
Our Web-Based SVG Map System is a generic map application for use by untrained end users. It presents a map view and several map manipulation and navigation functions. It relies on data in a standard GIS format such as ESRI shapefiles as its input, which it converts into a relational database storage format. A view of the user interface as it appears in the web browser, including a map of Macau, is shown in Figure 1.

Figure 1 Web-Based SVG Map System user interface with map of Macau
The display consists of the following parts:

Map display area: The map is displayed centred in the main section of the screen.
Map toolbar: On the left-hand side, a toolbar is displayed for controlling the map. It provides buttons for zooming in and out, panning the map, etc. Feature type window: At the top-right, there is a list of all feature types (layers) available in the map database. It controls the display of feature types, and the display of information pointed at in the map. This window can be moved around on the screen or hidden if necessary.
Navigation window: At the bottom-right, there is a navigation window displaying the entire map area in miniature. It highlights the currently-displayed area of the main map view. This window can be moved around on the screen or hidden if necessary.
Feature attributes window: A window displaying values of a map feature’s attributes pops up when a feature is selected in the map.

Using the toolbar functions, the user can control the map such as zooming or panning it. The following are the standard toolbar functions provided to the user:

Home view: Display a view of the entire map. If zoomed in, this will zoom out to the outermost level at which the entire map data fits in the screen.
Zoom in: Zoom into the map display. The user may click any point on the map, and then draw a zoom rectangle on the screen originating at that point to zoom into the area of the zoom rectangle.
Zoom out: Zoom the map display out to half the current zoom level.
Pan: Pan the map. The user may click any point on the map, and then draw a line on the screen in the direction of where the map should be panned. When released, the map view is adjusted in the selected direction.
Select/get info: Point at an object on the map and get information about that map object, displayed in a pop-up window.
Multi-point distance measure: Measure the distance in metres between a set of points. The user clicks at a point on the map, then successively on other points and a polyline is drawn from the first clicked point to the next clicked point and so on, and the accumulated distance to each point is displayed on the map. An example of this is shown in Figure 2.
Search: Search map data in a selected feature type matching a specified search term in a selected attribute.
Locate: Pan and zoom the map appropriately to display and highlight a feature from among the search result on the map.
Toggle feature types window: Show or hide the feature types window.
Toggle navigation window: Show or hide the navigation window.
Refresh: Reload the map content and refresh the map display.

In addition to the functions accessible through the standard map toolbar, a second toolbar can be displayed which provides following additional functions:

Add new feature: Add a new point-type feature on the map.
Edit feature: Modify the attributes values or location of a feature on the map.
Export map to GML: Export the current map view to a GML (Geography Markup Language) file.
Export map to PNG: Export the current map view to a PNG (Portable Network Graphics) file.
Print map: Print the current map view.
Set preferences: Set map viewing preferences.
Export map to PNG: Export the current map view to a PNG (Portable Network Graphics) file.
Print map: Print the current map view.
Set preferences: Set map viewing preferences.

Figure 2 Multi-point distance measure with distance to points 2 and 3 shown
All of the user interface, including the map display itself, the toolbars, the feature type window, the navigation window, and the feature attributes window, are part of a single SVG document which is rendered in the web browser by the SVG viewer software – either an SVG plug-in, or a built-in SVG viewer.

The map functions are intuitive and easy to use. The map display is of high quality and visually attractive. Because it is web-based, the system is easily deployed: provided that each client computer already has an SVG viewer installed, the system only needs to be installed on a server computer and can then be immediately accessed and used by all clients.

4. Design and Implementation
Our Web-Based SVG Map System was designed and implemented as a three-tier system, consisting of (top-down) a client tier, an application tier, and a database tier. The general system structure is shown in Figure 3.

The client tier is responsible for presenting the map user interface (as described in Section 3) to the user. This part of the system consists of SVG code with embedded JavaScript which implements some interactive functions. It runs inside the SVG viewer, which in turn runs inside the web browser. In our system, we are using the Mozilla Firefox web browser with built-in native SVG viewer.

Figure 3 System structure of Web-Based SVG Map System
The application tier is responsible for producing map data for the client tier. It receives requests specifying the desired map data, then obtains the required data from the database tier, prepares the data in the required format, and sends it back as a response to the client tier. In our system, we use an Apache Tomcat web server/servlet container, the GeoTools API [4] for some map data transformations, the Batik toolkit [2] for converting map data to export format, the JTS Topology Suite [5] for implementing spatial analysis functions, and the GeoAPI [3] for implementations of the OpenGIS specifications [8].

Finally, the database tier contains the geospatial information that is to be presented to the user. It receives queries from the application tier, performs queries on the database, and sends query results back to the application tier. In our system, we use a PostgreSQL database server with PostGIS extension.

System performance is satisfactory. Retrieving and rendering most simple maps is achieved within about 2-3 seconds. When large numbers of features are involved this time increases. For instance, a map with five different feature types and a total of about 3,000 features requires about 10 seconds to retrieve, transmit to the client, and render in the SVG viewer. Each feature type is progressively drawn on the screen, so that the user immediately sees parts of the map appear.

Some map navigation operations do not require any separate server access. For example, when zooming into a given map view, the zoom operation is performed on the map data that is already present in the client side, as the data in vector (SVG) format can be arbitrarily magnified and still produce high quality graphical output. Another operation that takes advantage of the presence of client-side data is the select/get info function. Attribute values of map features are present in the SVG data that is already present in the client side, so that when a user clicks on a map feature, the attribute data can be immediately displayed without having to contact the server.

When the user requests data which is not present in the client, for example when selecting a currently not displayed feature type, a request for just this data is sent to the server. The server then sends this data back to the client, which inserts it into the SVG document that resides in its memory. Asynchronous JavaScript is used for this client-server communication.

The effect is that system responsiveness is greatly increased as compared to the case where the entire map data in the current map view has to be retrieved from the server on each map manipulation.

Conclusions
This paper has briefly introduced the functions, design and implementation of our Web-Based SVG Map System. It uses scalable vector graphics (SVG) as the core technology of the system. This enables it to have a visually appealing and high quality graphical display. Moreover, it makes it possible to perform certain operations entirely in the client side, resulting in greatly enhanced system responsiveness. We foresee the use of this type of technology to increase in the future as it matures, and for increasingly more GIS systems to be based on it. Finally, the system presented here is of applicability beyond the location in which we have used it and whose map data we have loaded into it (Macau), to other locations around the world. Moreover, the system can become the basis for building other applications that use geographic information and map display on top of it. In this way, it has the potential to empower people throughout the organizations in which it will be deployed by giving them easy access to geospatial information.

Acknowledgments
The support by the University of Macau toward this work is gratefully acknowledged. Thanks go to Jacky Chan, Marcelo Chong, Johnny Leong, and Martin Loi for their work on implementing the Web-Based SVG Map System. Thanks are also due to Gerald Estadieu and Frederic Petit for their help and support for this project.

References

Adobe Systems Incorporated, Adobe SVG Viewer, available online at: http://www.adobe.com/svg/viewer/install/main.html (accessed July 2005).
Batik website, http://xml.apache.org/batik/ (accessed July 2005).
GeoAPI website, http://sourceforge.net/projects/geoapi (accessed July 2005).
GeoTools website, http://www.geotools.org/ (accessed July 2005).
JTS website, http://www.vividsolutions.com/jts/jtshome.htm (accessed July 2005).
Kim, K.S., Lee, K.W. The Development of Web-based geographic information system, in: Pascolo, P., Brebbia, C.A (eds.),GIS Technologies and Their Environmental Applications, 1998, WIT Press, UK.
Mozilla Foundation, Mozilla SVG Project, available online at: http://www.mozilla.org/projects/svg/ (accessed July 2005).
Open Geospatial Consortium, OpenGIS Specifications, available online at: http://www.opengeospatial.org/specs/?page=specs (accessed July 2005).
Wei, Z-K., Oh, Y-H., Lee, J-D., Kim, J-H., Park, D-S., Lee, Y-G., Bae, H-Y., Efficient spatial data transmission in Web-based GIS, Proceedings of the 2nd International Workshop on Web Information and Data Management, Kansas City, Missouri, USA, November 1999, pp. 38-42, ACM Press.
World Wide Web Consortium, Scalable Vector Graphics (SVG) Specification, available online at: http://www.w3.org/TR/SVG/ (accessed July 2005).