Using GIS data intelligence on the web with Scalable Vector Graphics (SVG)

SVG Open 2005 conference Enschede - The Netherlands

Keywords: svg , web mapping, location based services, wms, svgx, data editing, svgmapmaker, maps

Mr. Dany Bouchard
37 St-Joseph Bd


Dany Bouchard is the president and founder of DBx GEOMATICS inc, a company based in Gatineau specialized in the development of interactive web mapping applications. The mandate of DBx GEOMATICS is to develop cost-effective, web-centric geo-spatial solutions. As a professional in GIS application development, Mr Bouchard has been leading many important and innovative geomatics projects for the last 12 years, with many federal departments, other levels of government and the private sector. Mr Bouchard gained extensive experience in all aspects of the web with a focus on MapInfo Corporation products such as MapXtreme and MapInfo Professional.


In the exiting world of geographic information systems (GIS), desktop mapping has taken a critical role for managing and using spatial information for business. The introduction of this technology allowed companies to integrate spatial data and analysis in areas where location-derived information was simply not present. With a user friendly interface, desktop GIS users can develop applications of great value for business decisions by the click of a mouse. When merged with SVG publishing capabilities, this creates a new generation of fully compatible, standard-based and customizable cartographic solutions. As a suite of innovative software, DBx GEOMATICS svg product line integrated with GIS components can be used to develop sophisticated SVG mapping applications. On the desktop, customers can greatly benefit from the advanced features of SVGMapMaker to quickly use mapping content in SVG from any enterprise data repository. As a dynamic server-side duo, MapXtreme and SVG enable the development of advanced on-line web mapping applications that can feature animations and dynamic data editing. When used with OpenGIS standards such as Web Map Service (WMS), SVG is extremely useful to dynamically create multi-server map applications. Overall, the sophisticated graphic rendering and interactivity of SVG allow for a new generation of XML mapping that share high quality and a very rich set of cartographic styles. This non-proprietary, opened technology leverages the power of shared geo-spatial data and applications.

Table of Contents

     1.1 Canadian Geographic - Canadian Agency for International Development (CIDA) SVG World Map
     1.2 Trading Cube SVG Maps Portal - Import / Export World thematic mapping
     1.3 Keskinada Loppet - Cross Country Ski Event - SVG Animation
     2.1 MapXtreme and svgX
          2.1.1 Creating an SVG Mapping Site with svgX
      svgX component concepts
      Invoquing svgX
      Code example
     2.2 Using svg mapping for Nuclear Emergency Management (E-Map)
     2.3 Using svgX as an OGC Web Map Service (WMS)


MapInfo Professional can be svg-enabled using SVGMapMaker, a product that leverages the graphics quality of SVG to create simple and effective web mapping applications right from this GIS environment. When working with their existing data, customers can create interactive SVG maps and share them across the enterprise or on the Internet. Map generated by SVGMapMaker can easily be enhanced using standard ECMA Script based on business requirements.


Figure 1: SVG Map Creation Workflow

SVGMapMaker is designed to let you work from your own maps, layouts or cartographic legends inside MapInfo Professional. Naturally, the active window you are working with in your MapInfo session can be simply exported to an SVG file. In this process, you have the option of selecting options for your map layers and other settings. SVGMapMaker includes the possibility to animate map content. Map animations can be very useful to illustrate data/spatial changes over time with a very dynamic, high-quality approach. Maps animations are simple to define with standard timing parameters such as begin, end duration, etc. SVGMapMaker includes 7 types of layer animations (Opacity, Color, Scale, Rotation, Motion, Progressive Drawing and Morphing). One map layer in a map window can have more than one type of animation. For example, you could use a motion animation to represent a vehicle driving on a road and, at the same time apply an opacity animation to make the vehicle symbol fade in and out. You could also use SVG as a method to bring your MapInfo documents to your high-end cartographic design software. For example you could generate an SVG map and then finalize the design and editing inside Adobe Illustrator. The later part of this presentation will describe for the participant 3 different customized svg mapping implementations.

1.1 Canadian Geographic - Canadian Agency for International Development (CIDA) SVG World Map


map available online:

Figure 2: SVG World Map

This interactive SVG world map including country statistics, facts, links and dynamic graphs was created in partnership with the Canadian International Development Agency for Canadian Geographics's 75th anniversary. The integrated map tools include custom zooming and panning and advanced labelling options.

1.2 Trading Cube SVG Maps Portal - Import / Export World thematic mapping


Figure 3: Trading Cube application

Using detailed statistical trading data, this solution uses XML and SVG to present a rich client interface with dynamic graphs and themes.

1.3 Keskinada Loppet - Cross Country Ski Event - SVG Animation


Figure 4: Keskinada Loppet - SVG Map

SVGMapMaker was used to create a high-quality animation of the race path for this international cross-country event.


2.1 MapXtreme and svgX

MapXtreme for Windows® is a powerful Internet mapping server for Windows® for the broad deployment of mapping applications. DBx GEOMATICS has developed svgX to enable live scalable vector graphics (svg) outputs and create a much more interactive experience. svgX is a full component with methods and properties to successfully generate svg-based vector mapping from GIS data in real-time. This allows building interactive and intelligent web-mapping applications that use svg to deliver high-quality XML maps on the client. svgX can be used to make impressive on-line cartographic animations or provide on-line map layer editing.


Figure 5: svgX Object Model

Several options are also available as part of the software to take advantage of SVG's advanced graphic capabilities such as filter effects, color gradients, opacity control, hyperlinking, infotips, info tool, animations etc. This dynamic product combination has the ability to publish extremely large mapping datasets, based on existing customer GIS data or enterprise databases. With this structure, it is feasible to quickly get an svg mapping application up and running with maps from the country to the street level for example. During this session, we will show the impact that new technologies like svgX can have on the development of web mapping applications and demonstrate real examples of innovative SVG server applications using industry standards (OpenGIS, etc.) and GIS tools.

2.1.1 Creating an SVG Mapping Site with svgX

This demonstration will show how a GIS developer can SVG-enable existing GIS data and work with svgX in Active Server Pages (ASP) to design an interactive map application. svgX component concepts

The svgX component has been designed to read MapX objects and generate svg maps in the context of a MapXtreme application. The SVGMap object properties, methods and collections allow to control how the svg documents are created. For example, like in MapX, the SVGMap object contains a layer collection to control the settings for all of the layers in the current map. In a typical example, a new map request comes to the MapXtreme server application. The client is requesting a map of a specific area. MapXtreme adjust the map view, exports a map and then sends back to the browser a link the exported image which sits on the web server, in a temporairy directory. With svgX, the same process takes places but instead of exporting a map to an image, a call is made to the svgX component with appropriate settings. Once svgX is invoqued, the properties of the object that control the svg map output can be specified. svgX reads map layers and generates svg document according to the settings of it's properties. Please consider the following example:

SVGMap.SVGExportFile="c:\inetpub\wwwroot\gis\tmp\map.svg" Invoquing svgX

svgX is a component that is designed to be used with a page scope. When the page that uses the component has finished serving the request, the component should be released from memory. One method to invoque the component is to use the command Server.CreateObject

Dim objSVGMap
Set objSVGMap=Server.CreateObject("svgx.svgmap") Code example

The following is full example of a map page that uses svgX with MapXtreme (ASP page). For the purpose of the example, both components (MapX and svgX) have page scope in an Active Server Pages context.

<%'create MapX object and SVGMap Object%>
<object runat="Server" scope="page" id="SVGMap" progid="svgX.SVGMap" ></object>

<%'Set MapX Geoset
Dim MapXcourierObject
Set MapXcourierObject = Server.CreateObject("MapInfo.MapXcourier")
Set MapXOBJ = MapXcourierObject.GetMapXFromNewServer(geosetpath) 

MapXOBJ.SetSize 600,400 'Set the screen size of the MapX object.
SVGMap.Sync MapXOBJ,MapXcourierObject 'Syncronize the SVGMapObject to the MapX object
SVGMap.mode = 1 'Set the SVGMap to Export a file 
SVGMap.SVGExportFile = "c:\inetpub\wwwroot\mydirectory\mysvgmap.svg" 'Select the resulting SVG export filename
SVGMap.selectLayersToExport(1) 'Export all visible layers to SVG
SVGMap.InitiateSVGFile 'Initialtes the SVG output
SVGMap.writeSelectedSVGLayers() 'Exports the layers to SVG
SVGMap.TerminateSVGFile 'Terminates the created SVG File


Embed the created SVG file into your html page. 
Note the width and height which corresponds to the MapX Setsize method
<embed id="mainmap" name="mainmap" src="[relative path to the created map]mysvgmap.svg" width="600" height="400"></embed>

2.2 Using svg mapping for Nuclear Emergency Management (E-Map)

The E-Map mapping system has been developed by the department of Heath Canada for nuclear emergency preparedness and response. This web-based application uses svg to provide users with rich visualisations interfaces and on-line editing capabilities. Based on MapXtreme and svgX, this is a powerful server solution to assist all phases of nuclear emergency response and planning. The use of web standards from the w3c (HTML 4.0, CSS, XML, SVG, etc.) has ensured interoperability with other developments and between partners. The SVG format is used to perform on-line geographic data editing and data visualisation. Using real-time metrorological data and dispersion models, the application can display the location of a plume and emergency protection zones.


Figure 6: svgX - Emergency Protection Zones (EPZ) editing and plume display

Based on radiation readings on the ground, the control center can work with the protection layer in SVG to determine which measure should shoud be applied for the zone.


Figure 7: EPZ data editing form

As this system relies on partnerships in order to enhance its capabilities and to obtain up-to-date environmental and logistical information, an advanced interface for on-line editing was developed in SVG. Partners can log-in and work on their own mapping layers within their browser and eventually share their data with other users of the system.


Figure 8: svgX online SVG data editing

2.3 Using svgX as an OGC Web Map Service (WMS)

The OpenGIS consortium (OGC) has developed a specification on how to call a web map service (WMS). WMS provides three operations protocols (GetCapabilities, GetMap, and GetFeatureInfo) in support of the creation and display of registered and superimposed map-like views of information that come simultaneously from multiple sources that are both remote and heterogeneous. When WMS is used with SVG-enabled map servers, maps become truly integrated in a single interface and layers retain their intelligence. The following implementation will demonstrate the integration of 3 different WMS SVG outputs into a single document with SVG interactivity.


Figure 9: Multi Web Map Service (WMS) with SVG


[SVG Specification]
Scalable Vector Graphics (SVG) 1.1 Specification W3C Recommendation 14 January 2003 :
Open Geospatial Consortium, Inc. (OGC):
[Canadian Geographic Entreprise World Map Project]
Canadian Agency for International Development (CIDA) SVG World Map :
Nuclear Emergency Prepared and Response :
SVGMapMaker for MapInfo Professional :
svgX component for MapXtreme :

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