Sliding map comparisons using jquery
by Andrew Long
If you’ve been following the Japanese earthquake you might have seen the “before and after” photo technique popularized by the New York Times. I always thought this technique would be a great way to compare choropleth maps. So, I was excited when I came across this jquery plugin that mimics the technique. Here is the map that I made out of some Maricopa County voting maps.
The map is pretty easy to put together. First you need to produce your choropleth maps. You can do this with some open source GIS programs like QGIS and uDIG. I used ESRI’s ArcMap and exported two images as jpegs. The key here is that the images need to be the same size. Save one image as before.jpg and the other as after.jpg.
Make a folder that will contain your images, html and javascript.
Using a text editor make the html file. Here is the code:
<html>
<head>
#DECLARE JAVACRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
#DECLARE OPTIONS
<script type="text/javascript">
$(function(){
$('#container').beforeAfter({
animateIntro : true,
introDelay : 500,
introDuration : 500,
showFullLinks : false
});
});
</script>
</head>
<body>
#MAKE IMAGE DIVS
<div id="container">
<div><img alt="before" src="before.jpg" width="500" height="300" /></div>
<div><img alt="after" src="after.jpg" width="500" height="600" /></div>
</div>
</body>
</html>
The first part of this code calls jquery and the plugin. Make sure you put the plugin javascript in your folder. The next sections defines the function. The plugin has some options that you can declare. In the body, we declare two divs. These will hold the images. To make the map bigger or smaller change these divs to match your image sizes. Once you have the html, javascript and images together, place the folder on a server. Here is a zip file of my folder.
EDIT: Apparently this plugin has a “No commercial” creative commons licence.
[...] Sliding map comparisons using jquery [...]
Hi, I’m the author of the Before/After plugin and you’re correct, the plugin cannot be used commercially without approval and/or a license. Non-profit and personal websites can use it for free.
That’s a shame. Most newsrooms have nothing to do with the commercial side…Just hard working journalists trying to tell a story. It would be cool if you would give an exception for media use…with attribution of course. Free publicity?
Hi Andrew,
The license isn’t expensive enough to make it prohibitive, just enough to cover my development time. Most media outlets can handle the cost. Thanks for your interest in the plugin!
I will disagree….but best of luck.
Very nice post! I’ll apply this script to make a before-after in raster images. Thanks for sharing!
i having big prob can ur product helps
im dealing with fully informed map by isri
and the zooming and selection is doing by server side and i wana do this on the client side can this helps or can u help me finding solution …….