tmcw/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.2.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.2.2/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.marker {width:10px;height:10px;background:brown;border-radius:5px;margin:-5px 0px 0px -5px;position:absolute;}
#markerpane {position:absolute; top:0; bottom:0; width:100%;pointer-events:none}
#controls {position:absolute;top:0;left:0;padding:10px;background:#fff;}
</style>
</head>
<body>

<div id='map'></div>
<div id='markerpane'></div>
<div id='controls'>
    <input id='num' min=1 max=1000 type='range'></input>
    <h1 id='count'></h1>
</div>
<script>

var centermarker = [37, -122];

mapboxgl.accessToken = 'pk.eyJ1IjoicGV0ZXJxbGl1IiwiYSI6ImpvZmV0UEEifQ._D4bRmVcGfJvo1wjuOpA1g';

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'https://www.mapbox.com/mapbox-gl-styles/styles/outdoors-v4.json', //stylesheet location
    center: centermarker, // starting position
    zoom: 1, // starting zoom
});

var coords = [];

function generateMarkers(n) {
    $('#markerpane').html((new Array(n)).join('<div class="marker"></div>'));
    coords = [];
    for (var i = 0; i < n; i++) {
        coords.push([
            (Math.random() - 0.5) * 180,
            (Math.random() - 0.5) * 360]);
    }
    updatemarkers();
}

generateMarkers(100);

map.on('move', updatemarkers);

document.getElementById('num').onchange = function() {
    generateMarkers(+this.value);
    document.getElementById('count').innerHTML = this.value;
}

function updatemarkers() {
    $('.marker').each(function(i) {
       $(this).css('-webkit-transform', 'translate(' +
               map.project(coords[i]).x + 'px,' +
               map.project(coords[i]).y + 'px)');
    });
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.2.2/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.2.2/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	.marker {width:10px;height:10px;background:brown;border-radius:5px;margin:-5px 0px 0px -5px;position:absolute;}
	#markerpane {position:absolute; top:0; bottom:0; width:100%;pointer-events:none}
	#controls {position:absolute;top:0;left:0;padding:10px;background:#fff;}
	</style>
	</head>
	<body>

	<div id='map'></div>
	<div id='markerpane'></div>
	<div id='controls'>
	<input id='num' min=1 max=1000 type='range'></input>
	<h1 id='count'></h1>
	</div>
	<script>

	var centermarker = [37, -122];

	mapboxgl.accessToken = 'pk.eyJ1IjoicGV0ZXJxbGl1IiwiYSI6ImpvZmV0UEEifQ._D4bRmVcGfJvo1wjuOpA1g';

	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'https://www.mapbox.com/mapbox-gl-styles/styles/outdoors-v4.json', //stylesheet location
	center: centermarker, // starting position
	zoom: 1, // starting zoom
	});

	var coords = [];

	function generateMarkers(n) {
	$('#markerpane').html((new Array(n)).join('<div class="marker"></div>'));
	coords = [];
	for (var i = 0; i < n; i++) {
	coords.push([
	(Math.random() - 0.5) * 180,
	(Math.random() - 0.5) * 360]);
	}
	updatemarkers();
	}

	generateMarkers(100);

	map.on('move', updatemarkers);

	document.getElementById('num').onchange = function() {
	generateMarkers(+this.value);
	document.getElementById('count').innerHTML = this.value;
	}

	function updatemarkers() {
	$('.marker').each(function(i) {
	$(this).css('-webkit-transform', 'translate(' +
	map.project(coords[i]).x + 'px,' +
	map.project(coords[i]).y + 'px)');
	});
	}
	</script>
	</body>
	</html>