Update a feature in realtime
This example shows how to change an existing feature on a map by updating its data.
It shows the progression of a path by adding new coordinates to a feature in a line
layer. This approach is useful for visualizing real-time data sources.
Calling setData
begins a new render cycle which makes the updates appear in real time without explicitly creating an animation. panTo
then follows the leading edge of the line to keep it on screen.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Update a feature in realtime</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v3.0.1/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',// Choose from Mapbox's core styles, or make your own style with Mapbox Studiostyle: 'mapbox://styles/mapbox/satellite-v9',zoom: 0}); map.on('load', async () => {// We fetch the JSON here so that we can parse and use it separately// from GL JS's use in the added source.const response = await fetch('https://docs.mapbox.com/mapbox-gl-js/assets/hike.geojson');const data = await response.json();// save full coordinate list for laterconst coordinates = data.features[0].geometry.coordinates; // start by showing just the first coordinatedata.features[0].geometry.coordinates = [coordinates[0]]; // add it to the mapmap.addSource('trace', { type: 'geojson', data: data });map.addLayer({'id': 'trace','type': 'line','source': 'trace','paint': {'line-color': 'yellow','line-opacity': 0.75,'line-width': 5}}); // setup the viewportmap.jumpTo({ 'center': coordinates[0], 'zoom': 14 });map.setPitch(30); // on a regular basis, add more coordinates from the saved list and update the maplet i = 0;const timer = setInterval(() => {if (i < coordinates.length) {data.features[0].geometry.coordinates.push(coordinates[i]);map.getSource('trace').setData(data);map.panTo(coordinates[i]);i++;} else {window.clearInterval(timer);}}, 10);});</script> </body></html>
Was this example helpful?