---
title: "Add live realtime data | JavaScript maps SDK"
description: "Use real-time GeoJSON data streams to move a symbol on your map."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Add live realtime data
Use live real-time GeoJSON data streams to move a [`symbol`](https://docs.maptiler.com/gl-style-specification/layers/#symbol) on your map.
### 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,
zoom: 0
});
const url = 'https://api.wheretheiss.at/v1/satellites/25544';
map.on('load', function () {
const request = new XMLHttpRequest();
window.setInterval(function () {
// make a GET request to parse the GeoJSON at the url
request.open('GET', url, true);
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
// retrieve the JSON from the response
const json = JSON.parse(this.response);
const { latitude, longitude } = json;
const data = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [longitude, latitude]
}
}
]
}
// update the drone symbol's location on the map
map.getSource('drone').setData(data);
// fly the map to the drone's current location
map.flyTo({
center: [longitude, latitude],
zoom: 7,
speed: 0.5
});
}
};
request.send();
}, 2000);
map.addSource('drone', { type: 'geojson', data: url });
map.addLayer({
'id': 'drone',
'type': 'symbol',
'source': 'drone',
'layout': {
'icon-image': 'aquarium'
}
});
});
```
#### index.html
```html
Add live realtime data | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Add live realtime data
```
## Related examples
### [Update a feature in realtime](https://docs.maptiler.com/sdk-js/examples/live-update-feature/)
Examples
Change an existing feature on your map in real-time by updating its data.
### [Animate a point](https://docs.maptiler.com/sdk-js/examples/animate-point-along-line/)
Examples
Animate a point position using GeoJSON frame updates.