MapViewSVG - an Extension for ESRI GIS and Mapping Software

Table of Contents

MapViewSVG in the context of Web mapping and Web GIS
Application Area of MapViewSVG
Area of application
Implemented GIS functionalities in MapViewSVG
Restrictions, ideas for improvement of SVG
File sizes
Supporting spatial queries
Overlapping SVG elements
Initial coordinate system
Zooming and panning
Open structure of data
Supporting different web browsers
Next steps

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.

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:

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:

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-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" />
<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>


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”.

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.


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

Many examples are available on our homepage: (with examples of our customers)