New Sample : Swipe Tool

Swipe Tool in ActionIt’s been  a while since my last blog post thanks to Twitter.  This week I posted a new sample on the JavaScript Code Gallery ( called “Swipe Tool”. As the name suggests its a swipe tool and if you are familiar with ArcGIS Desktop or ArcGIS Explorer you know what this means, for other its a way to see what underneath a layer. Can be used as a good comparison tool.

Check it out live :

At first it might sound like not a big deal, but the fact is that no such tool existed till now for the ArcGIS JavaScript API (to best of my knowledge none exists for other JavaScript Mapping API’s too) makes it a big deal. After seeing the New York Times Flash based swipe tool application (link) to see the after and before images of the recent crisis in Haiti, it was time to get a swipe tool for the JavaScript API developers.

Did I mention that this tool just uses JavaScript and CSS. Challenge was to make it perform, work on all supported browsers, configure to work with any layer (tiled or dynamic or graphics), have a decent UI (like a slider) and not make any extra map image requests and also allow users to zoom/pan while swiping (believe me this was a hard one).

I did go through the challenges one at a time and was able to get the tool to do all the things. Well you will not believe how simple the solution was. The thinking was all the images from the layers are on the map, just clip it.  CSS does support “clip” and this tool makes full use of that. Check out the code for more details.

Hope you like this tool and use it in your applications.


5 Responses to “New Sample : Swipe Tool”

  1. andrewh Says:

    Hey, I really like your swipe tool! Is there any way to modify it so that I can have one base layer, and select one of several other layers from the drop-box to compare to it?

  2. Aamir Says:

    Thats a great tool Sathya. Many many thanks. Do you have an enhanced version dealing with feature layers. I guess you would have to clip the element in the . That will help a lot. Thanks!

  3. roy jackson Says:

    This is great. I modified to show only one layer on each side during the swipe, instead of all on one side and one on the other.

    This doesn’t appear to work with current version of esri javascript api (3.3) using dojo 1.8. Do you know how to get this working with new version?:

    swipeslider = new dojo.dnd.move.parentConstrainedMoveable(“sliderdiv”, {
    area: “content”,
    within: true

  4. Anonymous Says:

    Hi Satya,
    Using your code for Swiping layers in my project, but having problem with the graphics and feature layers.It works for the graphics added to but not for the graphics added to feature or graphics layer.

    Already tried = clipstring;
    But still can’t. Problem is, is not defined for feature and graphics layers.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: