Visualizing after and before photos in more elegant way

I am back after a long hiatus! I have been busy as hell with my works during last couple of months. I have been working with lots of new things that I had never worked before. So I had to read lots of books to help me out.

In this blog I would like to introduce you OpenLayers and will show how it can be use to show before and after photos comparison that we see often in internet.

I am into geoinformatics, therefore I would show you how to efficiently view before and after photo of a place in Japan which was recently struck by a massive earthquake triggering a gigantic tsunami killing thousands of people. The photos were downloaded from the website Uni Spider which aims at providing universal access to all types of space based information and services relevant to disaster management.

Most of the time, people just put before and after photos side by side in a static way. But this technique has a tendency to underestimate the severity of change occurred because picture resolution is often downgraded to display in a webpage and there is no way to zoom in a particular area and see the change.

I was surprised to such rudimentary methods are still adopted my many pioneer goeinformatics related institution. One of the example, you would find in this link. Thats a bit shame because even some of the newspapers have been using a better technique than that using a programming language called jQuery.There are already pluggins available for free and so making such interactive before and after comparison is just a piece of cake. In the previously mentioned newspaper, this particular plugin was used.

Using open source libraries, I will show how such comparison of after and before photos can be made in a sleek way. For this I will be using Open Layers and GeoExt libraries which anybody can use for free. Open Layers is an open source JavaScript to load display and render maps from multiple sources on web pages. Open layers was released during 2005 and have been very popular with people in geoiformatics people. Though get great maps can be made with Open Layers, it lacks a rich User Interface, therefore nice hearted people have extended it with GeoEXT which provides a many sleek GIS related widgets.

Since, it is not possible to put openlayers with geoext in blogger, i have uploaded the figure and and html file in a zip file. Download the file here, unzip it and then double click the html file to see before and after images in a new elegant way. You can zoom, pan around, toggle the visibiltiy of layers with the checkbox on the left, change the opacity of layers with a slider on the top. If you are interested to see a particular area then press shift+click, a red box will appear and click the extent where you want to zoom.The code is there in the html if you are interested.


This is how it looks.You will appreciate more if you download the file and see yourself.

Isnt that nice ?