Window – Mapping Application

A case study of this work can be found in the book “Building Web Applications with SVG” (Microsoft Press).

View as standalone SVG

This mapping application example uses the Polymaps library (customized for full SVG compliance), and Bing tiles. The Window class prototype is extended with specific mapping properties and methods, and the behavior of the transformation tools, including scrollbars, overrides the regular behavior by sending tile requests rather than acting on the contained document's viewport. You define a mapping window through its type property: "map".

A step by step tutorial for this example can be found at dev.opera.


The property contains of a Window instance can get a node or a function. In this case it's a function that invokes the mapMaker prototype method, which initializes the map as described in the Polymaps API. This mapping application can be easily extended with mapping tools through the tools property of the window object during its instantiation or through the addTools() prototype method at a later stage. The ruler tool for measuring distances, the itinerary tool, and the map navigation help tool are implemented by default in a window of type "map". (Skipping some repetitive portions of the menu's code).