Map overlays with WebGL: affine, polynomial, TPS transformations in JavaScript with GLSL

A new approach on how to overlay high-resolution images on top of online slippy maps (such as Google Maps, OpenLayers or Leaflet) has been introduced by Petr Pridal from Klokan Technologies at ETH Zurich (one of the world’s top technical universities) during the conference The Graphical Web 2012 / SVGOpen 2012.

The HTML5 and WebGL technology enables on demand calculation of various overlay transformations (affine, polynomial, TPS) for high resolution zoomable maps or large raster data (such as aerial photos) directly in a web browser - immediately, with instant response for an user interaction, as demonstrated in http://vimeo.com/50144414.

Technically it is an viable and scalable client-side alternative for traditional server-side services such as OpenGIS WMS or WMTS for some specific use cases.

This technology will soon be integrated with the Georeferencer online service - to be available to general public on the high resolution maps published in the David Rumsey map collection or in the British Library as well as other institutions using this service which allows to turn scans into true maps with a few clicks inside of a collaborative online interface.

The warping technology may be integrated with other third-party systems - desktop, server or mobile applications with OpenGL ES 2.0 compatible GPU. Support for transformations between custom map projections is also on our roadmap.

The record of the complete presentation is online.

This technology complements the MapTiler Cluster product, the significantly improved version of the popular open-source GDAL2Tiles utility for generating map tiles suitable for cost effective and scalable TMS and OpenGIS WMTS compatible map publishing from any cloud storage or a traditional Apache+PHP webhosting, practical for Google Maps API mashups and for native mobile applications (iPhone/iPad/Android) utilizing Apple MapKit, RouteMe or OSMDroid.