luqmaan · April 7, 2016 02:38
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; width:100%; }
    </style>
 </head>
 <body>

 <div id='map'></div>
 <script>
 mapboxgl.accessToken = 'pk.eyJ1IjoicGV0ZXJxbGl1IiwiYSI6ImpvZmV0UEEifQ._D4bRmVcGfJvo1wjuOpA1g';
 var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-hybrid-v8',
    center: [-74.50, 40],
    zoom: 3
 });

 var direction = 0, manual = false, speed = 1;

 // create a GeoJSON point to serve as a starting point
 var point = {
  "type": "Point",
  "coordinates": [-74.50, 40]
 };

 // add the GeoJSON above to a new vector tile source
 var source = new mapboxgl.GeoJSONSource({
    data: point
 });

 function setPosition() {
    point.coordinates[0] += speed * Math.sin(direction) / 100;
    point.coordinates[1] += speed * Math.cos(direction) / 100;
    source.setData(point);

    map.setLayoutProperty('drone', 'icon-rotate', direction * (180 / Math.PI));

    if (!manual && Math.random() > 0.95) {
        direction += (Math.random() - 0.5) / 2;
    }

    map.setCenter(point.coordinates);
 }

 map.on('style.load', function () {
    map.addSource('drone', source);

    map.addLayer({
        "id": "drone-glow-strong",
        "type": "circle",
        "source": "drone",
        "paint": {
            "circle-radius": 18,
            "circle-color": "#fff",
            "circle-opacity": 0.4
        }
    });

    map.addLayer({
        "id": "drone-glow",
        "type": "circle",
        "source": "drone",
        "paint": {
            "circle-radius": 40,
            "circle-color": "#fff",
            "circle-opacity": 0.1
        }
    });

    map.addLayer({
        "id": "drone",
        "type": "symbol",
        "source": "drone",
        "layout": {
            "icon-image": "airport-15",
        }
    });

    window.setInterval(setPosition, 10);
 });

 // Add manual control of the airplane with left and right arrow keys, just because
 document.body.addEventListener('keydown', function (e) {
    if (e.which == 37) { // left
        direction -= 0.1;
        manual = true;
    }
    if (e.which == 39) { // right
        direction += 0.1;
        manual = true;
    }
    if (e.which == 38) { // faster
        speed = Math.min(speed + 0.1, 10);
        manual = true;
        e.preventDefault();
    }
    if (e.which == 40) { // slower
        speed = Math.max(speed - 0.1, 0);
        manual = true;
        e.preventDefault();
    }
 }, true);
 </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; width:100%; }
	</style>
	</head>
	<body>

	<div id='map'></div>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoicGV0ZXJxbGl1IiwiYSI6ImpvZmV0UEEifQ._D4bRmVcGfJvo1wjuOpA1g';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/satellite-hybrid-v8',
	center: [-74.50, 40],
	zoom: 3
	});

	var direction = 0, manual = false, speed = 1;

	// create a GeoJSON point to serve as a starting point
	var point = {
	"type": "Point",
	"coordinates": [-74.50, 40]
	};

	// add the GeoJSON above to a new vector tile source
	var source = new mapboxgl.GeoJSONSource({
	data: point
	});

	function setPosition() {
	point.coordinates[0] += speed * Math.sin(direction) / 100;
	point.coordinates[1] += speed * Math.cos(direction) / 100;
	source.setData(point);

	map.setLayoutProperty('drone', 'icon-rotate', direction * (180 / Math.PI));

	if (!manual && Math.random() > 0.95) {
	direction += (Math.random() - 0.5) / 2;
	}

	map.setCenter(point.coordinates);
	}

	map.on('style.load', function () {
	map.addSource('drone', source);

	map.addLayer({
	"id": "drone-glow-strong",
	"type": "circle",
	"source": "drone",
	"paint": {
	"circle-radius": 18,
	"circle-color": "#fff",
	"circle-opacity": 0.4
	}
	});

	map.addLayer({
	"id": "drone-glow",
	"type": "circle",
	"source": "drone",
	"paint": {
	"circle-radius": 40,
	"circle-color": "#fff",
	"circle-opacity": 0.1
	}
	});

	map.addLayer({
	"id": "drone",
	"type": "symbol",
	"source": "drone",
	"layout": {
	"icon-image": "airport-15",
	}
	});

	window.setInterval(setPosition, 10);
	});

	// Add manual control of the airplane with left and right arrow keys, just because
	document.body.addEventListener('keydown', function (e) {
	if (e.which == 37) { // left
	direction -= 0.1;
	manual = true;
	}
	if (e.which == 39) { // right
	direction += 0.1;
	manual = true;
	}
	if (e.which == 38) { // faster
	speed = Math.min(speed + 0.1, 10);
	manual = true;
	e.preventDefault();
	}
	if (e.which == 40) { // slower
	speed = Math.max(speed - 0.1, 0);
	manual = true;
	e.preventDefault();
	}
	}, true);
	</script>

	</body>
	</html>