Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It only takes a minute to sign up.
Sign up to join this community
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?
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.
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.
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: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html
Have a look at WMS Split for Leaflet.
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 = ( - pos.top ) + "px, " + ( x - pos.left + 3 ) + "px, " + ( $("#viewport").height() - pos.top ) + "px, " + -pos.left + "px",
coordRight = ( - pos.top ) + "px, " + ( $("#viewport").width() - pos.left ) + "px, " + ( $("#viewport").height() - pos.top ) + "px, " + ( x - pos.left + 3 ) + "px";
$(".leaflet-layer:nth-child(3)").css("clip", "rect(" + coordLeft + ")");
$(".leaflet-layer:nth-child(2)").css("clip", "rect(" + coordRight + ")");
};
resetPosition(currentX);
map.on("move", function(){
resetPosition(currentX);
})
map.on("zoomend", function(){
resetPosition(currentX);
});
if( $.browser.msie && parseInt($.browser.version) < 9 ){
$("#vbar-divider").draggable({
drag: function(e){
currentX = $("#vbar-divider").position().left;
resetPosition(currentX);
},
axis: "x"
});
}else{
$("#vbar-divider").draggable({
drag: function(e){
currentX = $("#vbar-divider").position().left;
resetPosition(currentX);
$("#vbar-divider div").hide();
},
stop: function(){
$("#vbar-divider div").show();
},
axis: "x",
containment: "parent"
});
}
$('#vbar-divider').animate({
left: currentX,
},
500
);
});
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:
I am using a nice Openlayers 3 and 4 extensions by viglino. You can find the examples of Swipe tool and Synchronized maps here.
http://viglino.github.io/ol3-ext/examples/map.control.swipe.html
http://viglino.github.io/ol3-ext/examples/map.interaction.synchronize.html
His GitHub repository is located here: https://github.com/Viglino/ol3-ext
Those examples are included in the GitHub repository.
