Sliding Map Comparisons

Filed in GIS Software and Applications by on March 21, 2011


The JournalismGIS blog shows a quick and easy way to create slide comparison maps using a jQuery plugin.  The plugin uses a slider effect to reveal the bottom image of two images stacked on top of each other.  The jQuery Before/After plugin is lightweight (7k) and is built using JavaScript and jQuery.   In the example shown, two chloropleth map images for Maricopa County in Arizona are used.  By grabbing the slider, the bottom map is revealed when the cursor is moved to the left and covered when the cursor is moved completely to the right.

The key is to export map images that are the same size.  The images, plugin, and html files all need to be stored in the same folder.  If you don’t have jQuery and jQueryUI installed, you can point to jQuery on Google and jQueryUI on Google.  The resulting slider map can then be called from other pages using iFrames.

To get started making your own slider maps visit both sites for step-by-step instructions:

Via @desjardins


Like this article?

Sign up for GIS Lounge's weekly newsletter for more great content:


Tags: ,

Comments (2)

Trackback URL | Comments RSS Feed

  1. Caitlin Dempsey says:

    Thanks, the correction has been made.

  2. Andrew Long says:

    Robert didn’t write that post. Sorry for the confusion. Can you just attribute it to

Discuss this article

Your email address will not be shown.

More in GIS Software and Applications
How to Install ArcView 3.x on Windows 7

With so many GIS shops hanging on to legacy ArcView 3.x project files (.apr), having a running ArcView 3.x version...