Summary - A web browser based mapping client using the OpenLayers mapping API. The demo shows how the map images can be drawn on an HTML5 Canvas allowing 2d graphics to be superimposed on the map images. Demonstrated how this can be used to create an elevation bar chart showing difference in height as the user draws a path over the map. As part of a series of evaluations exploring the potential of HTML5 technologies we looked at the HTML5 Canvas 2d Graphics API [8] tried to see how this could be used to augment the user experience of a mobile mapping application. HTML5 Canvas provides for the first time a standard way for web developers to access the image in an HTML page at the pixel level. This means that the developer can draw arbitrary graphics on top of the image, for example, tracing a route on a map ( see screenshot below). While this is potentially useful way to annotate online maps in a browser agnostic way, we think the real potential for HTML5 Canvas is to get inside the image itself enabling us to extract information from it and use that information to create our own graphics on the map. We demonstrated (see blog) one application, where we extracted pixel data from the base map layer ( greyscale showing high regions as white and low regions as black) and used the extracted height data to draw an elevation graph on the overlayed Ordnance Survey map layer. Taking this one step further we added a Geology 50k layer, and showed the elevation bar using the same colour as the underlying rock type, providing a 2d geology cross section.
Other possible uses include:
Feature selection: redrawing map with features such as buildings switched on/off similar to Digimap ROAM. Advantage of using Canvas to do this is that all feature extraction is done on mobile device meaning no connection to server is required to redraw map. Also, feature selection will work on raster map products ( such as OS 50k ) as well as vector database products ( such as Mastermap).
Reduced Map Legend: Image processing techniques can be used to perform a statistical analysis of the map. This analysis could be used to show a reduced map legend with just the most prominent symbols displayed in the limited space available on the mobile device rather than a full map legend showing dozens of symbols that are not relevant to the map being displayed. Again it should be possible to make this work offline as the information about currently visible map items are extracted from the image itself (which can be cached ) rather than from online access to a spatial database.
Voice summary: Image processing techniques can be used to perform a statistical analysis of the map so that a spoken summary of the area can be constructed. This has potential use for sight impaired users or even to overcome the persisting issue of sun glare or rain conditions that have been shown to hamper map use in the field.
To achieve information extraction from an online map using HTML5 Canvas we needed to solve two problems. The first was to integrate HTML5 Canvas with the Open Layers Mapping API. We found a method for doing this integration using the AJAX JQuery library [9] to dynamically replace the downloaded image with an HMTL5 Canvas element. While there is still a bit of work to perfect this technique the evaluation did demonstrate that it is a viable solution. This again was a very popular post on the blog with 765 views in 3 months suggesting others are interested in exploiting this technique.
Elevation demo: The terrain model provides a base layer where white is high and black is low. Extracting the pixel colour using HTML5 Canvas we can get an approximation of terrain height at a particular point on the map.
Elevation demo: drawing a line on a map using HTML5 Canvas. At each point on the line, the height is extracted from the base terrain layer (above) and plotted on the bar chart.
