---
title: "Animate a point | JavaScript maps SDK"
description: "Animate a point position using GeoJSON frame updates."
---
# Animate a point
Animate the position of a point by updating a GeoJSON source on each frame.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
style: MapStyle.STREETS,
center: [0, 0],
zoom: 2
});
const radius = 20;
function pointOnCircle(angle) {
return {
'type': 'Point',
'coordinates': [Math.cos(angle) * radius, Math.sin(angle) * radius]
};
}
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)
});
map.addLayer({
'id': 'point',
'source': 'point',
'type': 'circle',
'paint': {
'circle-radius': 10,
'circle-color': '#007cbf'
}
});
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 / 1000));
// Request the next frame of the animation.
requestAnimationFrame(animateMarker);
}
// Start the animation.
animateMarker(0);
});
```
#### index.html
```html
Animate a point | NPM example | MapTiler SDK JS
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Animate a point
```
## Related examples
### [Animate a line](https://docs.maptiler.com/sdk-js/examples/animate-a-line/)
Examples
Animate lines by updating GeoJSON sources on every frame.
### [Animate a marker](https://docs.maptiler.com/sdk-js/examples/animate-marker/)
Examples
Animate map marker positions by updating locations each frame.
### [Animate a point along a route](https://docs.maptiler.com/sdk-js/examples/animate-point-along-route/)
Examples
Smoothly animate a point along a route using Turf.