diff --git a/README.md b/README.md
index 62b3084..03ad75d 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,12 @@
 mapbox-gl-compare
 ---
 
-Swipe and sync between two maps
+Compare between two synced maps.
+Support modes:
+ - Slider
+ - Lens
 
-![Swipe example](http://i.imgur.com/MvjwVLu.gif)
+![Slider example](http://i.imgur.com/MvjwVLu.gif)
 
 Map movements are synced with [mapbox-gl-sync-move](https://github.com/mapbox/mapbox-gl-sync-move).
 
@@ -24,8 +27,9 @@ var after = new mapboxgl.Map({
 var container = '#comparison-container';
 
 new mapboxgl.Compare(before, after, container, {
+  mode: 'slider', // Optional. Set the mode, defaults to slider.
   mousemove: true, // Optional. Set to true to enable swiping during cursor movement.
-  orientation: 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical
+  orientation: 'vertical', // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical
 });
 ```
 
@@ -50,6 +54,18 @@ compare.on('slideend', (e) => {
 
 //Remove - this will remove the compare control from the DOM and stop synchronizing the two maps.
 compare.remove();
+
+// Compare in lens mode.
+lensCompare = new mapboxgl.Compare(before, after, container, {
+  mode: 'lens',
+  size: 80  // Optional. Set the size of the lens, defaults to 100.
+});
+
+//Set Size - this will set the size of the lens
+lensCompare.setSize(100);
+
+//Remove - this will remove the compare control from the DOM and stop synchronizing the two maps.
+lensCompare.remove();
 ```
 
 Demo: https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/
diff --git a/dist/mapbox-gl-compare.js b/dist/mapbox-gl-compare.js
index fb72b1b..466b4d9 100644
--- a/dist/mapbox-gl-compare.js
+++ b/dist/mapbox-gl-compare.js
@@ -1 +1 @@
-!function r(s,h,u){function a(t,e){if(!h[t]){if(!s[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(c)return c(t,!0);var i=new Error("Cannot find module '"+t+"'");throw i.code="MODULE_NOT_FOUND",i}var o=h[t]={exports:{}};s[t][0].call(o.exports,function(e){return a(s[t][1][e]||e)},o,o.exports,r,s,h,u)}return h[t].exports}for(var c="function"==typeof require&&require,e=0;e<u.length;e++)a(u[e]);return a}({1:[function(e,t,n){"use strict";var s=e("@mapbox/mapbox-gl-sync-move"),h=e("events").EventEmitter;function i(e,t,n,i){if(this.options=i||{},this._mapA=e,this._mapB=t,this._horizontal="horizontal"===this.options.orientation,this._onDown=this._onDown.bind(this),this._onMove=this._onMove.bind(this),this._onMouseUp=this._onMouseUp.bind(this),this._onTouchEnd=this._onTouchEnd.bind(this),this._ev=new h,this._swiper=document.createElement("div"),this._swiper.className=this._horizontal?"compare-swiper-horizontal":"compare-swiper-vertical",this._controlContainer=document.createElement("div"),this._controlContainer.className=this._horizontal?"mapboxgl-compare mapboxgl-compare-horizontal":"mapboxgl-compare",this._controlContainer.className=this._controlContainer.className,this._controlContainer.appendChild(this._swiper),"string"==typeof n&&document.body.querySelectorAll){var o=document.body.querySelectorAll(n)[0];if(!o)throw new Error("Cannot find element with specified container selector.");o.appendChild(this._controlContainer)}else{if(!(n instanceof Element&&n.appendChild))throw new Error("Invalid container specified. Must be CSS selector or HTML element.");n.appendChild(this._controlContainer)}this._bounds=t.getContainer().getBoundingClientRect();var r=(this._horizontal?this._bounds.height:this._bounds.width)/2;this._setPosition(r),this._clearSync=s(e,t),this._onResize=function(){this._bounds=t.getContainer().getBoundingClientRect(),this.currentPosition&&this._setPosition(this.currentPosition)}.bind(this),t.on("resize",this._onResize),this.options&&this.options.mousemove&&(e.getContainer().addEventListener("mousemove",this._onMove),t.getContainer().addEventListener("mousemove",this._onMove)),this._swiper.addEventListener("mousedown",this._onDown),this._swiper.addEventListener("touchstart",this._onDown)}i.prototype={_setPointerEvents:function(e){this._controlContainer.style.pointerEvents=e,this._swiper.style.pointerEvents=e},_onDown:function(e){e.touches?(document.addEventListener("touchmove",this._onMove),document.addEventListener("touchend",this._onTouchEnd)):(document.addEventListener("mousemove",this._onMove),document.addEventListener("mouseup",this._onMouseUp))},_setPosition:function(e){e=Math.min(e,this._horizontal?this._bounds.height:this._bounds.width);var t=this._horizontal?"translate(0, "+e+"px)":"translate("+e+"px, 0)";this._controlContainer.style.transform=t,this._controlContainer.style.WebkitTransform=t;var n=this._horizontal?"rect(0, 999em, "+e+"px, 0)":"rect(0, "+e+"px, "+this._bounds.height+"px, 0)",i=this._horizontal?"rect("+e+"px, 999em, "+this._bounds.height+"px,0)":"rect(0, 999em, "+this._bounds.height+"px,"+e+"px)";this._mapA.getContainer().style.clip=n,this._mapB.getContainer().style.clip=i,this.currentPosition=e},_onMove:function(e){this.options&&this.options.mousemove&&this._setPointerEvents(e.touches?"auto":"none"),this._horizontal?this._setPosition(this._getY(e)):this._setPosition(this._getX(e))},_onMouseUp:function(){document.removeEventListener("mousemove",this._onMove),document.removeEventListener("mouseup",this._onMouseUp),this.fire("slideend",{currentPosition:this.currentPosition})},_onTouchEnd:function(){document.removeEventListener("touchmove",this._onMove),document.removeEventListener("touchend",this._onTouchEnd)},_getX:function(e){var t=(e=e.touches?e.touches[0]:e).clientX-this._bounds.left;return t<0&&(t=0),t>this._bounds.width&&(t=this._bounds.width),t},_getY:function(e){var t=(e=e.touches?e.touches[0]:e).clientY-this._bounds.top;return t<0&&(t=0),t>this._bounds.height&&(t=this._bounds.height),t},setSlider:function(e){this._setPosition(e)},on:function(e,t){return this._ev.on(e,t),this},fire:function(e,t){return this._ev.emit(e,t),this},off:function(e,t){return this._ev.removeListener(e,t),this},remove:function(){this._clearSync(),this._mapB.off("resize",this._onResize);var e=this._mapA.getContainer();e&&(e.style.clip=null,e.removeEventListener("mousemove",this._onMove));var t=this._mapB.getContainer();t&&(t.style.clip=null,t.removeEventListener("mousemove",this._onMove)),this._swiper.removeEventListener("mousedown",this._onDown),this._swiper.removeEventListener("touchstart",this._onDown),this._controlContainer.remove()}},window.mapboxgl?mapboxgl.Compare=i:void 0!==t&&(t.exports=i)},{"@mapbox/mapbox-gl-sync-move":2,events:3}],2:[function(e,t,n){t.exports=function(){var t,e=arguments.length;if(1===e)t=arguments[0];else{t=[];for(var n=0;n<e;n++)t.push(arguments[n])}var i=[];function o(){t.forEach(function(e,t){e.on("move",i[t])})}function r(){t.forEach(function(e,t){e.off("move",i[t])})}return t.forEach(function(e,n){i[n]=function(e,t){r(),function(e,t){var n=e.getCenter(),i=e.getZoom(),o=e.getBearing(),r=e.getPitch();t.forEach(function(e){e.jumpTo({center:n,zoom:i,bearing:o,pitch:r})})}(e,t),o()}.bind(null,e,t.filter(function(e,t){return t!==n}))}),o(),function(){r(),i=[]}}},{}],3:[function(e,t,n){var u=Object.create||function(e){function t(){}return t.prototype=e,new t},s=Object.keys||function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.push(n);return n},r=Function.prototype.bind||function(e){var t=this;return function(){return t.apply(e,arguments)}};function i(){this._events&&Object.prototype.hasOwnProperty.call(this,"_events")||(this._events=u(null),this._eventsCount=0),this._maxListeners=this._maxListeners||void 0}((t.exports=i).EventEmitter=i).prototype._events=void 0,i.prototype._maxListeners=void 0;var o,h=10;try{var a={};Object.defineProperty&&Object.defineProperty(a,"x",{value:0}),o=0===a.x}catch(e){o=!1}function c(e){return void 0===e._maxListeners?i.defaultMaxListeners:e._maxListeners}function l(e,t,n,i){var o,r,s;if("function"!=typeof n)throw new TypeError('"listener" argument must be a function');if((r=e._events)?(r.newListener&&(e.emit("newListener",t,n.listener?n.listener:n),r=e._events),s=r[t]):(r=e._events=u(null),e._eventsCount=0),s){if("function"==typeof s?s=r[t]=i?[n,s]:[s,n]:i?s.unshift(n):s.push(n),!s.warned&&(o=c(e))&&0<o&&s.length>o){s.warned=!0;var h=new Error("Possible EventEmitter memory leak detected. "+s.length+' "'+String(t)+'" listeners added. Use emitter.setMaxListeners() to increase limit.');h.name="MaxListenersExceededWarning",h.emitter=e,h.type=t,h.count=s.length,"object"==typeof console&&console.warn&&console.warn("%s: %s",h.name,h.message)}}else s=r[t]=n,++e._eventsCount;return e}function f(){if(!this.fired)switch(this.target.removeListener(this.type,this.wrapFn),this.fired=!0,arguments.length){case 0:return this.listener.call(this.target);case 1:return this.listener.call(this.target,arguments[0]);case 2:return this.listener.call(this.target,arguments[0],arguments[1]);case 3:return this.listener.call(this.target,arguments[0],arguments[1],arguments[2]);default:for(var e=new Array(arguments.length),t=0;t<e.length;++t)e[t]=arguments[t];this.listener.apply(this.target,e)}}function p(e,t,n){var i={fired:!1,wrapFn:void 0,target:e,type:t,listener:n},o=r.call(f,i);return o.listener=n,i.wrapFn=o}function v(e,t,n){var i=e._events;if(!i)return[];var o=i[t];return o?"function"==typeof o?n?[o.listener||o]:[o]:n?function(e){for(var t=new Array(e.length),n=0;n<t.length;++n)t[n]=e[n].listener||e[n];return t}(o):_(o,o.length):[]}function m(e){var t=this._events;if(t){var n=t[e];if("function"==typeof n)return 1;if(n)return n.length}return 0}function _(e,t){for(var n=new Array(t),i=0;i<t;++i)n[i]=e[i];return n}o?Object.defineProperty(i,"defaultMaxListeners",{enumerable:!0,get:function(){return h},set:function(e){if("number"!=typeof e||e<0||e!=e)throw new TypeError('"defaultMaxListeners" must be a positive number');h=e}}):i.defaultMaxListeners=h,i.prototype.setMaxListeners=function(e){if("number"!=typeof e||e<0||isNaN(e))throw new TypeError('"n" argument must be a positive number');return this._maxListeners=e,this},i.prototype.getMaxListeners=function(){return c(this)},i.prototype.emit=function(e,t,n,i){var o,r,s,h,u,a,c="error"===e;if(a=this._events)c=c&&null==a.error;else if(!c)return!1;if(c){if(1<arguments.length&&(o=t),o instanceof Error)throw o;var l=new Error('Unhandled "error" event. ('+o+")");throw l.context=o,l}if(!(r=a[e]))return!1;var f="function"==typeof r;switch(s=arguments.length){case 1:!function(e,t,n){if(t)e.call(n);else for(var i=e.length,o=_(e,i),r=0;r<i;++r)o[r].call(n)}(r,f,this);break;case 2:!function(e,t,n,i){if(t)e.call(n,i);else for(var o=e.length,r=_(e,o),s=0;s<o;++s)r[s].call(n,i)}(r,f,this,t);break;case 3:!function(e,t,n,i,o){if(t)e.call(n,i,o);else for(var r=e.length,s=_(e,r),h=0;h<r;++h)s[h].call(n,i,o)}(r,f,this,t,n);break;case 4:!function(e,t,n,i,o,r){if(t)e.call(n,i,o,r);else for(var s=e.length,h=_(e,s),u=0;u<s;++u)h[u].call(n,i,o,r)}(r,f,this,t,n,i);break;default:for(h=new Array(s-1),u=1;u<s;u++)h[u-1]=arguments[u];!function(e,t,n,i){if(t)e.apply(n,i);else for(var o=e.length,r=_(e,o),s=0;s<o;++s)r[s].apply(n,i)}(r,f,this,h)}return!0},i.prototype.on=i.prototype.addListener=function(e,t){return l(this,e,t,!1)},i.prototype.prependListener=function(e,t){return l(this,e,t,!0)},i.prototype.once=function(e,t){if("function"!=typeof t)throw new TypeError('"listener" argument must be a function');return this.on(e,p(this,e,t)),this},i.prototype.prependOnceListener=function(e,t){if("function"!=typeof t)throw new TypeError('"listener" argument must be a function');return this.prependListener(e,p(this,e,t)),this},i.prototype.removeListener=function(e,t){var n,i,o,r,s;if("function"!=typeof t)throw new TypeError('"listener" argument must be a function');if(!(i=this._events))return this;if(!(n=i[e]))return this;if(n===t||n.listener===t)0==--this._eventsCount?this._events=u(null):(delete i[e],i.removeListener&&this.emit("removeListener",e,n.listener||t));else if("function"!=typeof n){for(o=-1,r=n.length-1;0<=r;r--)if(n[r]===t||n[r].listener===t){s=n[r].listener,o=r;break}if(o<0)return this;0===o?n.shift():function(e,t){for(var n=t,i=n+1,o=e.length;i<o;n+=1,i+=1)e[n]=e[i];e.pop()}(n,o),1===n.length&&(i[e]=n[0]),i.removeListener&&this.emit("removeListener",e,s||t)}return this},i.prototype.removeAllListeners=function(e){var t,n,i;if(!(n=this._events))return this;if(!n.removeListener)return 0===arguments.length?(this._events=u(null),this._eventsCount=0):n[e]&&(0==--this._eventsCount?this._events=u(null):delete n[e]),this;if(0===arguments.length){var o,r=s(n);for(i=0;i<r.length;++i)"removeListener"!==(o=r[i])&&this.removeAllListeners(o);return this.removeAllListeners("removeListener"),this._events=u(null),this._eventsCount=0,this}if("function"==typeof(t=n[e]))this.removeListener(e,t);else if(t)for(i=t.length-1;0<=i;i--)this.removeListener(e,t[i]);return this},i.prototype.listeners=function(e){return v(this,e,!0)},i.prototype.rawListeners=function(e){return v(this,e,!1)},i.listenerCount=function(e,t){return"function"==typeof e.listenerCount?e.listenerCount(t):m.call(e,t)},i.prototype.listenerCount=m,i.prototype.eventNames=function(){return 0<this._eventsCount?Reflect.ownKeys(this._events):[]}},{}]},{},[1]);
+!function r(s,h,u){function a(e,t){if(!h[e]){if(!s[e]){var n="function"==typeof require&&require;if(!t&&n)return n(e,!0);if(l)return l(e,!0);var i=new Error("Cannot find module '"+e+"'");throw i.code="MODULE_NOT_FOUND",i}var o=h[e]={exports:{}};s[e][0].call(o.exports,function(t){return a(s[e][1][t]||t)},o,o.exports,r,s,h,u)}return h[e].exports}for(var l="function"==typeof require&&require,t=0;t<u.length;t++)a(u[t]);return a}({1:[function(t,e,n){"use strict";var s=t("@mapbox/mapbox-gl-sync-move"),h=t("events").EventEmitter;function i(t,e,n,i){if(this.options=i||{},this._mapA=t,this._mapB=e,this._horizontal="horizontal"===this.options.orientation,this._halfSize=(this.options.size?this.options.size:100)/2,this._onDown=this._onDown.bind(this),this._onMove=this._onMove.bind(this),this._onOut=this._onOut.bind(this),this._onMouseUp=this._onMouseUp.bind(this),this._onTouchEnd=this._onTouchEnd.bind(this),this._ev=new h,this._swiper=document.createElement("div"),this._swiper.className=this._horizontal?"compare-swiper-horizontal":"compare-swiper-vertical",this._controlContainer=document.createElement("div"),this._controlContainer.className=this._horizontal?"mapboxgl-compare mapboxgl-compare-horizontal":"mapboxgl-compare",this._controlContainer.className=this._controlContainer.className,this._controlContainer.appendChild(this._swiper),"string"==typeof n&&document.body.querySelectorAll){var o=document.body.querySelectorAll(n)[0];if(!o)throw new Error("Cannot find element with specified container selector.");o.appendChild(this._controlContainer)}else{if(!(n instanceof Element&&n.appendChild))throw new Error("Invalid container specified. Must be CSS selector or HTML element.");n.appendChild(this._controlContainer)}this._bounds=e.getContainer().getBoundingClientRect();var r=this._horizontal?[0,this._bounds.height/2]:[this._bounds.width/2,0];this._setPosition(r),this._clearSync=s(t,e),this._onResize=function(){this._bounds=e.getContainer().getBoundingClientRect(),this.currentPosition&&this._setPosition(this.currentPosition)}.bind(this),e.on("resize",this._onResize),this.options&&("lens"===this.options.mode!=(!0===this.options.mousemove)&&(t.getContainer().addEventListener("mousemove",this._onMove),e.getContainer().addEventListener("mousemove",this._onMove)),"lens"===this.options.mode&&(this._swiper.style.display="none",e.getContainer().style.clipPath="inset(50%)",e.getContainer().addEventListener("mouseout",this._onOut))),this._swiper.addEventListener("mousedown",this._onDown),this._swiper.addEventListener("touchstart",this._onDown)}i.prototype={_setPointerEvents:function(t){this._controlContainer.style.pointerEvents=t,this._swiper.style.pointerEvents=t},_onDown:function(t){t.touches?(document.addEventListener("touchmove",this._onMove),document.addEventListener("touchend",this._onTouchEnd),document.addEventListener("singleTap",this._onOut)):(document.addEventListener("mousemove",this._onMove),document.addEventListener("mouseup",this._onMouseUp),document.addEventListener("mouseout",this._onOut))},_setPosition:function(t){var e=t[0],n=t[1];if("lens"===this.options.mode)this._mapB.getContainer().style.clipPath=this._calcShape(e,n);else{e=Math.min(e,this._bounds.width),n=Math.min(n,this._bounds.heighth);var i=this._horizontal?"translate(0, "+n+"px)":"translate("+e+"px, 0)";this._controlContainer.style.transform=i,this._controlContainer.style.WebkitTransform=i;var o=this._horizontal?"rect(0, 999em, "+n+"px, 0)":"rect(0, "+e+"px, "+this._bounds.height+"px, 0)",r=this._horizontal?"rect("+n+"px, 999em, "+this._bounds.height+"px,0)":"rect(0, 999em, "+this._bounds.height+"px,"+e+"px)";this._mapA.getContainer().style.clip=o,this._mapB.getContainer().style.clip=r}this.currentPosition=t},_onMove:function(t){this.options&&this.options.mousemove&&this._setPointerEvents(t.touches?"auto":"none"),this._setPosition([this._getX(t),this._getY(t)])},_onOut:function(t){this.options&&"lens"===this.options.mode&&(this._mapB.getContainer().style.clipPath="inset(50%)")},_onMouseUp:function(){document.removeEventListener("mousemove",this._onMove),document.removeEventListener("mouseup",this._onMouseUp),this.fire("slideend",{currentPosition:this.currentPosition})},_onTouchEnd:function(){document.removeEventListener("touchmove",this._onMove),document.removeEventListener("touchend",this._onTouchEnd),this.fire("slideend",{currentPosition:this.currentPosition})},_calcShape:function(t,e){return"inset("+Math.max(0,e-this._halfSize)+"px "+Math.max(0,this._bounds.width-t-this._halfSize)+"px "+Math.max(0,this._bounds.height-e-this._halfSize)+"px "+Math.max(0,t-this._halfSize)+"px round "+this._halfSize+"px)"},_getX:function(t){var e=(t=t.touches?t.touches[0]:t).clientX-this._bounds.left;return e<0&&(e=0),e>this._bounds.width&&(e=this._bounds.width),e},_getY:function(t){var e=(t=t.touches?t.touches[0]:t).clientY-this._bounds.top;return e<0&&(e=0),e>this._bounds.height&&(e=this._bounds.height),e},setSize:function(t){this._halfSize=(t||100)/2},setSlider:function(t){this._horizontal?(t<0&&(t=0),t>this._bounds.height&&(t=this._bounds.height),this._setPosition([0,t])):(t<0&&(t=0),t>this._bounds.width&&(t=this._bounds.width),this._setPosition([t,0]))},on:function(t,e){return this._ev.on(t,e),this},fire:function(t,e){return this._ev.emit(t,e),this},off:function(t,e){return this._ev.removeListener(t,e),this},remove:function(){this._clearSync(),this._mapB.off("resize",this._onResize);var t=this._mapA.getContainer();t&&(t.style.clip=null,t.removeEventListener("mousemove",this._onMove));var e=this._mapB.getContainer();e&&(e.style.clip=null,e.removeEventListener("mousemove",this._onMove)),this._swiper.removeEventListener("mousedown",this._onDown),this._swiper.removeEventListener("touchstart",this._onDown),this._controlContainer.remove()}},window.mapboxgl?mapboxgl.Compare=i:void 0!==e&&(e.exports=i)},{"@mapbox/mapbox-gl-sync-move":2,events:3}],2:[function(t,e,n){e.exports=function(){var e,t=arguments.length;if(1===t)e=arguments[0];else{e=[];for(var n=0;n<t;n++)e.push(arguments[n])}var i=[];function o(){e.forEach(function(t,e){t.on("move",i[e])})}function r(){e.forEach(function(t,e){t.off("move",i[e])})}return e.forEach(function(t,n){i[n]=function(t,e){r(),function(t,e){var n=t.getCenter(),i=t.getZoom(),o=t.getBearing(),r=t.getPitch();e.forEach(function(t){t.jumpTo({center:n,zoom:i,bearing:o,pitch:r})})}(t,e),o()}.bind(null,t,e.filter(function(t,e){return e!==n}))}),o(),function(){r(),i=[]}}},{}],3:[function(t,e,n){var u=Object.create||function(t){function e(){}return e.prototype=t,new e},s=Object.keys||function(t){var e=[];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.push(n);return n},r=Function.prototype.bind||function(t){var e=this;return function(){return e.apply(t,arguments)}};function i(){this._events&&Object.prototype.hasOwnProperty.call(this,"_events")||(this._events=u(null),this._eventsCount=0),this._maxListeners=this._maxListeners||void 0}((e.exports=i).EventEmitter=i).prototype._events=void 0,i.prototype._maxListeners=void 0;var o,h=10;try{var a={};Object.defineProperty&&Object.defineProperty(a,"x",{value:0}),o=0===a.x}catch(t){o=!1}function l(t){return void 0===t._maxListeners?i.defaultMaxListeners:t._maxListeners}function c(t,e,n,i){var o,r,s;if("function"!=typeof n)throw new TypeError('"listener" argument must be a function');if((r=t._events)?(r.newListener&&(t.emit("newListener",e,n.listener?n.listener:n),r=t._events),s=r[e]):(r=t._events=u(null),t._eventsCount=0),s){if("function"==typeof s?s=r[e]=i?[n,s]:[s,n]:i?s.unshift(n):s.push(n),!s.warned&&(o=l(t))&&0<o&&s.length>o){s.warned=!0;var h=new Error("Possible EventEmitter memory leak detected. "+s.length+' "'+String(e)+'" listeners added. Use emitter.setMaxListeners() to increase limit.');h.name="MaxListenersExceededWarning",h.emitter=t,h.type=e,h.count=s.length,"object"==typeof console&&console.warn&&console.warn("%s: %s",h.name,h.message)}}else s=r[e]=n,++t._eventsCount;return t}function f(){if(!this.fired)switch(this.target.removeListener(this.type,this.wrapFn),this.fired=!0,arguments.length){case 0:return this.listener.call(this.target);case 1:return this.listener.call(this.target,arguments[0]);case 2:return this.listener.call(this.target,arguments[0],arguments[1]);case 3:return this.listener.call(this.target,arguments[0],arguments[1],arguments[2]);default:for(var t=new Array(arguments.length),e=0;e<t.length;++e)t[e]=arguments[e];this.listener.apply(this.target,t)}}function p(t,e,n){var i={fired:!1,wrapFn:void 0,target:t,type:e,listener:n},o=r.call(f,i);return o.listener=n,i.wrapFn=o}function v(t,e,n){var i=t._events;if(!i)return[];var o=i[e];return o?"function"==typeof o?n?[o.listener||o]:[o]:n?function(t){for(var e=new Array(t.length),n=0;n<e.length;++n)e[n]=t[n].listener||t[n];return e}(o):_(o,o.length):[]}function m(t){var e=this._events;if(e){var n=e[t];if("function"==typeof n)return 1;if(n)return n.length}return 0}function _(t,e){for(var n=new Array(e),i=0;i<e;++i)n[i]=t[i];return n}o?Object.defineProperty(i,"defaultMaxListeners",{enumerable:!0,get:function(){return h},set:function(t){if("number"!=typeof t||t<0||t!=t)throw new TypeError('"defaultMaxListeners" must be a positive number');h=t}}):i.defaultMaxListeners=h,i.prototype.setMaxListeners=function(t){if("number"!=typeof t||t<0||isNaN(t))throw new TypeError('"n" argument must be a positive number');return this._maxListeners=t,this},i.prototype.getMaxListeners=function(){return l(this)},i.prototype.emit=function(t,e,n,i){var o,r,s,h,u,a,l="error"===t;if(a=this._events)l=l&&null==a.error;else if(!l)return!1;if(l){if(1<arguments.length&&(o=e),o instanceof Error)throw o;var c=new Error('Unhandled "error" event. ('+o+")");throw c.context=o,c}if(!(r=a[t]))return!1;var f="function"==typeof r;switch(s=arguments.length){case 1:!function(t,e,n){if(e)t.call(n);else for(var i=t.length,o=_(t,i),r=0;r<i;++r)o[r].call(n)}(r,f,this);break;case 2:!function(t,e,n,i){if(e)t.call(n,i);else for(var o=t.length,r=_(t,o),s=0;s<o;++s)r[s].call(n,i)}(r,f,this,e);break;case 3:!function(t,e,n,i,o){if(e)t.call(n,i,o);else for(var r=t.length,s=_(t,r),h=0;h<r;++h)s[h].call(n,i,o)}(r,f,this,e,n);break;case 4:!function(t,e,n,i,o,r){if(e)t.call(n,i,o,r);else for(var s=t.length,h=_(t,s),u=0;u<s;++u)h[u].call(n,i,o,r)}(r,f,this,e,n,i);break;default:for(h=new Array(s-1),u=1;u<s;u++)h[u-1]=arguments[u];!function(t,e,n,i){if(e)t.apply(n,i);else for(var o=t.length,r=_(t,o),s=0;s<o;++s)r[s].apply(n,i)}(r,f,this,h)}return!0},i.prototype.on=i.prototype.addListener=function(t,e){return c(this,t,e,!1)},i.prototype.prependListener=function(t,e){return c(this,t,e,!0)},i.prototype.once=function(t,e){if("function"!=typeof e)throw new TypeError('"listener" argument must be a function');return this.on(t,p(this,t,e)),this},i.prototype.prependOnceListener=function(t,e){if("function"!=typeof e)throw new TypeError('"listener" argument must be a function');return this.prependListener(t,p(this,t,e)),this},i.prototype.removeListener=function(t,e){var n,i,o,r,s;if("function"!=typeof e)throw new TypeError('"listener" argument must be a function');if(!(i=this._events))return this;if(!(n=i[t]))return this;if(n===e||n.listener===e)0==--this._eventsCount?this._events=u(null):(delete i[t],i.removeListener&&this.emit("removeListener",t,n.listener||e));else if("function"!=typeof n){for(o=-1,r=n.length-1;0<=r;r--)if(n[r]===e||n[r].listener===e){s=n[r].listener,o=r;break}if(o<0)return this;0===o?n.shift():function(t,e){for(var n=e,i=n+1,o=t.length;i<o;n+=1,i+=1)t[n]=t[i];t.pop()}(n,o),1===n.length&&(i[t]=n[0]),i.removeListener&&this.emit("removeListener",t,s||e)}return this},i.prototype.removeAllListeners=function(t){var e,n,i;if(!(n=this._events))return this;if(!n.removeListener)return 0===arguments.length?(this._events=u(null),this._eventsCount=0):n[t]&&(0==--this._eventsCount?this._events=u(null):delete n[t]),this;if(0===arguments.length){var o,r=s(n);for(i=0;i<r.length;++i)"removeListener"!==(o=r[i])&&this.removeAllListeners(o);return this.removeAllListeners("removeListener"),this._events=u(null),this._eventsCount=0,this}if("function"==typeof(e=n[t]))this.removeListener(t,e);else if(e)for(i=e.length-1;0<=i;i--)this.removeListener(t,e[i]);return this},i.prototype.listeners=function(t){return v(this,t,!0)},i.prototype.rawListeners=function(t){return v(this,t,!1)},i.listenerCount=function(t,e){return"function"==typeof t.listenerCount?t.listenerCount(e):m.call(t,e)},i.prototype.listenerCount=m,i.prototype.eventNames=function(){return 0<this._eventsCount?Reflect.ownKeys(this._events):[]}},{}]},{},[1]);
diff --git a/index.js b/index.js
index 78ef87a..f511a27 100644
--- a/index.js
+++ b/index.js
@@ -9,10 +9,13 @@ var EventEmitter = require('events').EventEmitter;
  * @param {Object} b The second Mapbox GL Map
  * @param {string|HTMLElement} container An HTML Element, or an element selector string for the compare container. It should be a wrapper around the two map Elements.
  * @param {Object} options
+ * @param {string} [options.mode=slider] The compare mode. `slider` creates a vertical or horizontal slider bar to compare one map on the left or top (map A) with another map on the right or bottom (map B). `lens` creates a round area to compare on mop on the back (map A) and another map on the front (map B).
  * @param {string} [options.orientation=vertical] The orientation of the compare slider. `vertical` creates a vertical slider bar to compare one map on the left (map A) with another map on the right (map B). `horizontal` creates a horizontal slider bar to compare on mop on the top (map A) and another map on the bottom (map B).
+ * @param {number} [options.size=100] The size of the compare lens.
  * @param {boolean} [options.mousemove=false] If `true` the compare slider will move with the cursor, otherwise the slider will need to be dragged to move.
  * @example
  * var compare = new mapboxgl.Compare(beforeMap, afterMap, '#wrapper', {
+ *   mode: 'swiper',
  *   orientation: 'vertical',
  *   mousemove: true
  * });
@@ -23,8 +26,10 @@ function Compare(a, b, container, options) {
   this._mapA = a;
   this._mapB = b;
   this._horizontal = this.options.orientation === 'horizontal';
+  this._halfSize = (this.options.size ? this.options.size : 100) / 2;
   this._onDown = this._onDown.bind(this);
   this._onMove = this._onMove.bind(this);
+  this._onOut = this._onOut.bind(this);
   this._onMouseUp = this._onMouseUp.bind(this);
   this._onTouchEnd = this._onTouchEnd.bind(this);
   this._ev = new EventEmitter();
@@ -51,7 +56,7 @@ function Compare(a, b, container, options) {
   }
 
   this._bounds = b.getContainer().getBoundingClientRect();
-  var swiperPosition = (this._horizontal ? this._bounds.height : this._bounds.width) / 2;
+  var swiperPosition = this._horizontal ? [0, this._bounds.height / 2] : [this._bounds.width / 2, 0];
   this._setPosition(swiperPosition);
 
   this._clearSync = syncMove(a, b);
@@ -62,9 +67,16 @@ function Compare(a, b, container, options) {
 
   b.on('resize', this._onResize);
 
-  if (this.options && this.options.mousemove) {
-    a.getContainer().addEventListener('mousemove', this._onMove);
-    b.getContainer().addEventListener('mousemove', this._onMove);
+  if (this.options) {
+    if ((this.options.mode === 'lens') !== (this.options.mousemove === true)) {
+      a.getContainer().addEventListener('mousemove', this._onMove);
+      b.getContainer().addEventListener('mousemove', this._onMove);
+    }
+    if (this.options.mode === 'lens') {
+      this._swiper.style.display = 'none';
+      b.getContainer().style.clipPath = 'inset(50%)';
+      b.getContainer().addEventListener('mouseout', this._onOut);
+    }
   }
 
   this._swiper.addEventListener('mousedown', this._onDown);
@@ -81,31 +93,37 @@ Compare.prototype = {
     if (e.touches) {
       document.addEventListener('touchmove', this._onMove);
       document.addEventListener('touchend', this._onTouchEnd);
+      document.addEventListener('singleTap', this._onOut);
     } else {
       document.addEventListener('mousemove', this._onMove);
       document.addEventListener('mouseup', this._onMouseUp);
+      document.addEventListener('mouseout', this._onOut);
     }
   },
 
-  _setPosition: function(x) {
-    x = Math.min(x, this._horizontal
-      ? this._bounds.height
-      : this._bounds.width);
-    var pos = this._horizontal
-      ? 'translate(0, ' + x + 'px)'
-      : 'translate(' + x + 'px, 0)';
-    this._controlContainer.style.transform = pos;
-    this._controlContainer.style.WebkitTransform = pos;
-    var clipA = this._horizontal
-      ? 'rect(0, 999em, ' + x + 'px, 0)'
-      : 'rect(0, ' + x + 'px, ' + this._bounds.height + 'px, 0)';
-    var clipB = this._horizontal
-      ? 'rect(' + x + 'px, 999em, ' + this._bounds.height + 'px,0)'
-      : 'rect(0, 999em, ' + this._bounds.height + 'px,' + x + 'px)';
-    
-    this._mapA.getContainer().style.clip = clipA;
-    this._mapB.getContainer().style.clip = clipB;
-    this.currentPosition = x;
+  _setPosition: function(p) {
+    var x = p[0], y = p[1];
+    if (this.options.mode === 'lens') {
+      this._mapB.getContainer().style.clipPath = this._calcShape(x, y);
+    } else {
+      x = Math.min(x, this._bounds.width);
+      y = Math.min(y, this._bounds.heighth);
+      var pos = this._horizontal
+        ? 'translate(0, ' + y + 'px)'
+        : 'translate(' + x + 'px, 0)';
+      this._controlContainer.style.transform = pos;
+      this._controlContainer.style.WebkitTransform = pos;
+      var clipA = this._horizontal
+        ? 'rect(0, 999em, ' + y + 'px, 0)'
+        : 'rect(0, ' + x + 'px, ' + this._bounds.height + 'px, 0)';
+      var clipB = this._horizontal
+        ? 'rect(' + y + 'px, 999em, ' + this._bounds.height + 'px,0)'
+        : 'rect(0, 999em, ' + this._bounds.height + 'px,' + x + 'px)';
+      
+      this._mapA.getContainer().style.clip = clipA;
+      this._mapB.getContainer().style.clip = clipB;
+    }
+    this.currentPosition = p;
   },
 
   _onMove: function(e) {
@@ -113,9 +131,13 @@ Compare.prototype = {
       this._setPointerEvents(e.touches ? 'auto' : 'none');
     }
 
-    this._horizontal
-      ? this._setPosition(this._getY(e))
-      : this._setPosition(this._getX(e));
+    this._setPosition([this._getX(e), this._getY(e)]);
+  },
+
+  _onOut: function(e) {
+    if (this.options && this.options.mode === 'lens') {
+      this._mapB.getContainer().style.clipPath = 'inset(50%)';
+    }
   },
 
   _onMouseUp: function() {
@@ -130,6 +152,14 @@ Compare.prototype = {
     this.fire('slideend', { currentPosition: this.currentPosition });
   },
 
+  _calcShape : function(x, y) {
+    var top = Math.max(0, y - this._halfSize);
+    var right = Math.max(0, this._bounds.width - x - this._halfSize);
+    var bottom = Math.max(0, this._bounds.height - y - this._halfSize);
+    var left = Math.max(0, x - this._halfSize);
+    return 'inset(' + top + 'px ' + right + 'px ' + bottom + 'px ' + left +'px round ' + this._halfSize + 'px)';
+  },
+
   _getX: function(e) {
     e = e.touches ? e.touches[0] : e;
     var x = e.clientX - this._bounds.left;
@@ -145,6 +175,15 @@ Compare.prototype = {
     if (y > this._bounds.height) y = this._bounds.height;
     return y;
   },
+  
+  /**
+   * Set the size of the lens.
+   *
+   * @param {number} size Lens size.
+   */
+  setSize: function(size) {
+    this._halfSize = (size ? size : 100) / 2;
+  },
 
   /**
    * Set the position of the slider.
@@ -152,7 +191,15 @@ Compare.prototype = {
    * @param {number} x Slider position in pixels from left/top.
    */
   setSlider: function(x) {
-    this._setPosition(x);
+    if (this._horizontal) {
+      if (x < 0) x = 0;
+      if (x > this._bounds.height) x = this._bounds.height;
+      this._setPosition([0, x]);
+    } else {
+      if (x < 0) x = 0;
+      if (x > this._bounds.width) x = this._bounds.width;
+      this._setPosition([x, 0]);
+    }
   },
 
   /**
diff --git a/package.json b/package.json
index 234bd45..f8040ed 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mapbox-gl-compare",
-  "version": "0.4.0",
-  "description": "Swipe and sync between two maps",
+  "version": "0.5.0",
+  "description": "Compare between two synced maps",
   "main": "index.js",
   "directories": {
     "example": "example"