Move symbol with the keyboard
Control a symbol with keybindings and rotate it
<!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.38.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.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 = '<your access token here>';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-v9',
    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]
};

function setPosition() {
    point.coordinates[0] += speed * Math.sin(direction) / 100;
    point.coordinates[1] += speed * Math.cos(direction) / 100;
    map.getSource('drone').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('load', function () {
    // add the GeoJSON above to a new vector tile source
    map.addSource('drone', { type: 'geojson', data: point });

    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",
            "icon-rotation-alignment": "map"
        }
    });

    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>
Copy example