Pabloska/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Swipe between layers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js'></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
  body { margin:0; padding:0;font-family: "Lato",sans-serif; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>


<style>
.range {
  position:absolute;
  width:100%;
  margin 3px black
  }
.leaflet-top .leaflet-control-zoom {
  top:20px;
  }
</style>

<div style="margin 3px black"  id='map'></div>
<input id='range' class='range' type='range' min='0' max='1.0' step='any' />


</div>

<div style ="text-shadow: 2px 2px 5px grey;font-size:16px;color:white;position: absolute;left:60px;top:30px;border-bottom:-5px;background:transparent;padding-left:0px;text-align: left;width:35%;font-weight:bold">Aire Mbar, Mauritania : 2003 ( September ) <span style="">Vs</span> 2013 ( May )</span><p style="font-weight:normal;font-size:14px">Aire Mbar is located in the south of Mauritania near the river Senegal. The river, which defines the border line between Mauritania and Senegal, overflows every summer when the rains start. At this time the water arrives up to 20 meters of the houses. This is time of joy and happiness for everybody at the village. The older can go fishing and the younger ones can go swimming and play in the water.</p></div>


<script>
 var map = L.map('map');
var HERE_hybridDay = L.tileLayer('http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/{type}/{mapID}/hybrid.day/{z}/{x}/{y}/{size}/{format}?app_id={app_id}&app_code={app_code}&lg={language}', {
	attribution: '&copy; Developed by Pablo Gallego Cadabon - Using:QGIS/GDAL/Leaflet',
	subdomains: '1234',
	mapID: 'newest',
	app_id: 'fsCaXBC9VTxiiEqpQsD6',
	app_code: 'hIjAGua7KE3xjXNrOgMGww',
	base: 'aerial',
	maxZoom: 22,
	type: 'maptile',
	language: 'eng',
	format: 'png8',
	size: '256'
})

		.addTo(map);


  var overlay = L.tileLayer('http://migrantreport.org/map/tiles/aire_mbar/{z}/{x}/{y}.png').addTo(map);
  var range = document.getElementById('range');
  function clip() {
    var nw = map.containerPointToLayerPoint([0, 0]),
        se = map.containerPointToLayerPoint(map.getSize()),
        clipX = nw.x + (se.x - nw.x) * range.value;
    overlay.getContainer().style.clip ='rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
  }
  range['oninput' in range ? 'oninput' : 'onchange'] = clip;
  map.on('move', clip);
  map.setView([16.411033, -14.055398], 18);
 // map.setView([16.298135, -14.133520], 17);
  //map.setView([34.723855, 36.714245], 17);
  clip();
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Swipe between layers</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js'></script>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<style>
	body { margin:0; padding:0;font-family: "Lato",sans-serif; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>


	<style>
	.range {
	position:absolute;
	width:100%;
	margin 3px black
	}
	.leaflet-top .leaflet-control-zoom {
	top:20px;
	}
	</style>

	<div style="margin 3px black" id='map'></div>
	<input id='range' class='range' type='range' min='0' max='1.0' step='any' />



	</div>

	<div style ="text-shadow: 2px 2px 5px grey;font-size:16px;color:white;position: absolute;left:60px;top:30px;border-bottom:-5px;background:transparent;padding-left:0px;text-align: left;width:35%;font-weight:bold">Aire Mbar, Mauritania : 2003 ( September ) <span style="">Vs</span> 2013 ( May )</span><p style="font-weight:normal;font-size:14px">Aire Mbar is located in the south of Mauritania near the river Senegal. The river, which defines the border line between Mauritania and Senegal, overflows every summer when the rains start. At this time the water arrives up to 20 meters of the houses. This is time of joy and happiness for everybody at the village. The older can go fishing and the younger ones can go swimming and play in the water.</p></div>


	<script>
	var map = L.map('map');
	var HERE_hybridDay = L.tileLayer('http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/{type}/{mapID}/hybrid.day/{z}/{x}/{y}/{size}/{format}?app_id={app_id}&app_code={app_code}&lg={language}', {
	attribution: '© Developed by Pablo Gallego Cadabon - Using:QGIS/GDAL/Leaflet',
	subdomains: '1234',
	mapID: 'newest',
	app_id: 'fsCaXBC9VTxiiEqpQsD6',
	app_code: 'hIjAGua7KE3xjXNrOgMGww',
	base: 'aerial',
	maxZoom: 22,
	type: 'maptile',
	language: 'eng',
	format: 'png8',
	size: '256'
	})

	.addTo(map);







	var overlay = L.tileLayer('http://migrantreport.org/map/tiles/aire_mbar/{z}/{x}/{y}.png').addTo(map);
	var range = document.getElementById('range');
	function clip() {
	var nw = map.containerPointToLayerPoint([0, 0]),
	se = map.containerPointToLayerPoint(map.getSize()),
	clipX = nw.x + (se.x - nw.x) * range.value;
	overlay.getContainer().style.clip ='rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
	}
	range['oninput' in range ? 'oninput' : 'onchange'] = clip;
	map.on('move', clip);
	map.setView([16.411033, -14.055398], 18);
	// map.setView([16.298135, -14.133520], 17);
	//map.setView([34.723855, 36.714245], 17);
	clip();
	</script>

	</body>
	</html>