Abstract
As known, SVG offers an interesting medium for web mapping applications. Within this background we developed an extension for the ESRI GIS software products. MapViewSVG allows the user to convert maps from ArcGIS/ArcView GIS into the SVG format and then publish them on the web or on CD/DVD. MapViewSVG was made available in 2002 and is now one of the most well known extensions to publish ArcGIS maps on the web.
Table of Contents
Web mapping is the process of designing, implementing, generating and delivering maps on the World Wide Web. Those maps can be static (just a single image on a page, created once) but also interactive. This interactivity means selecting different map data layers to view, or zooming into a particular part of the map that you are interested in. All this is done while interacting with the web page and a map image that is repeatedly updated, that is created on demand. They are maintained by a web server and a mapping server/program with the management of the underlying map data.
Web GIS is similar to web mapping but with an emphasis on analysis, processing of geodata and exploratory aspects.
Sophisticated tasks of a GIS can be clipping, overlaying, buffering, conversion tools (raster to polygon, feature to raster), generalization, merging, establishing topological relationships, geocoding, routing, modelling (e.g. analyzing patterns, cluster analysis, geostatistics, hydrological models, neighbourhood analyses), 3D and surface analyses and animations. Beside this, the maintaining of geographic data (creating, editing, manipulating and updating of features and data) are also tasks of a GIS.
While many of those GIS tasks may change the geometry of the features as well as the underlying database - and really can be seen as a part of a GIS - there also exists many requirements, which can better described as an Information GIS. Those tasks can be visualizing data and navigating (already discussed as a part of web mapping) but also more interacting with the map: identifying features on the map, map tips, measuring distances and areas, selecting features by attributes, creating statistics and having other kinds of visualization of data (e.g. graphs, charts and attribute tables).
Within the wide range of working with GIS on the web, we see the main scope on providing "Information-GIS" functionalities within MapViewSVG, rather than implementing the sophisticated tasks of a GIS mentioned above.
SVG in combination with other XML data, and technologies like ECMA Scripting, XMLHttpRequest (AJAX), XSLT, DOM support, is well suitable for these tasks of an “Information-GIS”. They are used within MapViewSVG to produce vector based mapping projects for the web.
Creation of cheap GIS working places
Cost-saving delivery of GIS-data
Cost-saving publication of interactive mapping applications on the Internet, with no need of additional software on the web server.
MapViewSVG is situated in the low cost application area and is best suitable for smaller projects.
Within the SVG mapping project, different GIS functionalities and types of tasks are implemented like:
Mapping and visualization
Supporting symbols and labels, turning on and off individual layers, providing legend, overview map, and other site information, displaying layers at certain scales.
Navigating with maps
Zooming, panning, setting the map scale, providing spatial bookmarks and scale bar.
Interacting with maps
E. g. Identifying features on the map, hyperlinking, map tips, measuring distances, coordinate read-out, selecting features by attributes (query builder), statistics, and other visualization of data (graphs, charts, and attribute tables including the linking to the features on the map).
Creating and manipulating of features and data
Primarily, these functions are not implemented in MapViewSVG, and need further customization (see chap. 7).
The main goal of MapViewSVG is to translate the ArcMap project (data frame) "as it is" into an interactive SVG mapping project. This includes properties of the data frame itself (e.g. map and display units, drawing order of layers) as well as the layers with their rendering types, symbols and layer properties (map tips, hyperlinks, scale ranges for layer visibility, etc.). The user should be able to do most of the settings within the GIS software (where he is familiar with it) and finally export his project at the push of a button. The SVG mapping project is available out of the box, no explicit SVG or other web programming knowledge is necessary (Fig. 1).
Inside the MapViewSVG wizard, the user only defines the final web layout and the GIS functionalities he wants included in the SVG mapping project.
Thus the result has a bit of the look and feel of the ArcMap project.
MapViewSVG supports vector based object data and image data. Image data are displayed in GIF, PNG or JPEG format. All vector based objects and all text objects are converted into SVG format. Web Map Service (WMS) layers can be added to the SVG mapping project as well.
The presenters will show a few examples and describe the underlying technologies for a few available tools within MapViewSVG. In general the SVG mapping tools are based on the following technologies:
ECMAScript support: ECMAScript is the standardized version of JavaScript and is necessary to implement client side interaction, refactoring of the DOM of a web page and for doing network requests. ECMAScript is currently part of any modern web browser.
Event support: To implement interactive client side maps various events are necessary (e.g. mouse events like click, mouse-over, mouse-move but also keyboard events, state events). These events trigger script execution.
DOM support: The Document Object Model provides a language independent API for the manipulation of the document tree of the web page. It exposes properties of the individual nodes of the document tree, and allows users to insert new nodes, delete nodes, reordering nodes, and change existing nodes. DOM support is included in any modern web browser.
Network requests: This is necessary to load additional data and content into a web page. Most modern browsers provide the XMLHttpRequest object, which can be used by ECMAScript to transfer XML and other text data between a web page's client-side and server-side and can be included into the current DOM tree of the web map.
XSL Transformations: This language allows users to transform XML documents into XHTML documents for web pages.
XPath: This language is used to select nodes from an XML document.
Supported methods within SVG: e.g. getTotalLength and getPointAtLength (SVGPathElement), getComputedTextLength (SVGTextContentElement) to calculate and manipulate the SVG content.
CSS: To describe the presentation of a document.
Server-side scripting: To communicate with databases (e.g. PHP).
Optionally the attribute data can be stored as XML-data or in a database (MySQL).
Unlike developing one’s own applications, we have to confront more often the users needs or lack of knowledge on how SVG works best. The requirements come either from ArcGIS - supporting the different symbol types, rendering types, data formats - or from the requested results, like having specific functionalities and design conceptions.
In addition, SVG itself imposes some restrictions, for example:
The size of GIS/SVG data gets very large. The increasing loading time of the SVG files within the browser has to be seen as a limit. The whole application looses its practicability. To overcome this (general) disadvantage of SVG files (especially when displaying images), we developed a tool, which cuts the layer (raster, line or point layer) into several tiles. The specific tiles will be loaded dynamically (via XMLHttpRequest) as soon as they are visible within the map extent.
Also generalization tools, provided by ArcGIS (generalizing with the Douglas-Poiker algorithm, smoothing by converting the geometry as Bézier curves), are used to simplify polygon or line features.
In general, we would appreciate methods to indicate the state of loading to the user (e.g. wait cursor, progress bar).
ArcGIS provides many types of feature rendering (SimpleRenderer, UniqueValueRenderer, ClassBreaksRenderer, ChartRenderer) and symbols, like simple fills, simple lines, and simple markers, multi lines, hatching, gradient fills, marker fills and line fills, picture fills, picture lines and picture markers (Fig. 2).
While many of those symbols can be easily converted to SVG, there exist a few which can be converted only using tricks (but then with lack of practicability or a performance loss) or can’t be converted at all. For example:
Irregular pattern / dot density rendering
Dot density maps represent quantitative data by drawing randomly placed dots inside polygon features (Fig. 3). Also irregular pattern is often used for map design. So far there is no equivalence in SVG.
Multi lines with line offset
Multi lines can be created by defining a path and referencing on it with the “use” element. Each use element has its own width, colour and pattern of dashes and gaps. With these attributes you can define most multi lines with perfect quality. But unfortunately there is missing a line offset, so hollow lines (Fig. 4 and Fig. 5 bottom line) cannot be created. The transform attribute “translate” doesn’t work.
Marker lines
Marker lines can be created by defining a path and reference on it with “textPath”:
<font>
<font-face font-family='svgMarker' units-per-em="10" />
<glyph unicode="a" horiz-adv-x="5" d="M-2.5,-5 l5,5 -5,5 z" />
</font>
<path id="line01" fill="none" stroke="blue" d="M 50 90 C 300 20 20 560 500 90"/>
<text font-family="svgMarker" font-size="16">
<textPath xlink:href="#line01">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</textPath>
</text>
While this method can be sufficient in case of full control on the SVG image, it is not applicable if this is not the case. The amounts of chars (e.g. “a”) has to be estimated to bead the whole line (Fig. 6). Beside this, rendering text is time consuming and therefore hinders performance.
Non-scaling strokes and labels
A common behaviour in GIS software is, to let the outline of an object keep its original width no matter how much the user zooms in. Up to now this behaviour has to be simulated via ECMA Scripting and therefore hinders performance.
The SVG Tiny 1.2 specification defines non-scaling strokes and we hope, that all web browsers will support this in the near future.
Beside this we also have a need a non-scaling behaviour for labels. But with labelling the main problem is, when zooming in, the distance between the map feature and the descriptive text becomes bigger and in the end they lose their “functional link” (Fig. 7). So far the only solution we have is to replace the labels within different scale ranges.
Font marker
GIS software very often uses fonts as markers. While there are tools to convert fonts into SVG fonts, the correct positioning of these converted fonts (markers) remains a problem for SVG. Font markers are positioned centred within the GIS software, SVG text is positioned on the lower left point (Fig. 8). Therefore correct positioning of the point features with markers is not possible as the offset has to be “estimated”.
Simple spatial queries like intersect, completely contain, completely within, identical should be supported (Fig 9-11).
Overlapping SVG elements (embedded with “object” or “embed”) aren’t displayed properly in different browsers: not at all in IE, and with restrictions in Firefox.
The initial viewport coordinate system of SVG has its origin at the top/left, with the positive x-axis pointing towards the right, the positive y-axis pointing down. However, with maps the positive y-axis is pointing up. For this all spatial data has to be mirrored (Fig. 12).
Mouse events (like click, mouse-over, mouse-move) only operate with the uppermost element in the drawing hierarchy. Event support should be available for all elements at that location, e.g. topmost object, visible objects, or all objects at that location (Fig. 13).
The fast key based zooming and panning tool within the ASV plug-in is not available within the browsers Opera, Firefox and Safari. Zooming and panning has to be done via ECMA scripting and therefore hinders performance.
We don't know how much the open structure of XML encoding raises intellectual property protection and rights management issues when serving spatial information. So it might be an obstacle in using SVG.
A lot of work has do be done to support different browsers. We certainly appreciate the upcoming native support of SVG in the browsers Opera, Firefox and Safari. But at the moment the denial of native support remains a problem for IE, the predominant web browser, and the discontinuity in development from Adobe of the most popular plug-in. We hope, that RENESIS Player from examotion will take a permanent place quite soon, alternatively it would be even more appreciated if IE will natively support SVG in future releases.
Supporting Fonts
Due to the common use of fonts as markers, we hope that SVG fonts will be supported in all web browsers in the near future. Firefox does not support fonts at all, so we implemented a font to image conversion tool to overcome this disadvantage. The lack of quality with this method remains (Fig. 14).
Besides developing the software product MapViewSVG, we also do work on specific applications and customization. These are services concerning specific adjustments and extensions of the software product MapViewSVG but also other SVG based applications.
As MapViewSVG allows certain customization concerning layout and adding ones own scripts, the main focus of customizing refers on creating and manipulating of features and data. This can be done with the use of MySQL and PHP.
Examples
Guestbook MapViewSVG (http://www.mapview.de/guestbook/index.html):
Allows guests to add features on a SVG map (point and attribute data). Please come and sign the guestbook!
Collection of building heights by municipalities (Bavarian Environment Agency, Bayerisches Landesamt für Umwelt).
Within the EU Environmental Noise Directive town councils have to provide the building heights along specific highways. A web based tool has to be developed, which allows the user to select the specific buildings and edit the attributes within a form. The tool used SVG, MySQL, and PHP.
Scotland’s first survey of marine and coastal recreation (Land Use Consultants, Glasgow, Scotland)
Allows users to add/edit features on a SVG map (point and attribute data).
Currently much work has to be done on supporting different web browsers. Beside the implementation of further functionalities in MapViewSVG, we would like to focus on SMIL animation within SVG. Unfortunately this has to be subordinated, due to the lack of sufficient support in different web browsers.
At the moment, we are developing another product called Mappetizer, which allows the user to create SVG mapping projects without having additional GIS software. Supported file formats for geographic datasets are ESRI shapefile format, DXF, MIF/MID, MapInfo TAB, GML, GPX and raster (TIFF, JPEG, GIF, and PNG).
More information about Mappetizer will be available (soon) on our homepage http://www.mappetizer.de.
Many examples are available on our homepage: http://www.mapviewsvg.com/examples/
http://www.mapviewsvg.com/references/ (with examples of our customers)