Use of vector and raster tiles for middle-size Scalable Vector Graphics' mapping applications

SVG Open 2005 conference Enschede - The Netherlands

Keywords: svg , web mapping, tiling, getUrl, parseXML, dynamic loading, svgmapmaker, maps

Mr. Benjamin Campin
GIS / SVG Application developer
DBx GEOMATICS inc.
37 St-Joseph Bd
Gatineau
Quebec
Canada
bc@dbxgeomatics.com

Biography

Benjamin Campin is a GIS / SVG Application Developer at DBx Geomatics inc. M. Campin graduated in 1998 from "Ecole d'Ingénieur en Génie Informatique et Productique" (Engineering, computer science and production management) in Valenciennes University, France. As a software developer and engineer for DBx Geomatics M. Campin works on interactive web mapping applications using ECMA Script and XML. He is actively involved as a member of DBx Geomatics' SVGMapMaker software development team and is affected to the research and development in SVG mapping technology.

Abstract

Table of Contents

1. 1. Background Information
     1.1 SVG Mapping
     1.2 SVGMapMaker
     1.3 Client-Side vs Server-Side SVG's mapping applications
2. Use of tiling
3. The Tiles
4. Creation of the tiles
     4.1 Raster tiles
     4.2 Vector tiles
5. Displaying the tiles
     5.1 Structure
     5.2 Loading or removing tiles
6. Two different implementations
     6.1 Customized interface for the navigation tool
     6.2 Using the User Agent controls to navigate in the SVG map
7. On-line Examples
8. Conclusions and future direction
9. Footnotes
Bibliography

1. 1. Background Information

1.1 SVG Mapping

Mapping represents a perfect application of SVG, because maps are, by nature, vector layered representations of the earth. The SVG grammar allows the same layering concepts that are so crucial to Geographic Information Systems (GIS). Since maps are graphics that depict our environment, there is a great need for maps to be informative and interactive. SVG provides this interaction with very high quality output capability, directly on the web. Because of the complexity of geographic data (projection, coordinate systems, complex objects, etc.), the current SVG specification does not contain all the particularities of a GIS particularities. However, the current specification is sufficient to help the mapping community produce open source interactive maps in SVG format.

1.2 SVGMapMaker

Developed by DBx GEOMATICS, SVGMapMaker is a cost-effective web publishing solution for MapInfo Professional. SVGMapMaker is designed to let you create interactive maps and deploy them very easily. Based on the Scalable Vector Graphics (SVG) open standard from the W3C, SVGMapMaker outputs are text-based, platform independent and non-proprietary. SVGMapMaker is an out-of-the-box solution for large and small enterprises that want to share dynamic maps with a standard-based technology. With SVGMapMaker, maps can easily be linked to back-end business processes such as corporate databases, and other rich sources of real-time information. SVG maps generated can then be used on the Web, in print and even on portable devices while retaining their full quality.

1.3 Client-Side vs Server-Side SVG's mapping applications

There is two approach to consider when building an SVG's mapping application: Server-Side or Client-Side

Server-Side: Usually when the amount of information is too important for the application to run client-side (stand-alone) the Server-Side approach is considered. Because of the nature of the SVG format, the objects could be stored in a DataBase, or generated on the fly from a proprietary GIS format. In most mapping applications, the coordinates of the view is sent to the server, and the server send the required SVG objects to the client. The use of transformation (XSLT) could also be used to generate the SVG from an XML source (GML, etc...) The Server-side choice is usually a more expensive solution because of the cost of webmapping engines, or databases.

In addition, for middle-size SVG's mapping applications, the Server-Side approach approach could be "Overkill".

Client-Side: A Client-Side solution has the advantage to run without a webmapping Server or a Database. Also, the application could be used just by sharing files on a CD or a local machine. However, the SVG viewers have their limitations when it comes to render many SVG elements

This paper will explain how the tiling coupled to dynamic loading could be an alternate solution to a Server-Side approach.

2. Use of tiling

There is a need for tiling when the size of a vector or a raster layer is decreasing the performances of the navigation in the map: loading time too important, navigation not smooth. Excluding high level of graphics, like gradients or filters, the viewer performances seems to decrease when using a svg file of around 1.5MB. The use of tiles is applicable for layers that are not visible when the maps loads, and visible when the user zooms in the svg document.

Figure 1: Illustration A

Figure 2: Illustration B

3. The Tiles

A tile is an svg document which contains a group with the definition of the vector objects or a URI to an image. On this group, the style attribute is defining a clipping-path linked to the rectangle defining the tile.

<g id="PErds1_3" style="clip-path:url(#PErds1_3_tile_clippath)">
[…]
<g/>

As convention name, the name of the group is composed of the name of the layer and the the line + “_” + row of the tile. The same naming convention is used to the name of the file. In this case, The name of the layer is “PErds”; and it is the tile at line 1 row 3. The svg file is : PErds1_3.svg

4. Creation of the tiles

The tool used to generate the map is SVGMapMaker. For a layer that have zoom layering, the user can choose the number of tiles: 2x2, 3x3 to 8x8.

4.1 Raster tiles

Raster tiles could be created with SVGMapMaker, an option can setup the image resolution in dpi, however, the tiles could be created by using any web slicing tool (Adobe Image Ready for example)

4.2 Vector tiles

The vector objects are the basics object in GIS: Symbols, Text, Polylines, Polygones. The creation of the tile is depending on the nature of the object:

• Points : the selection of the objects that are inside a tile, using the coordinates
• Text : selection of the object by using the bounding box of the text
• Polylines : to create the tiles for polylines, the polylines need to be cut by the rectangle of the tile.
• Polygones: if the polygon has no stroke, we can use the same method used for the polyline.

However, usually in web cartography, the polygons have a stroke, and in this case, to prevent from having a stroke line for the polygons that are overlapping 2 tiles, the polygons need to be cut by a rectangle which is a little bigger.

Figure 3: Polygons slicing

5. Displaying the tiles

At the zoom level were the layer need to be visible, the script is calculating which tiles are overlapping with the viewbox, and the corresponding files are dynamically incorporated inside the SVG document.

In this figure, the viewBox is intersecting with the tiles 2_3, 2_4, 3_3, 3_4 the corresponding svg’s will be loaded.

Figure 4: A 6x6 grid of tiling

5.1 Structure

Each layer (group <g> in svg grammar) contains specific attributes If we take the example of a roads network,

<g id="Roads" style="pointer-events:none;visibility:visible;" dbxns:zoomLayer="true" dbxns:zoomMin="0" dbxns:zoomMax="10" dbxns:label="false" dbxns:tiled="true" dbxns:nbTiles="36">

The range of zoom in which the layer is visible are defined by the attributes:

dbxns:zoomMin and dbxns:zoomMax

The Boolean value in the attribute dbxns:tiled tells if the layer is tiled or not. The number of tiles are specified with the attribute dbxns:nbTiles The rectangles representing the tiles and theses rectangles are used as a clipping-path.

<rect id="Roads1_1_tile" style="visibility:hidden" dbxns:tileloaded="false" dbxns:compressed="false" x="0" y="0" width="447" height="435"/>
	<clipPath id="Roads1_1_tile_clippath">
	<use xlink:href="#Roads1_1_tile"/>
	</clipPath>

<rect id="Roads1_2_tile" style="visibility:hidden" dbxns:tileloaded="false" dbxns:compressed="false" x="447" y="0" width="448" height="435"/>
<clipPath id="Roads1_2_tile_clippath">
	<use xlink:href="#Roads1_2_tile"/>
	</clipPath>

[…]
<rect id="Roads6_6_tile" style="visibility:hidden" dbxns:tileloaded="false" dbxns:compressed="false" x="2238" y="2175" width="447" height="435"/>
<clipPath id="Roads6_6_tile_clippath">
<use xlink:href="#Roads6_6_tile"/>
</clipPath>

36 tiles ( or files): Roads1_1.svg, Roads1_2.svg, […] Roads6_6.svg contains the svg definition of the layer Roads

5.2 Loading or removing tiles

At the scale were the layer is to be visible, when the user’s viewbox is intersecting tiles, The function addLayer is loading the svg tile (url), to be inserted into the group (grp):

function addLayer(url, grp)
	{
	getURL(url,getCallbackHandler(grp));
	}
					

function getCallbackHandler(grp)
	{
	var cb = function(urlRequestStatus)
		{
		var string='';
		if (urlRequestStatus.success)
		   {
		   string=urlRequestStatus.content;
			}
		else{return;}
		var docFragment=parseXML(string, document);
		var content = document.getElementById (cb.insertAfter);
		content.appendChild (docFragment);
		}
	cb.insertAfter=grp;
	return cb;
	}
				

If a tile loaded is not needed in the current view, the function removeLayer is called

function removeLayer(id,from) 
	{
	var nodeToRemove = document.getElementById(id);
	var parent=document.getElementById(from);
	parent.removeChild(nodeToRemove);
	}
				

6. Two different implementations

In the two implementations the aim is to dynamically loads the tiles that intersects the user’s viewbox. And also unload those whom are not required. In both cases, at each zoom or pan in the document, the function checkForTiles(evt) is called. If a tile need to be loaded, the function addLayer() is called, and if tile need to be removed, the function removeLayer() is called.

6.1 Customized interface for the navigation tool

The navigation interface of SVGMapmaker is composed of: the main map, the layer control, the overview, the zoom tools.

Figure 5: SVGMapMaker ouput with SVG Interface for navigation

When the user zoom in the map, in the overview a rectangle representing the viewbox of the mainmap is appearing. This rectangle can be moved to allow the user to locate easily in the map. This rectangle is used to check the intersection with the tiles of a layer which needs to be visible at this zoom level. The function checkIntersection() is not implemented in the ASV 3 DOM. The following functions were necessary to check the intersection of the rectangles.

function IntersectOvTile(objinterRectsvg,idtile)Appendix1.html#IntersectOvTile

function intersectrect(rect1,rect2)Appendix1.html#intersectrect

function Rectangle(x,y,w,h) Appendix1.html#Rectangle

function Point(x,y)Appendix1.html#Point

function pointinRectangle(rectobj,checkPoint)Appendix1.html#pointinRectangle

function intersect2segment(point1,point2,point3,point4)Appendix1.html#intersect2segment

6.2 Using the User Agent controls to navigate in the SVG map

It is possible to use the native User Agent control to navigate in the map. When the events onzoom or onscroll are triggered, a function is checking the intersection between the viewbox rectangle and the tiles, to load the appropriated tiles. In Batik 1.6, it is possible to use the implemented function like checkIntersection() to make the intersections. This prevents from using all the previous maths calculation for intersection. In this case we are using:

function IntersectOvTile2(rectoverview, tile)Appendix2.html#IntersectOvTile2

function checkTheIntersection(lesvg, rect, elem)Appendix2.html#checkTheIntersection

function setRect(rect, x, y, w, h)Appendix2.html#setRect

7. On-line Examples

The raster tiling was used to produce one of the Canadian Geographic’s map, “Canada and the World”

http://www.canadiangeographic.com/worldmap/default.asp

Figure 6: Canada and the World

In this SVG application, 4 levels of details were built:

Table 1:

8. Conclusions and future direction

The tiling methods coupled with the dynamic loading could workaround limits of many svg applications on the web. However, the Batik viewer still issue performances speed on dynamic loading, compared to the Adobe SVG Viewer 3. The implementation of methods like checkIntersection() or getIntersectionList() in Viewers allow an easy calculation of the intersection between user’s viewbox and the tiles. Unfortunately, this methods are not implemented in the ASV 3 Limitations for tiled polylines and polygons: The use of interactive behaviour, like changing the color attributes could produce un-expected effects on the polygons and polylines that are overlapping multiples tiles. Also, the MultiImage Extension Tag proposed in the SVG1.2 Specification is an alternate way to load multi-resolution svg’s. The advantage of this methods is that no server is required, the SVG is feeded using a client side technology.

9. Footnotes

SVG : Scalable Vector Graphics

XML : eXtensible Markup Language

XSLT : EXensible Stylesheet Language Transformation

ASV : Adobe SVG Viewer

GML : Geography Markup Language

GIS : Geographic Information System

DOM : Document Object Model

Bibliography

[SVG Specification 1.1]

Scalable Vector Graphics (SVG) 1.1 Specification W3C Recommendation 14 January 2003 "http://www.w3.org/TR/SVG11/"

[SVGMapMaker]

SVGMapMaker for MapInfo Professional : http://www.dbxgeomatics.com/svgmapmaker/

[Batik SVG Toolkit]

http://xml.apache.org/batik/

[SVG Specification 1.2]

Scalable Vector Graphics (SVG) Full 1.2 Specification, W3C Working Draft 13 April 2005

[Carto:net]

http://www.carto.net/

[SVG Mapping for people with visual impairment]

SVG Open 2003: http://www.svgopen.org/2003/papers/svgmappingforpeoplewithvisualimpairments/

[DOM]

Document Object Model: http://www.w3.org/DOM/

[XSLT]

EXtensible Stylesheet Language Transformation: http://www.w3.org/TR/xslt

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.