Browser support

Internationalization support

Change an existing feature on your map in realtime by updating its data

Mapbox GL unsupported

Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.

<!DOCTYPE html><html><head><metacharset='utf-8'/><title>Update a feature in realtime</title><metaname='viewport'content='initial-scale=1,maximum-scale=1,user-scalable=no'/><scriptsrc='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script><linkhref='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css'rel='stylesheet'/><style>body{margin:0;padding:0;}#map{position:absolute;top:0;bottom:0;width:100%;}</style></head><body><divid='map'></div><scriptsrc='//d3js.org/d3.v3.min.js'charset='utf-8'></script><script>
mapboxgl.accessToken ='<your access token here>';var map =newmapboxgl.Map({
container:'map',
style:'mapbox://styles/mapbox/satellite-v9',
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.mapbox.com/mapbox-gl-js/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 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 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>