Update a feature in realtime
Change an existing feature on your map in real-time by updating its data.
<!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" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.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>goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map',style: 'https://tiles.goong.io/assets/goong_map_web.json',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.goong.io/assets/hike.geojson',function (err, data) {if (err) throw err; // save full coordinate list for latervar 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 mapvar i = 0;var 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>