Written by Ilya Zaslavsky and Ashraf Memon from the Spatial Information Systems Lab at the San Diego Supercomputer Center, this tutorial guides you through creating a service that generates SVG Tiny documents from ArcIMS™ (Arc Internet Map Server) services and demonstrates a range of techniques - including code snippets to try - for reading map server output, converting it to SVG and optimizing it for rendering on mobile phones.

SVG for mapping

Creating maps and location-aware mobile applications is an attractive application of SVG. Rendering maps with SVG on mobile phones can result in better quality graphics when bandwidth requirements are lower. An SVG-based mapping application may perform significantly better for displaying continuously moving objects, a popular application on mobile devices. In addition, SVG viewers may integrate vector graphics content retrieved from multiple sources.

Tutorial overview

In this tutorial, the authors describe some introductory techniques that they found useful when developing SVG-based map content for mobile phones. The map information is largely derived from common ESRI™ (Environmental Systems Research Institute) ArcIMS™ spatial data servers which are often used by federal and other agencies to provide public-domain location data. This tutorial presents the composition of the map generation Web service, and the range of data transformation techniques for optimizing SVG document sizes for rendering on mobile devices.

The authors guide you through with advice and code snippets in with the following steps:

• Structure of the SVG generator service, which is written in Java and using the Batik SVG Toolkit
• Communicating with a map service, including requesting and retrieving co-ordinate information
• Creating an SVG Tiny document, adjusting for screen resolution and populating with information from the map service
• Additional optimizations, trade-offs between interactivity and document size, concatenating path fragments, line generalizations and viewing your SVG document of a mobile phone

Download tutorial here >>