Update a feature in realtime | Mapbox GL JS

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.

JavaScript

React

JavaScript

React


<!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.12.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/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 Studio
        style: '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 later
        const coordinates = data.features[0].geometry.coordinates;

        // start by showing just the first coordinate
        data.features[0].geometry.coordinates = [coordinates[0]];

        // add it to the map
        map.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 viewport
        map.jumpTo({ 'center': coordinates[0], 'zoom': 14 });
        map.setPitch(30);

        // on a regular basis, add more coordinates from the saved list and update the map
        let 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>

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

JavaScript

React


import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  useEffect(() => {
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/satellite-v9',
      zoom: 0
    });

    mapRef.current.on('load', async () => {
      const response = await fetch(
        'https://docs.mapbox.com/mapbox-gl-js/assets/hike.geojson'
      );
      const data = await response.json();
      const coordinates = data.features[0].geometry.coordinates;

      data.features[0].geometry.coordinates = [coordinates[0]];

      mapRef.current.addSource('trace', { type: 'geojson', data: data });
      mapRef.current.addLayer({
        id: 'trace',
        type: 'line',
        source: 'trace',
        paint: {
          'line-color': 'yellow',
          'line-opacity': 0.75,
          'line-width': 5
        }
      });

      mapRef.current.jumpTo({ center: coordinates[0], zoom: 14 });
      mapRef.current.setPitch(30);

      let i = 0;
      const timer = setInterval(() => {
        if (i < coordinates.length) {
          data.features[0].geometry.coordinates.push(coordinates[i]);
          mapRef.current.getSource('trace').setData(data);
          mapRef.current.panTo(coordinates[i]);
          i++;
        } else {
          window.clearInterval(timer);
        }
      }, 10);
    });
  }, []);

  return <div ref={mapContainerRef} id="map" style={{ height: '100%' }} />;
};

export default MapboxExample;

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

Additional Developer Resources

Mapbox Developer Discord

Developer Cheatsheet

Mapbox Support

Ask AI

Was this example helpful?