Add live realtime data
Use realtime location data streams to move a symbol
on your map with setInterval
.
Referencing images in a style's sprite
This example uses the Mapbox Streets style. The icon-image
used in this example comes from the Mapbox Streets style's sprite.
To view all available images in a style's sprite or add additional images, open the style in Mapbox Studio and click the Images tab. To add a new image to the style at runtime see the Add an icon to the map example.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Add live realtime data</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><div id="map"></div> <script> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';const map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v11',zoom: 0}); map.on('load', async () => {// Get the initial location of the International Space Station (ISS).const geojson = await getLocation();// Add the ISS location as a source.map.addSource('iss', {type: 'geojson',data: geojson});// Add the rocket symbol layer to the map.map.addLayer({'id': 'iss','type': 'symbol','source': 'iss','layout': {// This icon is a part of the Mapbox Streets style.// To view all images available in a Mapbox style, open// the style in Mapbox Studio and click the "Images" tab.// To add a new image to the style at runtime see// https://docs.mapbox.com/mapbox-gl-js/example/add-image/'icon-image': 'rocket-15'}}); // Update the source from the API every 2 seconds.const updateSource = setInterval(async () => {const geojson = await getLocation(updateSource);map.getSource('iss').setData(geojson);}, 2000); async function getLocation(updateSource) {// Make a GET request to the API and return the location of the ISS.try {const response = await fetch('https://api.wheretheiss.at/v1/satellites/25544',{ method: 'GET' });const { latitude, longitude } = await response.json();// Fly the map to the location.map.flyTo({center: [longitude, latitude],speed: 0.5});// Return the location of the ISS as GeoJSON.return {'type': 'FeatureCollection','features': [{'type': 'Feature','geometry': {'type': 'Point','coordinates': [longitude, latitude]}}]};} catch (err) {// If the updateSource interval is defined, clear the interval to stop updating the source.if (updateSource) clearInterval(updateSource);throw new Error(err);}}});</script> </body></html>