g14a/map.html

## map.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Animate a point</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=yes' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.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.eyJ1IjoibXVudWt1dGxhIiwiYSI6ImNqaWFoZDE1YzAxdnEzcG54dDd1M3dhbWEifQ.JdHu_4E9Ky3n-73LSUfwdQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [0, 0],
    zoom: 2
});

var radius = 10 ;

function pointOnCircle(lat, long) {
    return {
        "type": "Point",
        "coordinates": [
            lat,
            long
        ]
    };
}

map.on('load', function () {
    // Add a source and layer displaying a point which will be animated in a circle.
    map.addSource('point', {
        "type": "geojson",
        "data": pointOnCircle(0, 10)
    });

    map.addSource('point1', {
        "type": "geojson",
        "data": pointOnCircle(10, 2)
    });

    map.addSource('point2', {
        "type": "geojson",
        "data": pointOnCircle(30, 40)
    });


    map.addLayer({
        "id": "point",
        "source": "point",
        "type": "circle",
        "paint": {
            "circle-radius": 6,
            "circle-color": "#ff0000"
        }
    });

    map.addLayer({
        "id": "point1",
        "source": "point1",
        "type": "circle",
        "paint": {
            "circle-radius": 6,
            "circle-color": "#ff0000"
        }
    });

    map.addLayer({
        "id": "point2",
        "source": "point2",
        "type": "circle",
        "paint": {
            "circle-radius": 6,
            "circle-color": "#ff0000"
        }
    });


    function animateMarker(timestamp) {
        // Update the data to a new position based on the animation timestamp. The
        // divisor in the expression `timestamp / 1000` controls the animation speed.
        map.getSource('point').setData(pointOnCircle(timestamp / 900));

        // Request the next frame of the animation.
        requestAnimationFrame(animateMarker);
    }

    // Start the animation.
    animateMarker(0);

    function animateMarker1(timestamp) {
        // Update the data to a new position based on the animation timestamp. The
        // divisor in the expression `timestamp / 1000` controls the animation speed.
        map.getSource('point1').setData(pointOnCircle(timestamp / 1000));

        // Request the next frame of the animation.
        requestAnimationFrame(animateMarker1);
    }

    // Start the animation.
    animateMarker1(10);

    function animateMarker2(timestamp) {
        // Update the data to a new position based on the animation timestamp. The
        // divisor in the expression `timestamp / 1000` controls the animation speed.
        map.getSource('point2').setData(pointOnCircle(timestamp / 1100));

        // Request the next frame of the animation.
        requestAnimationFrame(animateMarker2);
    }

    // Start the animation.
    animateMarker2(20);
});
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Animate a point</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=yes' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.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.eyJ1IjoibXVudWt1dGxhIiwiYSI6ImNqaWFoZDE1YzAxdnEzcG54dDd1M3dhbWEifQ.JdHu_4E9Ky3n-73LSUfwdQ';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v9',
	center: [0, 0],
	zoom: 2
	});

	var radius = 10 ;

	function pointOnCircle(lat, long) {
	return {
	"type": "Point",
	"coordinates": [
	lat,
	long
	]
	};
	}

	map.on('load', function () {
	// Add a source and layer displaying a point which will be animated in a circle.
	map.addSource('point', {
	"type": "geojson",
	"data": pointOnCircle(0, 10)
	});

	map.addSource('point1', {
	"type": "geojson",
	"data": pointOnCircle(10, 2)
	});

	map.addSource('point2', {
	"type": "geojson",
	"data": pointOnCircle(30, 40)
	});


	map.addLayer({
	"id": "point",
	"source": "point",
	"type": "circle",
	"paint": {
	"circle-radius": 6,
	"circle-color": "#ff0000"
	}
	});

	map.addLayer({
	"id": "point1",
	"source": "point1",
	"type": "circle",
	"paint": {
	"circle-radius": 6,
	"circle-color": "#ff0000"
	}
	});

	map.addLayer({
	"id": "point2",
	"source": "point2",
	"type": "circle",
	"paint": {
	"circle-radius": 6,
	"circle-color": "#ff0000"
	}
	});


	function animateMarker(timestamp) {
	// Update the data to a new position based on the animation timestamp. The
	// divisor in the expression `timestamp / 1000` controls the animation speed.
	map.getSource('point').setData(pointOnCircle(timestamp / 900));

	// Request the next frame of the animation.
	requestAnimationFrame(animateMarker);
	}

	// Start the animation.
	animateMarker(0);

	function animateMarker1(timestamp) {
	// Update the data to a new position based on the animation timestamp. The
	// divisor in the expression `timestamp / 1000` controls the animation speed.
	map.getSource('point1').setData(pointOnCircle(timestamp / 1000));

	// Request the next frame of the animation.
	requestAnimationFrame(animateMarker1);
	}

	// Start the animation.
	animateMarker1(10);

	function animateMarker2(timestamp) {
	// Update the data to a new position based on the animation timestamp. The
	// divisor in the expression `timestamp / 1000` controls the animation speed.
	map.getSource('point2').setData(pointOnCircle(timestamp / 1100));

	// Request the next frame of the animation.
	requestAnimationFrame(animateMarker2);
	}

	// Start the animation.
	animateMarker2(20);
	});
	</script>

	</body>
	</html>