Update a feature in realtime

Change an existing feature on your map in real-time by updating its data.


npm install --save @maptiler/sdk

main.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.OUTDOOR, 
    zoom: 0
});

map.on('load', function () {
    // We use D3 to fetch the JSON here so that we can parse and use it separately
    // from GL JS's use in the added source. You can use any request method (library
    // or otherwise) that you want.
    d3.json(
        'https://docs.maptiler.com/sdk-js/assets/hike.geojson',
        function (err, data) {
            if (err) throw err;

            // 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 = window.setInterval(function () {
                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);
        }
    );
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Update a feature in realtime | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Update a feature in realtime</title>
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
<link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
<style>
  body {margin: 0; padding: 0;}
  #map {position: absolute; top: 0; bottom: 0; width: 100%;}
</style>
</head>
<body>
<div id="map"></div>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
        container: 'map',
        style: maptilersdk.MapStyle.OUTDOOR, 
        zoom: 0
    });

    map.on('load', function () {
        // We use D3 to fetch the JSON here so that we can parse and use it separately
        // from GL JS's use in the added source. You can use any request method (library
        // or otherwise) that you want.
        d3.json(
            'https://docs.maptiler.com/sdk-js/assets/hike.geojson',
            function (err, data) {
                if (err) throw err;

                // 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 = window.setInterval(function () {
                    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>