bsudekum/gist:5217407

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
  <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0;}
    #map { position:absolute; top:0; bottom:0; right:0; width:50%; }
    #retinaMap { position:absolute; top:0; bottom:0; left:0; width:50%; }
    #screen-quality {
        z-index: 5;
        position: absolute;
        margin: 15px;
        font-family:helvetica;
        background: white;
        text-align: center;
        right:0;
    }
  </style>
</head>
<body>
    <div id='map'></div>
    <div id='retinaMap'></div>
    <marque><div id='screen-quality'></div></marque>
<script>
console.log('hi')
var map = mapbox.map('map').zoom(5);
var retinaMap = mapbox.map('retinaMap').zoom(5);


var retina = window.devicePixelRatio >= 2;
var screenQuality = document.getElementById('screen-quality')

if (retina) {
    // Retina tiles are sized 1/2 of normal tiles for twice the pixel
    // density
    map.tileSize = { x: 128, y: 128 };
    // use a retina tileset
    map.addLayer(mapbox.layer().id('examples.map-zq0f1vuc'));
    document.getElementById('screen-quality').innerHTML = 'Nice You are looking at Retina tiles';
} else {
    // use a standard tileset
    map.addLayer(mapbox.layer().id('examples.map-vyofok3q'));
    console.log('Sorry you do not have a retina screen')
    document.getElementById('screen-quality').innerHTML = 'Sorry you do not have a retina screen';
}

retinaMap.addLayer(mapbox.layer().id('examples.map-vyofok3q'));

map.centerzoom({ lat: 48.8556, lon: 2.3548 }, 14);
retinaMap.centerzoom({ lat: 48.8556, lon: 2.3548 }, 14);


</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0;}
	#map { position:absolute; top:0; bottom:0; right:0; width:50%; }
	#retinaMap { position:absolute; top:0; bottom:0; left:0; width:50%; }
	#screen-quality {
	z-index: 5;
	position: absolute;
	margin: 15px;
	font-family:helvetica;
	background: white;
	text-align: center;
	right:0;
	}
	</style>
	</head>
	<body>
	<div id='map'></div>
	<div id='retinaMap'></div>
	<marque><div id='screen-quality'></div></marque>
	<script>
	console.log('hi')
	var map = mapbox.map('map').zoom(5);
	var retinaMap = mapbox.map('retinaMap').zoom(5);


	var retina = window.devicePixelRatio >= 2;
	var screenQuality = document.getElementById('screen-quality')

	if (retina) {
	// Retina tiles are sized 1/2 of normal tiles for twice the pixel
	// density
	map.tileSize = { x: 128, y: 128 };
	// use a retina tileset
	map.addLayer(mapbox.layer().id('examples.map-zq0f1vuc'));
	document.getElementById('screen-quality').innerHTML = 'Nice You are looking at Retina tiles';
	} else {
	// use a standard tileset
	map.addLayer(mapbox.layer().id('examples.map-vyofok3q'));
	console.log('Sorry you do not have a retina screen')
	document.getElementById('screen-quality').innerHTML = 'Sorry you do not have a retina screen';
	}

	retinaMap.addLayer(mapbox.layer().id('examples.map-vyofok3q'));

	map.centerzoom({ lat: 48.8556, lon: 2.3548 }, 14);
	retinaMap.centerzoom({ lat: 48.8556, lon: 2.3548 }, 14);


	</script>
	</body>
	</html>