Will HTML5 Revolutionise Raster Web GIS?¶
- date:
2011-02-18 13:09
- author:
admin
- category:
javascript, OpenLayers, opinion, web development
- tags:
html5, raster
- slug:
will-html5-revolutionise-raster-web-gis
- status:
published
Or perhaps that should be rephrased start browser-based raster
GIS?
GIS data is split into two base types ?” vector data ?” geometric shapes, usually further split into points, lines, and polygons, and raster data ?” cell-based or “pixelated” data.
Graphics on the web mirror this divide. On the vector side SVG ?” scalable vector graphics, is used in many browsers to display geometric shapes. On the raster side “dumb” images come in many well known formats such as bitmaps, GIFs, PNGs, and JPEGs.
Vector geometries are easily manipulated after drawing as they have an abstract model to work with (the SVG, or KML document), which the browser can then convert to the DOM. As an example OpenLayers includes two vector renderers ?” one for SVG (see source code), one for VML (used by the ever-unique IE), and since the start of this year a new canvas renderer.
The canvas renderer is used to draw features to the new canvas element which is part of the HTML5 specification. This allows access to images loaded into the canvas through new programming interfaces such as the Canvas 2D Context API. It is this part of the HTML5 specification that could change the way we work with raster data on the web.
The power for raster operations will be based on the **compositing functions**. These correspond with various map algebra functions that have been used by desktop GIS systems for years. To take a few examples the HTML5 transforms include the following:
XOR - Shapes are made transparent where both overlap and drawn normal everywhere else.
LIGHTER - Where both shapes overlap the color is determined by adding color values.
The clip() function can be used to create masking areas, and to speed up the processing.
These three basic functions cover many of the key uses of raster GIS. By adding or subtracting the colour values in a raster cell, you are in effect changing the raster data itself.
For example it would be possible for example to multiply a soil type raster dataset, with a rainfall raster dataset to produce a third raster dataset giving indications of crop suitability. Or as this is in the browser a user could choose their own weightings to instantly multiple different land use classes to producing a new map.
It’s Already Here…¶
For excellent examples of these types of pixel manipulations go to Beej’s Bit Bucket and check out his blue goat, scratcher demo, and his challenge to create Sobel edge detection using canvas.
Matthew Trost has created a brilliant path finding demo using canvas and JavaScript. Whilst the target audience for is game developers, it inadvertently implements several of the key functions of raster-based GIS.
It will be coming to OpenLayers soon ?” the evaluation of HTML5 and OpenLayers is presented here. There is a demo showing layers in a canvas element in krisgeus’s sandbox. And CampToCamp have an impressive demo to dynamically display and graph elevation values.
Challenges and Challengers
¶
Currently it is easier to run raster processing on a server, and return the results to a user. With an increase in cloud-based processing responses times will get even shorter, so developers will have to decide which approach will be easier to maintain and implement, whilst meeting users’ expectations and requirements.
In an ideal world, processing could be balanced between the client and server to bring about the fastest results possible, however coding for two different architectures likely rules this out for all but high traffic sites.
As pointed out here “performance can be a challenge since bitmap operations are very processing expensive, especially at high resolutions.” A major challenge of creating web sites is designing for the lowest common denominator ?” what happens if a user connects to a site using IE6 on a 15 year-old desktop?
Whether or not it will be more practical to do raster analysis in the browser rather than on the server is up for debate. But home computers aren’t going to get slower, and as HTML5 becomes the norm rather than the exception raster GIS on the web becomes a very interesting terrain.
- orphan:
Comments¶
1. Ro **
This script should be used for Lat/Lon distances.
It works great IMO
Reply2. Creating a Geodesic Circle in OpenLayers at geographika **
[…] with an on the ground radius of 6km. A huge margin of error over a very short distance (see a previous post on the same […]
ReplyAdd Comment