nbumbarger/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Gara Djebilet Band Ratio</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
body {font-family:sans-serif;}
input[type=range]{
  -webkit-appearance:none;
  height:3px;
  background:#fff;
  border-radius:3px;
  }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  background-color:#ddd;
  box-shadow: 0 0 4px #333;
  height:20px;
  width:20px;
  border-radius:50%;
  }
input[type=range]:focus {
    outline: none;
}
p {
  color:#fff;
  position:absolute;
}
.left {
  left:25%;
}
.right {
  right:25%;
}
.range {
  position:absolute;
  width:100%;
  top:95%;
  z-index:99;
  }
</style>

<div id='map'></div>
<p class='left'>OLE 4/6 5/2 6/7 = RGB</p>
<p class='right'>True Color</p>
<input id='range' class='range' type='range' min='0' max='1.0' step='any' />

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiYXN0cm9kaWdpdGFsIiwiYSI6ImNVb1B0ZkEifQ.IrJoULY2VMSBNFqHLrFYew';
var map = L.mapbox.map('map', 'mapbox.satellite')
    .setView([26.9, -7.2], 11);

var original = L.mapbox.tileLayer('astrodigital.o4po94dl'),
    overlay = L.mapbox.tileLayer('astrodigital.7uys0pb9'),
    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.addLayer(original)
  .addLayer(overlay);

map.on('move', clip);

clip();
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Gara Djebilet Band Ratio</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
	<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<style>
	body {font-family:sans-serif;}
	input[type=range]{
	-webkit-appearance:none;
	height:3px;
	background:#fff;
	border-radius:3px;
	}
	input[type=range]::-webkit-slider-thumb{
	-webkit-appearance:none;
	background-color:#ddd;
	box-shadow: 0 0 4px #333;
	height:20px;
	width:20px;
	border-radius:50%;
	}
	input[type=range]:focus {
	outline: none;
	}
	p {
	color:#fff;
	position:absolute;
	}
	.left {
	left:25%;
	}
	.right {
	right:25%;
	}
	.range {
	position:absolute;
	width:100%;
	top:95%;
	z-index:99;
	}
	</style>

	<div id='map'></div>
	<p class='left'>OLE 4/6 5/2 6/7 = RGB</p>
	<p class='right'>True Color</p>
	<input id='range' class='range' type='range' min='0' max='1.0' step='any' />

	<script>
	L.mapbox.accessToken = 'pk.eyJ1IjoiYXN0cm9kaWdpdGFsIiwiYSI6ImNVb1B0ZkEifQ.IrJoULY2VMSBNFqHLrFYew';
	var map = L.mapbox.map('map', 'mapbox.satellite')
	.setView([26.9, -7.2], 11);

	var original = L.mapbox.tileLayer('astrodigital.o4po94dl'),
	overlay = L.mapbox.tileLayer('astrodigital.7uys0pb9'),
	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.addLayer(original)
	.addLayer(overlay);

	map.on('move', clip);

	clip();
	</script>

	</body>
	</html>