EDITORIAL
REPORT SVG Open 2011
SPOTS ON Mappetizer
JAVASCRIPT Timer Class
ARTIST'S CORNER Interview: Art Science Factory

SPOTS ON

Mappetizer Extension For ESRI/GIS Software

SVG For Web Mapping Applications
Authors: Ruth Lang, uismedia; Armin Müller, uismedia
Published: November 2011

Since its early days, it appeared clearly that SVG was an interesting medium for web mapping applications. Within this environment we developed Mappetizer [1], an extension for the ESRI GIS software products, which allows the user to export maps from ArcGIS into the SVG format and then publish them on the web or on digital support.

Mappetizer (formerly MapViewSVG) is an out of the box solution. This means the user makes high quality interactive web mapping projects, without the need of any expertise in SVG, browser, and web server technologies. Unlike when developing one's own application, where the developer makes choices according to his particular needs, we have been confronted more often with all those aspects that need to be assessed before making critical choices in terms of compromise between size, quality and performance. These choices may relate for example to tiling, simplifying paths, or even not supporting specific symbology. The requirements on SVG come either from ArcGIS – support of the different symbol types, rendering types, data formats – or from particular objectives, like having specific functionalities and design. In addition, SVG itself imposes some restrictions as well.

Mappetizer was first released in 2002, and since then we have been continuing its development by adding new features, maintenance and redesign, all things which we are now going to cover.

SVG Within HTML

Right from the beginning our solutions have always been proposed in a mixed namespace, SVG and HTML. SVG is used to display the map, the overview, the legend, and the graphs and charts. These SVG elements are embedded within the HTML page. All other tools which are needed within the web mapping applications, like text boxes, drop-down lists, and buttons, are HTML elements.

Mappetizer screen
Countries with the highest energy consumption since 1970

Since the last version we use the open source modular JavaScript library Dojo Toolkit and the Dojo widgets system. Dijit is the Dojo’s UI Library, a widget system layered on top of Dojo. These are prepackaged components of JavaScript code, HTML markup and CSS style declarations that can be used to enrich websites with various interactive features that work across browsers, like menus, toolbars, and title panes. Since the newest version of Mappetizer we use Dojo’s charting library (dojox.charting, also SVG based) for all our charts. Here is an example showing some charts [2]

Supporting Different Web Browsers

When we started to develop our software, SVG files could only be rendered by ASV [3], the Adobe SVG Viewer plug-in, which was available for different browsers, Internet Explorer in particular, and on several platforms. This worked great and still does, but of course it was important that ultimately all the browsers should offer native support of SVG. Thankfully, this is nowadays the case, and what was our wish and conviction, that SVG deserved to get out of its niche and find a broader audience, is now a reality.

All along this process we have had to constantly make major and minor adaptations of our software, striving for full compliance. The ability to see and use our web mapping applications in all the browsers has always been for us a primary objective.

This cross-compatibility also means that some nice features are still not supported as much as we would like, for example SMIL animations are not supported within all browsers, or insufficient support of SVG fonts. As point layers are usually displayed as markers, we would like to use SVG fonts for this. Instead we have to export them as images with the disadvantage that when zooming in you see the rasterization of the images.

To ensure backward compatibility, particularly in respect to older versions of Internet Explorer with the Adobe SVG Viewer Plugin (ASV), we needed to implement different solutions for different browsers (the cursor attribute, non-scaling strokes, etc.).

Handling Large File Sizes

Handling big file sizes had always been an issue because 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 loses its practicability. To overcome this relative disadvantage of SVG files (especially when displaying images), we developed different tools for cutting the layers (raster, line, point, and polygon layer) into several tiles. The specific tiles are then loaded dynamically, via XMLHttpRequest, as soon as they are visible within the map extent.

Tiling Images

Since the newest version of Mappetizer we use the Deep Zoom tool from Microsoft to create these tiles. This tool cuts the image at different zoom levels into different tiles, quite similar to the tiling schemes of Google Maps or Bing Maps. But Deep Zoom also allows overlapping of the tiles. This technique eliminates problems caused by anti-aliasing at tile borders, or by other artifacts that make tile borders visible.

An example [4] which shows the image tiling:

Mappetizer screen
Tiling images

Tiling Vector Data

As it is easy to cut point or line layers into different tiles it is not possible with polygons because the stroke lines would be seen at the tile borders. We solved the problem with implementing also a kind of a pyramid tiling: with a given tile size those polygons which belong to two adjacent tiles are (already) drawn within the next lower tile level (Fig. 1). All those polygons which are inside the tile are drawn when this tile is visible within the map extent (Fig. 2). Therefore polygons which expand the total map (like rivers or roads for example) are loaded right from the beginning (level 0). Of course this tiling philosophy is only of use when the layer does not have to be visible right from the beginning but is loaded when the user zooms in. Also it works best with polygons which are rather compact (administration units, parcels) and do not span the whole map (rivers or roads).

Mappetizer screen
Figure 1: When zooming in polygons which belong to more than one tile
are already drawn (lower zoom levels).
Mappetizer screen
Figure 2: Now the polygons inside the tile are also loaded and visible

You can check out this live example [5].

Symbology

ArcGIS from ESRI 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 and line fills, picture fills, picture lines and picture markers. 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. We talked about this issue at the SVGOpen Conference 2008 in Nuremberg and want to refer to that paper [6].

Conclusion

Since we started with Mappetizer in 2002 the SVG specification has been considerably improved and extended. We have been following these evolutions and many were integrated into Mappetizer all along. Now that SVG has reached maturity and that it is supported by all the major browsers, we think more than ever that it is a great tool for web mapping applications, and we are confident that its already wide distribution will continue to grow.