Introduction: Web GIS - the traditional approach
Rendering maps as tiles in raster image format (PNG or JPEG images) is the way geospatial data are commonly delivered on the Web today. This is done by producing tile images on a server and delivering them to a map client. Such technology is used by many Web map providers and it works well for creating nice-looking basemaps like on OpenStreetMap, Google Maps, Bing Maps, etc.
This is all good for Web mapping, but what about GIS? Normally, during the course of creating a GIS project, you need to modify data, reorder layers, tweak symbology and labels, edit and create features, do geoprocessing, analyses, etc. Results of these operations need to be evident instantly and the traditional method of server tile rendering just doesn’t cut it. Creating the full map tile cache can often take hours, even days, to complete. And if you’ve somehow forgotten to turn on labels for that waterways layer before the caching starts, well, take the rest of the week off.
Also you may need to interact with the data, which is not possible if your data are presented as flat raster images. Some improvements have been made by using map clients with technologies like Flash and Silverlight, but still map tile technology has remained the same, and a third-party plug-in is required to render your map.
Rendering vectors as vectors
As we all know, geospatial vector data consist of three basic types: point, lines and polygons. Additionally, each feature holds a number of data attributes. The downside of traditional mapping technologies is that all this useful vector and attribute information is lost in the process of converting and rendering those points, lines and polygons into a raster tile image.
Rendering vectors as vectors can open up a whole new set of possibilities for GIS on the Web and on mobile devices. Just imagine interacting with your data by hovering, clicking or tapping on them. Imagine rendering a huge number of features with dynamically changing symbology on-the-fly at high speeds and low latency. Imagine having full GIS editing in a browser with topology preserving, snapping and all those capabilities you are used to having in your desktop GIS.
What if we had a solution which could actually render vector data in their natural vector form?
To be honest, vectors can be overlaid on top of raster tiles in many map clients, but current implementations fail in real-world situations when you need to deal with thousands, if not millions, of features. In order to achieve such capabilities, existing mapping engines would require a big change, particularly on the back-end, but also on the front-end.
HTML5 Canvas
In the last couple of years we’ve witnessed incredible innovation and progress in Web browsers. With their huge presence across desktop, mobile and tablet devices, Web browsers have become a crucial component and the platform for many modern applications. A whole new set of capabilities available in modern browsers has been gathered under the term HTML5.
Among many capabilities the HTML5 standard provides, there is one crucial for improving GIS, and that is HTML5 Canvas. Canvas is basically a bitmap (image) which is dynamically generated in a browser. Its vector rendering performance is what makes it so useful for GIS applications.
Vectors as vectors, plus all the complexity of symbology and map rendering, are now moved to the client side (i.e. browsers) so servers need only deliver raw vector and attribute data. This means the map engines can be more effective and responsive. As mentioned before, this approach requires a totally different strategy on the server where the map tiles are actually being produced.
HTML5 Canvas tiled vector map engine
Croatia-based GIS Cloud created and implemented the world's first HTML5 vector mapping engine based on its original tiled vector map engine, which generated vector map tiles in Flash format. The performance it offered was unprecedented. The original system has been adapted for HTML5 Canvas and is now the primary method to deliver all maps at GIS Cloud.
The heart of the engine is a very fast server component created from scratch that quickly and efficiently reads geometry and attribute data and delivers them to the client as an optimized vector map tile. Once on the map client, the vector map technology uses Leaflet — an excellent modern mapping client library made by CloudMade — to visualize the data.
You can check out a few HTML5 maps on the links below to see the engine in action, but also create and see your own data with this easy-to-use GIS in the cloud system. For GIS Cloud, moving to HTML5 vector mapping has been crucial as it opened up a whole new set of GIS features which are yet to be implemented.
A shapefile with almost 6 million line segments: http://www.giscloud.com/map/16594/germany-6000000-features
Parcel polygons: http://www.giscloud.com/map/12584/sarasota-parcels
An insane number of interactive Canvas markers: http://www.giscloud.com/map/16671/a-world-of-a-million-points
For more HTML5 maps check out public maps created by the GIS Cloud community: http://www.giscloud.com/app
Summary: What HTML5 Canvas for GIS brings
- A very slick mapping user experience in browsers on desktops, mobiles and tablets
- Vectors as vectors
- The ability to render millions of features on-the-fly
- Fast rendering; no need for precaching map
- Significantly less tile bandwidth required
- Less storage needed
- Maps that are fully interactive: clickable, hoverable and styled dynamically
- Symbology that is applied entirely on the client, meaning it’s very easy to make map styling changes without needing to reload a layer
- Works out of the box on Web browsers across all platforms that have adopted the HTML5 standard (i.e. desktop, iOS, Android etc.)
- Excellent grounds for bringing true desktop GIS experience into the Web browser
