Sliding Map Comparisons

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 and want more?

Enter your email to receive the weekly GIS Lounge newsletter: