Fork me on Github
Compare maps
diff --git a/site.js b/site.js
index 8fa9cc9..f48ab96 100644
--- a/site.js
+++ b/site.js
@@ -3,6 +3,7 @@
if (!layerids) {
document.getElementById('map1').style.display = 'none';
document.getElementById('map2').style.display = 'none';
+ document.getElementById('toggle').style.display = 'none';
document.getElementById('help').style.display = 'block';
document.getElementById('compare').onclick = function(e) {
@@ -63,4 +64,9 @@
reset: true
});
}
+
+ // Toggle to swipe.
+ document.getElementById('toggle').onclick = function() {
+ location.href = location.origin + location.pathname + "swipe/" + location.search + location.hash;
+ };
})();
diff --git a/style.css b/style.css
index 7630acd..4a9aea7 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,17 @@ body {
#map { position:absolute; top:0; bottom:0; width:100%; background-color: #202222; }
#map1 { position:absolute; top:0; bottom:0; left:0; right:50%; background-color: #202222; }
#map2 { position:absolute; top:0; bottom:0; left:50%; right:0; background-color: #202222; }
+#toggle {
+ position: absolute;
+ background-image: url('swipe.png');
+ background-color: rgba(255, 255, 255, 0.5);
+ z-index: 20000;
+ top: 10px;
+ right: 10px;
+ width: 52px;
+ height: 26px;
+ cursor: pointer;
+}
#range {
top: 50%;
width: 100%;
diff --git a/swipe.png b/swipe.png
new file mode 100644
index 0000000..a74c55a
Binary files /dev/null and b/swipe.png differ
diff --git a/swipe/index.html b/swipe/index.html
index ce0050c..c03d519 100644
--- a/swipe/index.html
+++ b/swipe/index.html
@@ -15,9 +15,15 @@
+
-
+
+
diff --git a/swipe/site.js b/swipe/site.js
index 0e0a73f..ea5cfec 100644
--- a/swipe/site.js
+++ b/swipe/site.js
@@ -49,4 +49,10 @@
document.getElementById('range').style.top = (e.screenY - 120) + "px";
};
};
+
+ // Toggle to compare.
+ document.getElementById('toggle').onclick = function() {
+ var path = location.pathname.replace('swipe/', '');
+ location.href = location.origin + path + location.search + location.hash;
+ };
})();