Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Is it possible in Leaflet or OpenLayers to compare two maps with a bar to slide between the two?

Examples include:

I know it's possible, I don't know how to do it though. Anyone got any ideas? Examples?

share|improve this question

What you want to do, is usually called a 'Swipe' tool.

There is no inbuilt tool or control for this in OpenLayers, but thankfully, there is an example here: Swipe Control with Google and OSM based on a custom class.

You just need to include this JavaScript file in your application.

Most Swipe Tools/controls that I have seen online, are based on the simple CSS clip. It is very simple to integrate this kind of Control in your application even without external patches.

share|improve this answer
Seen anyone do it with Leaflet? – Alex Leith Apr 17 '13 at 6:38
@alexgleith Have a look at!msg/leaflet-js/vXU_bir6JsA/… – Devdatta Tengshe Apr 17 '13 at 8:15

Mango does it with Leaflet. Check out an example here.

Of course you could just save the time to code it yourself and just create the map for free using Mango.

share|improve this answer
That's a nice looking interface! But there's no reusable code there... I want something that is internal to our organisation, and I have already got infrastructure in place for styling and hosting data. – Alex Leith Apr 17 '13 at 23:14

This is a working Leaflet example using two WMS layers and leaflet 0.5. It does need a bit of tweaking, for example the layers aren't clipped while panning. But it works pretty well.

See here:

share|improve this answer
I don't know if you are the author, but I'll give you two suggestions: Firstly using the Move event rather then the MoveEnd event gives real time swiping & secondly, I feel this is the opposite way of how a tool should be used. Instead of dragging the map, the slider should be dragged. – Devdatta Tengshe Apr 24 '13 at 4:48
I actually like having both the slider at the bottom and the on mouse move. It means that with a mouse you get it working all the time, and with touch, you can still do it. I only just got it together, it is a proof of concept only. I'm sure there are a lot of options. – Alex Leith Apr 24 '13 at 6:41

Have a look at WMS Split for Leaflet.

share|improve this answer

it is possible with leaflet. here what I done the swipe map with leaflet and jquery.

$(document).ready(function() {
        var currentX = $("#viewport").width() / 2;
        var resetPosition = function(x){
            var pos = $(".leaflet-map-pane").position(),
            coordLeft = ( - ) + "px, " + ( x - pos.left + 3 ) + "px, " + ( $("#viewport").height() - ) + "px, " + -pos.left + "px",
            coordRight = ( - ) + "px, " + ( $("#viewport").width() - pos.left ) + "px, " + ( $("#viewport").height() - ) + "px, " + ( x - pos.left + 3 ) + "px";
            $(".leaflet-layer:nth-child(3)").css("clip", "rect(" + coordLeft + ")");
            $(".leaflet-layer:nth-child(2)").css("clip", "rect(" + coordRight + ")");
        map.on("move", function(){
        map.on("zoomend", function(){
        if( $.browser.msie && parseInt($.browser.version) < 9 ){
                drag: function(e){
                    currentX = $("#vbar-divider").position().left;
                axis: "x"
                drag: function(e){
                    currentX = $("#vbar-divider").position().left;
                    $("#vbar-divider div").hide();
                stop: function(){
                    $("#vbar-divider div").show();
                axis: "x",
                containment: "parent"
                left: currentX,
share|improve this answer
Have you got a complete example? How do you set up the two maps to swipe between? – Alex Leith Apr 18 '13 at 3:23
you don't need two maps, what you need is one map with two layers, $(".leaflet-layer:nth-child(3)").css("clip", "rect(" + coordLeft + ")"); $(".leaflet-layer:nth-child(2)").css("clip", "rect(" + coordRight + ")"); – khousuylong Apr 18 '13 at 3:57
Ok, where (2) and (3) refer to layers 2 and 3 in order of adding to map? – Alex Leith Apr 18 '13 at 4:04
the above code is up and running, what you need first is create a map and add two layers, then with jquery you can get the container of top layer and second top layer. using "css" clip to clip the two containers accordingly – khousuylong Apr 18 '13 at 4:15
Ok, so I have a naive implementation here: what is missing? – Alex Leith Apr 18 '13 at 22:51

For OpenLayers have a look at this example:

share|improve this answer

You should probably look into OpenLayers 3. You can look at the code of examples by using CTRL + U: The code does not look too complex either:

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.