Interactive SVG mapping with MapInfo location-based intelligence

SVG OPEN Conference July 2003

Keywords: svg mapping, gis, svg, maps, mapinfo, svgmapmaker

Bouchard Dany, Mr
President
DBx GEOMATICS
Hull
Quebec
Canada
db@dbxgeomatics.com
http://www.dbxgeomatics.com

Biography

Dany Bouchard is the president and founder of DBx GEOMATICS inc, a company based in Hull 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 10 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.

The principal professional interest of Mr Bouchard is in new web technologies applied to cartography and Geographic Information Systems (GIS). For the past 3 years, DBx GEOMATICS has been developing solutions and products that make full use of emerging web standards like Scalable Vector Graphics (SVG) and eXtensible Markup Language (XML). Since 2001, the company has released an innovative mapping product called SVGMapMaker plus an SVG Map gallery and live demos. Since then, Adobe Systems Incorporated has been featuring www.dbxgeomatics.com as the SVG spotlight site, right on the main page of the SVG section of adobe.com. Mr Bouchard is committed to use this technology to develop even higher quality, interactive mapping applications and products.


Abstract


This presentation will describe technical implementations of both desktop and server-based SVG mapping solutions using MapInfo and DBx GEOMATICS products. On the desktop, we will demonstrate how users can greatly benefit from a rich repository of cartographic styles and advanced functionality to create high quality, dynamic SVG map content. Server-side turn-key SVG applications will be introduced in the second part of the session with examples of on-line map layer editing functionality developed for Environment Canada and the Ministry of Transports (Québec).


Table of Contents


1. FROM THE DESKTOP TO SVG…
     1.1 SVGMapMaker features and interfaces
     1.2 Creating geographic analysis reports with SVG Direction of official languages - Treasury Board of Canada Secretariat
     1.3 Using SVG for sharing wireless network planning data (Telecommunications)
2. SERVER-SIDE SVG WEB MAPPING...
     2.1 Web mapping with svgX and MapXtreme
         2.1.1 svgX Samples
         2.1.2 Programming with svgX
     2.2 SVG for the management of environmental emergencies (E-Map, Environment Canada)
     2.3 SVG for the management of transportation data (Transport Québec)
3. Conclusion
Acknowledgements
Bibliography

1. FROM THE DESKTOP TO SVG…

1.1 SVGMapMaker features and interfaces

SVGMapMaker outputs are 100% standard-based, featuring a rich set of cartographic styles and advanced options for map rendering. The software allows users to add interactivity options to their maps.

End-users can add info tool, info-tips, hyperlinks, and color rollover functionality directly from the MapInfo interface. The software also allows applying several styles to map layers such as drop shadows, color gradients, textures and opacity settings.

As SVG, all generated documents are fully scriptable and contain the layer structure, optimized styles and attributes of the data, as it is used in the desktop GIS.

svgmapmaker-main-dialog.png

Figure 1: SVGMapMaker Main Dialog

The standard mapping interface created by SVGMapMaker is 100% SVG with customized interaction such as zooming tools, layer control, overview and info tool.

svgmapmaker-svginterface.png

View this example as SVG: http://www.dbxgeomatics.com/papers/west_usa.htm

Figure 2: SVG Mapping Interface

SVGMapMaker supports polyline labelling with text on a path, the embedding of cartographic fonts and the linking to external SVG custom symbol files. In addition, an API can be used to generate maps in batch mode and leverage all of the functionality of the GIS environment.

svgmm-batch-drilldown-mapping.png

Figure 3: SVG Drill down batch

1.2 Creating geographic analysis reports with SVG Direction of official languages - Treasury Board of Canada Secretariat

The direction of official languages of the Treasury Board of Canada Secretariat is using SVG maps to integrate mapping and automate the creation of departmental forms and reports. By working within the MapInfo GIS, the application can perform demographic analysis with quality graphic reporting in Scalable Vector Graphics.

tbs-service-area-sample.png

View this example as SVG: http://www.dbxgeomatics.com/papers/rcm_48_11814_R.HTML

Figure 4: Sample output report from TBS Application

1.3 Using SVG for sharing wireless network planning data (Telecommunications)

By nature, wireless telecommunication network planning requires sophisticated software so that RF engineers can effectively plan how the signal will behave in reality. The data required to conduct the network planning analysis is in the range of gigabytes of data, a good mix of both vector and raster-based spatial data (Grids). The challenge for the engineering department is to be able to share this information with the rest of the organisation (management, customer service, etc.), ideally via a simple web interface. By allowing a mixed environment of vector / raster content, high compression and quality image compositing, SVG is a great solution to share and view this crucial data.

telecom-sharing-network-planning.png

View this example as SVG http://www.dbxgeomatics.com/papers/site_0_88.htm

Figure 5: Wireless Network SVG Map Sample – Field Strength

2. SERVER-SIDE SVG WEB MAPPING...

2.1 Web mapping with svgX and MapXtreme

svgx-architecture.png

Figure 6: svgX Architecture

As a mapping request is coming to the web server, svgX is reading the GIS data and is rendering svg in real-time. The svgX object is an easy to use model with properties (map object, layer collection) and methods to control the server output.

2.1.1 svgX Samples

svgx-demo-europe.png

Figure 7: Interactive map of Europe

svgx-demo-forest-fire.png

Figure 8: Dynamic forest fire animation

2.1.2 Programming with svgX

For the client-side, svgX also includes a standard set of ECMA scripts to control the navigation (zoom-in, zoom-out, recenter, info, ruler, etc.) as well as map editing functions.

The geographic data editing allows adding new objects (points, lines, polylines, polygons, and text), changing existing objects (reshape, styles, etc.), defining or editing their actual data attributes.

2.2 SVG for the management of environmental emergencies (E-Map, Environment Canada)

Environment Canada is working with its partners in the Atlantic Region to fulfill the mandate of protecting and restoring natural environments. For environmental emergencies, their role is to provide a strong, coordinated framework for all phases of emergency management (for example, in case of a large oil spill).

The Regional Environmental Emergencies Team (REET) planning role is to exchange scientific and technical information between members, while developing spill response techniques. In the event of an emergency, the REET team needs to define the priorities for environmental protection and treatment through scientific advices.

The E-Map Web mapping solution framework was created to allow an easy sharing and access to environmental geographic information to make partners operations more efficient. Based on MapXtreme and svgX, this is a powerful server solution to assist all phases of 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 geographically define the area to report (with tools) and to perform on-line geographic data editing.

e-map-map-interface.png

Figure 9: E-Map main interface

e-map-map-report.png

Figure 10: E-Map report definition (SVG)

svgx-editing-interface.png

Figure 11: E-Map SVG On-Line geographic data editing

e-map-svg-styles.png

Figure 12: E-Map SVG style dialogs

2.3 SVG for the management of transportation data (Transport Québec)

Québec’s “Ministère des Transports” develops policies on transportation systems, proposes them to the government, oversees their application, and coordinates their implementation. More specifically, the department plans, develops, and carries out work to improve, repair, and maintain the road network and other transportation infrastructures under its responsibility.

One requirement as part the ministry’s mandate is to keep track of all road-related projects, as well as a repository of survey plans (acquisitions, etc.). This results into an important amount of geo-spatial data, condensed along road axes.

The development of a web-based mapping system to display and register this information helps the department share this information internally. The use of SVG provides a mechanism to display complex overlapping plans efficiently while allowing on-line data editing for reference plans.

svgx-mtq-interface.png

Figure 13: MTQ SVG Map Navigator Interface

svgx-mtq-plan-display.png

Figure 14: Interactive display of complex overlapping rectangles using SVG

svgx-mtq-georeference.png

Figure 15: Georeferencing plans using SVG

3. Conclusion

As a suite of innovative software solutions, DBx GEOMATICS svg product line integrated with MapInfo 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 svgX enable the development of advanced on-line web mapping applications that can feature animations and data editing.

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 text-based technology leverages the power of shared geo-spatial data and applications.

Acknowledgements

The author is grateful to all of DBx GEOMATICS development team, in particular Mr Denis Lalonde, Benjamin Campin and Jacques Gélinas for their contribution in building these SVG solutions. The author would also like to thank all of the individuals worldwide that are truly devoted to the SVG standard and its implementations.

Bibliography

[SVGMapMaker for MapInfo Professional ]
DBx GEOMATICS web site http://www.dbxgeomatics.com/svgmapmaker.asp?language=EN
[SVG Technology Preview]
DBx GEOMATICS web site http://www.dbxgeomatics.com/svg.asp?language=EN
[SVG News]
web site http://www.w3.org/Graphics/SVG/
[CSS Homepage]
web site http://www.w3.org/Style/CSS/
[CSS Level 2 Specification]
web site http://www.w3.org/TR/REC-CSS2/
[XML Homepage]
web site http://www.w3.org/XML/
[XML Specification]
web site http://www.w3.org/TR/REC-xml
[Document Object (DOM) Model Homepage]
web site http://www.w3.org/DOM/
[Document Object Level 1 Specification]
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/
[SVG Unleashed]
A. Watt, C. Wenz, T. Hauser, D. Ayers, K. Lindsey, R. George, C. Lilley. Sams Publishing, Sept 2002
[SVG Essentials]
J. D. Eisenberg, O'Reilly, Feb 2002
[SVG Specification]
Scalable Vector Graphics (SVG) 1.1 Specification W3C Recommendation 14 January 2003 http://www.w3.org/TR/SVG11/

XHTML rendition created by gcapaper Web Publisher v2.0, © 2001-3 Schema Software Inc.