Web-based Vector Terrain Exploration

Dr John Whelan

John is a Lecturer in the School of Arts and New Media at The University of Hull, Scarborugh Campus in the UK. John’s primary interests are computer (web) graphics (specifically visualization), cutting-edge web application interfaces to wide ranging content and mobile / location-based applications. John is currently a director of Scarborough’s Woodend Creative Workspace, is collaborating on an Arts Council project mapping Scarborough’s cultural heritage and is developing a multi-format publishing platform for the University of Hull. John plans to continue investigating novel uses of technology to assist cultural discovery and exploration and to produce effective human-centred designs for the visual communication of information.


This paper presents a platform in progress that is being developed at the University of Hull, UK. The platform is looking to bring high quality cartographic relief depiction to the familiar form of a web-mapping API. A discussion of terrain depiction is presented and a prototype architecture is described. A range of visualization styles illustrate how SVG can be used to provide multi-scale, cartographc depictions of terrain. These are then briefly reflected on along with the architecture and future work outlined.

Table of Contents

1. Introduction
2. Styles of Terrain Depiction
2.1. Cartographic Terrain Depiction
3. Prototype Architecture
3.1 Foundation Architecture
3.2 Data Architecture
3.3 Viewport positioning
3.4 Projection
4. Visualization Styles
4.1 Projected Profiles
4.2 Formulated Silhouettes
4.3 Introduction of mass through depth shading
4.4 Hypsometry
4.5 Slope Shading
4.6 Multi-scale browsing
5. Reflection on Visualizations
6. Conclusion and Future Work
7. Acknowledgements

1. Introduction

The interactive exploration of geographical terrain over the Internet has been predominately based around the multi-scale streaming of 3D textured geometry ( [CartoBof], [Google Earth]) or tiled serving of 2D raster images ( [Open Layers], [Google Maps] [OpenSpace]), however, there has been little variation in the depiction of terrain or the use of vector images as a means of exploration. Meanwhile, the cartographic community continues to develop new automated approaches to manual relief depiction methods ( [ICA], [IOC]) and with previously license-bound datasets ( [OpenData]) being made open, numerous web applications are coming to market ( [UKMapApp]).

With the development of on-line mapping services, graphical exploration of terrain has moved from being a research tool for professionals to being an add-on service to many web interfaces. Whether this is in 2D or 3D, the result is primarily as an interface layer, or spaital context, and the intent is not the singular aim of relief depiction, whether for communication or aesthetic purposes.

This paper explores an architecture for high-resolution rendering of vector data for both informative and aesthetic purposes. It is not the aim to provide real-time interaction with the end product, but for users to interactively specify a viewpoint and direction, and have the ability to output high-quality products for viewing on screen or printing.

The following sections briefly describe terrain depiction methods, document the prototype architecture, present current results and set out the next stages of platform development.

2. Styles of terrain depiction

The visual depiction of the natural landscape serves a number of purposes, ranging from:

  • The simulation of reality - tromp l oeil, photorealism (both manual and digital) and the use of remote sensed images

  • Artistic - For purely aesthetic purposes and to evoke emotion

  • Cartographic - for actuate communication/study of the surface of the earth

Throughout these themes many parameters from the real landscape are turned into visual cues. Some with a view to convincing the observer that they are viewing reality, some loosely suggesting the form of the terrain, allowing the mind to engage in projecting an internal representation and some using abstract visual coding of surface parameters, designed for maximum information communication.

Fundamentally, mass (shading) and line are being used to give us visual data for our cognitive processing to derive information. Whilst the architecture presented in this paper could be utilised to address a number of depiction approaches, the styles explored focus primarily on communicating the form of the terrain surface topology, in the spirit of cartographic depiction.

Cartographers have devised many techniques for creating visual representations of the surface of the earth and these have often been constrained by media technologies of their time. The following list names common traditional cartographic methods of depicting relief. These are drawn from classic texts such as Lobeck [Lobeck], Monkhouse and Wilkinson [MonWilk], Bryant and Hughes [BrtHugh] and Raisz [Raisz], but for a thorough description, reference should be paid to Imhof [Imhof].

  • Spot Height

  • Contours

  • Inclined Contours

  • Hypsometric tinting

  • Hachure

  • Hill Shading

  • Cliff and rock drawing

  • Physiographic

  • Morphological

  • Projected Profiles

  • Slope

  • Intervisibility

  • Landscape sketches and block diagrams

Whilst the above lists traditional methods, the posibilities offered through digital cartography and computer graphics has spured the exploration of many novel automated solutions such as P-Stroke Sketching [Visvalingam & Dowson 1998], and the numerous techniques reported by the IOC [IOC].

The styles explored in this paper are Projected Profiles, Hypsometric tinting, hill/slope shading and some structuring elements from landscape sketches and block diagrams These styles are detailed in Section 4.

Building on the research presented in Visvalingam and Dowson (1998) [Visvalingam & Dowson 1998] and the work of Whelan and Visvalingam (2003) [Whelan & Visvalingam 2003] an architecture which delivered SVG sketches of landscapes was described at SVG Open 2005 [Whelan 2005].

The architecture used Java Servlets and Apache Batik to respond to a web-client specified viewing angle and to deliver a set of vectors to be rendered in the browser. The architecture held only one tile of elevation data (20km by 20km) on the server and had a limited range of visualization styles.

In 2009 and 2010 two student projects at the University of Hull ([Katsavrias 2009] [Wang 2010]) linked map API’s to elevation datasets. Both projects focused on 2D raster images and X3D.

The former used Google Maps and 1:10000 licence-bound Ordnance Survey data and offered no multi-scale browsing. The latter capitalised on the opening up of UK government data and linked to Ordnance Survey 1:50000 elevation data. This data-set, part of the Open Data Initiative, lead in the UK by Prof. Nigel Shadbolt and Sir Tim Berners Lee of the University of Southampton, is one element of a number of high quality cartographic data-sets released for open use.

Unfortunately for Wang, the 1:10000 elevation data was still subject to licensing constraints, however, multi-scale browsing was offered for small scale zoom levels. At the time of writing, the 1:10000 data is still a closed resource.

The following sections document the basic data architecture developed by Katsavrias and Wang and then describe the current work to bring flexible SVG rendering to the platform.

The rendering system used in this architecture is based upon that presented in [Visvalingam & Dowson 1998] and [Whelan & Visvalingam 2003].

The approach renders cross-sectional profiles, orthogonal to the line of sight, beginning with the rear profile and moving through the selected grid of elevations.

Several parameters are required to create a grid of projected heights from which relief depictions can be produced. These parameters are as follows:

  • Rotation angle of grid - to orient viewing direction

  • Horizontal point separation - scale of data in meters

  • Vertical exaggeration - to be used dependent on nature of terrain and viewing scale

  • Vertical profile separation - to bring occluded areas of terrain into view and offer a bird’s eye view on the terrain.

No linear perspective is applied. This with a view to maintain a measurable coordinate system across the plot.

Through applying the projection, a new grid of elevations is produced from which profiles can be extracted as SVG primitives and sent to the web-client to be rendered. Figure 1 shows the interface with a rendered set of profile lines as SVG polygons. A solid white fill is applied to remove any hidden areas that would be visible. The image in the upper right is from the implementation by Katsavrias [Katsavrias 2009] and represents a normalised mapping of the total range of heights present, applied to a ramp of colour intensity. This does not utilise SVG and is created using phpGD.

The next section describes and illustrates a number of the depictions employed using the base scale data. This is followed by examples of the multi-scale data query.

Formulated Silhouettes were described by Whelan (2001) [Whelan 2001] and Whelan and Visvalingam (2003) [Whelan & Visvalingam 2003]. They are a combination of occluding contours and areas where cartographers would draw silhouette-like lines. Figure 3 shows these important view-depended visual cues for the study area. Currently these vectors are in their un-chained form and are drawn as a single, two-point line segments. Chaining into connected vectors would reduce unwanted visual artefacts. Figure 4 shows these lines as a layer over the projected profile plot.

A Z-buffer, or shading surfaces with respect to their distance from the projection plane, can be used to drive filters to detect image-based edges as described at SVG Open 2005 in [Whelan 2005]. However, depth shading can be equally as effective as a rendered product. Figure 5 shows a depth shaded plot, with distant surfaces depicted lighter than near ones. This gradation was inspired by the extremely effective mountain panoramas in Baedekers Switzerland (1893) [Baedek].

The image, whilst communicative of surface features, offers a pleasing depiction of the area. Layering with profile lines in Figure 7 and Formulated Silhouettes in Figure 8 offers a balance between mass and line.

Another exploration of mass was carried out by introducing a hypsometric tinted layer. To achieve this individual polygons were created for each projected height point, this was need to allow for individual colour assignment to each surface point. This was done by distributing colour intensity over the height range. Figure 9 shows the hypsometric shaded plot.

This plot illustrates the high peaks of the mountains and flat, lake-filled glacial valleys. It does not suffer in obscuring the foreground as in the depth shaded plots.

Figure 10 introduces a gridline over the hypsometry to balance the mass and line and Figure 11 introduces the sparse set of Formulated Silhouettes to help structure the scene.

Slope shading is a popular way of using mass to communicate the surface orientation of relief. Whether it is directional or assuming a top down light to avoid shadow and make the shaded surface a direct function of slope magnitude, it can be a very effect way of conveying form. Figure 12 shows a slope-shaded rendition of the study area. This visualization is a distribution of colour values between slope values of zero, being the lightest, to a defined maximum. Slope is defined as the average of the gradients parallel and orthogonal to the line of sight for each height point. No interpolation or smoothing has been applied.

In the plot, breaks of slope are defined well, however depth contrast is poor. The addition of the formulated silhouettes in Figure 13 greatly improves this visual cue, and in Figure 14, the definition of slope is changed to be driven only by gradients orthogonal to the line of sight.

One interesting addition could be the application of a light, Gaussian blur filter on the SVG renderings of mass to achieve a re-sampling of the browsers rendered image at a higher resolution.

One of the assumed user features of any web map is the ability to move between scales of data and to zoom and pan without a change in the user experience. The following plots utilise the visualization style used in Figure 7 to demonstrate the multi-scale approach of the application architecture. They illustrate an area in the north east of England featuring chalk uplands, tabular, sandstone hills and extensive aluvial flat-lands (and the location University of Hull, Scarborough Campus). Figure 15 is the original 1:50000 data and represents a 30km by 15km area. The plot in Figure 16, although the same dimensions of points (600 by 300) is taken from the derived database tables which are higher up in the pyramidal data model. The height approximation when creating these tables is a very simplistic n’th point selection. Figure 16 covers a 120km by 55km area. Figure 17 is at the API’s zoom level 3, this is a very large area (480km by 240km), yet surface features are surprisingly well retained by the visualisation style.

Within the range of plots shown in this paper there are 3 main rendering tasks that produce SVG primitives:

  • Cross sections as filled polygons for each row of the selected grid

  • Locations that contribute to Formulated Silhouettes as short un-connected line segments

  • Individual coloured bars for hypsometry and slope shading using filled polygons for each point in the grid

The first two tasks produce a set of vectors approximately 3 - 4 MB, where as the shading approach can be up to 24 MB. The Formulated Silhouettes on their own are approximately 1 - 1.5 MB (terrain dependent) These outputs are not optimized, contain redundant styling and compression of SVG was not considered in this iteration of the prototype. Whilst effective, the shaded approach is not very practical and the argument for using SVG to retain such a set of nodes needs to be considered.

The vectors from the other plots however, offer a high resolution rendering of the terrain that conveys form, in a static plot, to good effect. This can be seen in Figure 18 and 19 where a comparison with Google Earth is presented. Although these figures offer a slightly unfair comparison, given that Google Earth lacks certain-shape reviling visual cues, it was the aim of this paper to investigate alternatives to the common terrain rendering platforms on the web. The viewing parameters were matched as well as could be, with the same vertical exageration being applied, but the use of perspective in Google Earth hampered perfect alignment. The figures are presented for visual comparison, but a feature-by-feature analysis is not appropriate here.

Figure 18. Comparison of Lake District Study Area and Google Earth

Contains Ordnance Survey data © Crown copyright and database right 2011

Contains Google Earth data © Google

file of the figure
file of the figure

Figure 19. Comparison of Scarborough Study Area and Google Earth

Contains Ordnance Survey data © Crown copyright and database right 2011

Contains Google Earth data © Google

The small scale plots in Figure 16 and 17 achieved the depiction of surface features to good effect and they facilitate the multi-scale approach that is needed to browse large areas of terrain. The simplistic method of deriving the lower resolution tiles is effective, but further investigations of other approaches need to be carried out. The line-work of the Formulated Silhouettes delineate some interlocking features well and the mass of the projected profiles gives them a shaded backdrop to bed into. Some areas are particularly successful and are beginging to resemble elements of the physiographic mapping of Raisz [Raisz]

From the visualization styles presented, those with fewer visual form cues are the Formulated Silhouettes (Figure 3) and the z-buffer (Figure 5). These renderingd promote perceptual engagement and call for the viewer to actively project elemnts of form using their visual perception.

Further analysis on the style of output is to be carried out in a perceptual study beyond the scope of this paper.

6. Future Work and Conclusion

One specific implementation task is to develop the user interface for the system. This interface would be both back to the server to change view parameters and class of visualization, but also direct manipulation of the local SVG to allow for the zooming and panning of the resultant plot. Providing the options to restyle the groups of primitives would also be useful. This exercise would also give some input to the discussion of server-side rendering verses client-side SVG rendering.

Other key tasks are to:

Conceptually, the trade off of having the SVG on the client, or rasterizing the resultant plots using server side rendering needs to be questioned. The aim was to develop the system for client-based vector rendering this has been achieved, it now needs to be subject to testing and questioning to comment on the viability and usefulness of this approach.

In conclusion, this paper has presented an implemented architecture for linking high-resolution vector plots of terrain with a familiar web mapping API. A range of visualization styles have been presented and described. Comparison was made with other web-based terrain visualization services and a brief reflection on the architecture presented.

7. Acknowledgements

The Author would like to thank both Stammatios Katsavrias and Guo Wang for their development work on the data architecture and query framework and Darren Stephens for technical support. Also, Dr. Mahes Visavalingam and the past members of the Cartographic Information Systems Research group at the University of Hull, whose concepts and aims this platform continues to develop.


[CartoBof] Rhyne, T., 2007, available at http://www.siggraph.org/~rhyne/carto/

[Google Earth] Google, 2011, Google Earth, available at http://www.google.co.uk/intl/en_uk/earth/index.html

[Open Layers] OSGeo, 2011, OpenLayers: Free Maps for the Web, available at http://openlayers.org/

[Google Maps] Google, 2011, Google Maps, available at http://maps.google.co.uk/

[OpenSpace] Ordnance Survey UK, 2011, OS Open Space, available at http://maps.google.co.uk/

[ICA] International Cartographic Association, available at http://icaci.org/

[IOC] Institute of Cartography, ETH, Zurich, available at http://www.karto.ethz.ch/about/index_EN

[OpenData] Ordnance Survey UK, OS Open Data, available at http://www.ordnancesurvey.co.uk/oswebsite/products/os-opendata.html

[UKMapApp] Endecott, P., 2011, available at http://ukmapapp.com/index.html

[Lobeck] Lobeck A. K., 1939, Geomorphology: An Introduction to the Study of Landscapes, New York and London, McGraw-Hill Book Company

[MonWilk] Monkhouse F. J. ,Wilkinson H. R., 1966, Maps and Diagrams, London, Methuen

[BrtHugh] Seymour Bryant, V. & Hughes T. H., Map Work, Oxford Press, 1927

[Raisz] Raisz, E. The Physiographical Method of Representing Scenery on Maps, Geographical Review, vol. 21 (New York, 1931)

[Imhof] Imhof, E. (H. J. Steward (Ed)), 1982, Cartographic Relief Representation, Walter de Gruyter

[Visvalingam & Dowson 1998] Visvalingam M., Dowson K., 1998, Algorithms for Sketching Surfaces, Computers and Graphics, 22(2-3), pp. 269 - 280

[Whelan & Visvalingam 2003] Whelan J. C. & Visvalingam M., 2003, Formulated silhouettes for sketching terrain, In Theory and Practice of Computer Graphics 2003, 90-96.

[Whelan 2005] Whelan J., 2005, SVG For Teaching 2D Graphics Standards, in Proceedings of SVG Open 2005, Enschede, available at http://www.svgopen.org/2005/papers/TeachingGraphicsStandards/index.html

[Katsavrias 2009] Katsavrias S., 2009, An Alternative approach on web mapping based on terrain presentations, unpublished MSc thesis, The University of Hull

[Wang 2010] Wang G., 2010, Web-based Terrain Visualization, unpublished MSc thesis, The University of Hull

[Whelan 2001] Whelan J. C., 2001, Beyond Factual to Formulated Silhouettes, unpublished PhD thesis, The University of Hull

[Baedek] Baedeker K. 1893, Switzerland, Dulau and Co.