Saturday, October 24, 2009

Raster map reprojection (warping) with JavaScript and HTML5 Canvas

I wanted to create something nice during the FOSS4G Code Sprint, and I ended up programing a prototype of the client-side raster reprojection implemented with the HTML5 Canvas, JavaScript and Proj4js. It is kind of port of gdalwarp into the web-browser environment.

To try it you need a web browser which supports HTML5, it means the latest version of one of the Firefox, Chrome, Safari or Opera.

Have a look at the demo:



Link: http://examples.maptiler.org/map-reprojection-html5-canvas/

It is just a prove of concept in this moment, but I am sure you will come up with plenty of ideas for practical application... post a comment! ;-)

6 comments:

  1. To optimize the warping,it will be interesting to use web worker (thread in the brother), isn't it ?

    ReplyDelete
  2. Klokan,
    Great work... It was a pleasure sitting next to you while you implemented this raster reprojection! I hope sometime soon you'll be able to integrate that into e.g. OpenLayers. Thanks again and keep up the good work,
    Marc

    ReplyDelete
  3. It works by all means, but how come document type is: HTML 4.01

    ReplyDelete
  4. Hi all, I am now on vacation so don't have much time to improve the prototype.

    Rene-Luc: The web workers will be practical, but they do not have access to the DOM of the page, so some transport of the calculated bitmaps must be implemented for that. Can you have a look at it?

    Selectoid: Pleasure on my side. Thanks for pushing me to play with this ;-). Practical application for OpenLayers/Google Maps API would be an WMS layer/overlay with requests in EPSG:4326 bounds and with client side warping into Spherical Mercator. This way you can correctly display any raster data provided by old versions of ArcIMS and other WMS servers which does not support the Spherical Mercator natively. It will be for sure fast enough, because you can operate on "line blocks" of the bitmap for Mercator. Anyway, first a client who need that must appear, then I will make the stable and professional implementation.

    Anonymous: Doctype fixed to HTML 5.0.

    ReplyDelete
  5. What a great blog!There have a chance that we can have an furthur exchanges and cooperation.I will always pay attention to your blog.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete