luqmaan · April 8, 2016 02:42
diff --git a/index.html b/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 src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; left: 0; right: 0; width:100%; height: 100%; }
        #vehicle {
            height: 10px;
            width: 10px;
            margin-left: -5px;
            margin-top: -5px;
            background: #fff;
            border-radius: 5px;
            position: absolute;
        }
    </style>
 </head>
 <body>

 <div id='map'></div>
 <div id='vehicle'></div>
 <script>
 mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpbG10dnA3NzY3OTZ0dmtwejN2ZnUycjYifQ.1W5oTOnWXQ9R1w8u3Oo1yA';
 var map = window.map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v8',
    center: [-97.7197243, 30.263213],
    zoom: 13,
 });

 map.on('boxzoomcancel',  function() { console.log('boxzoomcancel'); });
 map.on('boxzoomend',  function() { console.log('boxzoomend'); });
 map.on('boxzoomstart',  function() { console.log('boxzoomstart'); });
 map.on('click',  function() { console.log('click'); });
 map.on('contextmenu',  function() { console.log('contextmenu'); });
 map.on('dblclick',  function() { console.log('dblclick'); });
 map.on('drag',  function() { console.log('drag'); });
 map.on('dragend',  function() { console.log('dragend'); });
 map.on('dragstart',  function() { console.log('dragstart'); });
 map.on('load',  function() { console.log('load'); });
 map.on('move',  function() { console.log('move'); });
 map.on('moveend',  function() { console.log('moveend'); });
 map.on('movestart',  function() { console.log('movestart'); });
 map.on('rotate',  function() { console.log('rotate'); });
 map.on('rotateend',  function() { console.log('rotateend'); });
 map.on('rotatestart',  function() { console.log('rotatestart'); });
 map.on('touchcancel',  function() { console.log('touchcancel'); });
 map.on('touchend',  function() { console.log('touchend'); });
 map.on('touchmove',  function() { console.log('touchmove'); });
 map.on('touchstart',  function() { console.log('touchstart'); });
 map.on('webglcontextlost',  function() { console.log('webglcontextlost'); });
 map.on('webglcontextrestored',  function() { console.log('webglcontextrestored'); });
 map.on('zoom',  function() { console.log('zoom'); });
 map.on('zoomend',  function() { console.log('zoomend'); });
 map.on('zoomstart',  function() { console.log('zoomstart'); });

 var vehicle = window.vehicle = document.querySelector('#vehicle');
 function draw() {
    var point = map.project([-97.7197243, 30.263213]);
    vehicle.style.transform = 'translate3d(' + point.x + 'px, ' + point.y + 'px, 0px)';
 }

 map.on('style.load', function() {
    map.addSource("markers", {
        type: "geojson",
        data: {
            type: 'Point',
            coordinates: [-97.7197243, 30.263213],
        },
    });
    map.addLayer({
        "id": "markers",
        "type": "circle",
        "source": "markers",
        "paint": {
            "circle-color": "#a3a",
            "circle-radius": 10,
        }
    });

    requestAnimationFrame(draw);
 });

 map.on('dragstart', function() { requestAnimationFrame(draw); });
 map.on('dragend', function() { requestAnimationFrame(draw); });
 map.on('drag', function() { requestAnimationFrame(draw); });

 map.on('movestart', function() { requestAnimationFrame(draw); });
 map.on('moveend', function() { requestAnimationFrame(draw); });
 map.on('move', function() { requestAnimationFrame(draw); });

 map.on('zoomstart', function() { requestAnimationFrame(draw); });
 map.on('zoomend', function() { requestAnimationFrame(draw); });
 map.on('zoom', function() { requestAnimationFrame(draw); });


 </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 src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; left: 0; right: 0; width:100%; height: 100%; }
	#vehicle {
	height: 10px;
	width: 10px;
	margin-left: -5px;
	margin-top: -5px;
	background: #fff;
	border-radius: 5px;
	position: absolute;
	}
	</style>
	</head>
	<body>

	<div id='map'></div>
	<div id='vehicle'></div>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpbG10dnA3NzY3OTZ0dmtwejN2ZnUycjYifQ.1W5oTOnWXQ9R1w8u3Oo1yA';
	var map = window.map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v8',
	center: [-97.7197243, 30.263213],
	zoom: 13,
	});

	map.on('boxzoomcancel', function() { console.log('boxzoomcancel'); });
	map.on('boxzoomend', function() { console.log('boxzoomend'); });
	map.on('boxzoomstart', function() { console.log('boxzoomstart'); });
	map.on('click', function() { console.log('click'); });
	map.on('contextmenu', function() { console.log('contextmenu'); });
	map.on('dblclick', function() { console.log('dblclick'); });
	map.on('drag', function() { console.log('drag'); });
	map.on('dragend', function() { console.log('dragend'); });
	map.on('dragstart', function() { console.log('dragstart'); });
	map.on('load', function() { console.log('load'); });
	map.on('move', function() { console.log('move'); });
	map.on('moveend', function() { console.log('moveend'); });
	map.on('movestart', function() { console.log('movestart'); });
	map.on('rotate', function() { console.log('rotate'); });
	map.on('rotateend', function() { console.log('rotateend'); });
	map.on('rotatestart', function() { console.log('rotatestart'); });
	map.on('touchcancel', function() { console.log('touchcancel'); });
	map.on('touchend', function() { console.log('touchend'); });
	map.on('touchmove', function() { console.log('touchmove'); });
	map.on('touchstart', function() { console.log('touchstart'); });
	map.on('webglcontextlost', function() { console.log('webglcontextlost'); });
	map.on('webglcontextrestored', function() { console.log('webglcontextrestored'); });
	map.on('zoom', function() { console.log('zoom'); });
	map.on('zoomend', function() { console.log('zoomend'); });
	map.on('zoomstart', function() { console.log('zoomstart'); });

	var vehicle = window.vehicle = document.querySelector('#vehicle');
	function draw() {
	var point = map.project([-97.7197243, 30.263213]);
	vehicle.style.transform = 'translate3d(' + point.x + 'px, ' + point.y + 'px, 0px)';
	}

	map.on('style.load', function() {
	map.addSource("markers", {
	type: "geojson",
	data: {
	type: 'Point',
	coordinates: [-97.7197243, 30.263213],
	},
	});
	map.addLayer({
	"id": "markers",
	"type": "circle",
	"source": "markers",
	"paint": {
	"circle-color": "#a3a",
	"circle-radius": 10,
	}
	});

	requestAnimationFrame(draw);
	});

	map.on('dragstart', function() { requestAnimationFrame(draw); });
	map.on('dragend', function() { requestAnimationFrame(draw); });
	map.on('drag', function() { requestAnimationFrame(draw); });

	map.on('movestart', function() { requestAnimationFrame(draw); });
	map.on('moveend', function() { requestAnimationFrame(draw); });
	map.on('move', function() { requestAnimationFrame(draw); });

	map.on('zoomstart', function() { requestAnimationFrame(draw); });
	map.on('zoomend', function() { requestAnimationFrame(draw); });
	map.on('zoom', function() { requestAnimationFrame(draw); });


	</script>

	</body>
	</html>