oliverheilig/jsbin.ejUTELOx.css

## jsbin.ejUTELOx.css
#map {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}
#range {
    top: 10px;
    left: 0px;
    right: 0px;
    position: absolute;
}
#range2 {
    top: 40px;
    left: 0px;
    right: 0px;
    position: absolute;
}
.leaflet-top {
  margin-top: 70px;
}

## jsbin.ejUTELOx.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="xmap swipe" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>xmap swipe</title>
      <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">
      <script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
      <script type='text/javascript' src="http://oliverheilig.github.io/Leaflet.NonTiledLayer/NonTiledLayer.js"></script>
      <script type='text/javascript' src="http://oliverheilig.github.io/Leaflet.NonTiledLayer/NonTiledLayer.WMS.js"></script>
      <script type='text/javascript' src="http://oliverheilig.github.io/Leaflet.NonTiledLayer/leaflet-x.js"></script>
</head>
<body>
  <div id="map"></div>
  <input id="range" type="range" min="0" max="1.0" step="any" />
  <input id="range2" type="range" value="0.15" min="0" max="1.0" step="any" />
  </body>
</html>


## jsbin.ejUTELOx.js
var wmsUrl = "http://80.146.239.180/WMS";
var map = new L.Map('map', {maxZoom:19});

// add nokia layer
var nokia = L.tileLayer('http://{s}.maps.nlp.nokia.com/maptile/2.1/basetile/newest/normal.day/{z}/{x}/{y}/256/png8?app_id=&token=', {
    subdomains: '1234',
  maxZoom: 20
}).addTo(map);

// add the xServer layers
var background = X.backgroundLayer(wmsUrl, "HERE").addTo(map);

// aerials
var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
  opacity: 0.15,
  maxNativeZoom: 18,
  maxZoom: 20
}).addTo(map);

// nokia labels
var nokiaLabel = L.tileLayer('http://{s}.maps.nlp.nokia.com/maptile/2.1/labeltile/newest/normal.day/{z}/{x}/{y}/256/png8?app_id=&token=', {
    subdomains: '1234',
    maxZoom: 20
}).addTo(map);

// xmap labels
var labels = X.labelLayer(wmsUrl, "HERE").addTo(map);

// set up range splitter
var range = document.getElementById('range');
var range2 = document.getElementById('range2');

function clip() {
    var nw = map.containerPointToLayerPoint([0, 0]),
        se = map.containerPointToLayerPoint(map.getSize()),
        clipX = nw.x + (se.x - nw.x) * range.value;

   nokiaLabel.getContainer().style.clip = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)';
  background.getContainer().style.clip = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
    map._panes.overlayPane.style.clip = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
}

function setOpacity() {
  Esri_WorldImagery.setOpacity(range2.value);
}

range['oninput' in range ? 'oninput' : 'onchange'] = clip;
map.on('move', clip);

range2['oninput' in range2 ? 'oninput' : 'onchange'] = setOpacity;

// go to luxemburg
map.setView(new L.LatLng(49.611389, 6.130833), 13);
	#map {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	}
	#range {
	top: 10px;
	left: 0px;
	right: 0px;
	position: absolute;
	}
	#range2 {
	top: 40px;
	left: 0px;
	right: 0px;
	position: absolute;
	}
	.leaflet-top {
	margin-top: 70px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="xmap swipe" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>xmap swipe</title>
	<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">
	<script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
	<script type='text/javascript' src="http://oliverheilig.github.io/Leaflet.NonTiledLayer/NonTiledLayer.js"></script>
	<script type='text/javascript' src="http://oliverheilig.github.io/Leaflet.NonTiledLayer/NonTiledLayer.WMS.js"></script>
	<script type='text/javascript' src="http://oliverheilig.github.io/Leaflet.NonTiledLayer/leaflet-x.js"></script>
	</head>
	<body>
	<div id="map"></div>
	<input id="range" type="range" min="0" max="1.0" step="any" />
	<input id="range2" type="range" value="0.15" min="0" max="1.0" step="any" />
	</body>
	</html>
	var wmsUrl = "http://80.146.239.180/WMS";
	var map = new L.Map('map', {maxZoom:19});

	// add nokia layer
	var nokia = L.tileLayer('http://{s}.maps.nlp.nokia.com/maptile/2.1/basetile/newest/normal.day/{z}/{x}/{y}/256/png8?app_id=&token=', {
	subdomains: '1234',
	maxZoom: 20
	}).addTo(map);

	// add the xServer layers
	var background = X.backgroundLayer(wmsUrl, "HERE").addTo(map);

	// aerials
	var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
	opacity: 0.15,
	maxNativeZoom: 18,
	maxZoom: 20
	}).addTo(map);

	// nokia labels
	var nokiaLabel = L.tileLayer('http://{s}.maps.nlp.nokia.com/maptile/2.1/labeltile/newest/normal.day/{z}/{x}/{y}/256/png8?app_id=&token=', {
	subdomains: '1234',
	maxZoom: 20
	}).addTo(map);

	// xmap labels
	var labels = X.labelLayer(wmsUrl, "HERE").addTo(map);

	// set up range splitter
	var range = document.getElementById('range');
	var range2 = document.getElementById('range2');

	function clip() {
	var nw = map.containerPointToLayerPoint([0, 0]),
	se = map.containerPointToLayerPoint(map.getSize()),
	clipX = nw.x + (se.x - nw.x) * range.value;

	nokiaLabel.getContainer().style.clip = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)';
	background.getContainer().style.clip = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
	map._panes.overlayPane.style.clip = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
	}

	function setOpacity() {
	Esri_WorldImagery.setOpacity(range2.value);
	}

	range['oninput' in range ? 'oninput' : 'onchange'] = clip;
	map.on('move', clip);

	range2['oninput' in range2 ? 'oninput' : 'onchange'] = setOpacity;

	// go to luxemburg
	map.setView(new L.LatLng(49.611389, 6.130833), 13);