How to automatically update Mapbox when a website updated

Question

I am looking to add markers to Mapbox. These markers will contain links to other websites and I am looking to automatically plot real-time data on the map when the website updates its articles, with a link to the website + shortened version of whatever is being said on the article. Could anyone share any tips?

score 0 · Answer 1 · answered Jan 04 '21 at 14:53

Can you please share what you have done so far? You question is very general. Therefore I can only advise to not update the complete website with each change, but use jQuery and update changes incrementally.

In Mapbox, you can add layers. These layers have data sources. When you update the data sources for the layers (that already have been created), the data displayed will be updated with them.

Pleas see this example that adds a periodically updating layer:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add live realtime data</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.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>
    mapboxgl.accessToken = "<Access Token>";
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 0
});
 
var url = 'https://wanderdrone.appspot.com/';
map.on('load', function () {
var request = new XMLHttpRequest();
window.setInterval(function () {
// make a GET request to parse the GeoJSON at the url
request.open('GET', url, true);
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
// retrieve the JSON from the response
var json = JSON.parse(this.response);
 
// update the drone symbol's location on the map
map.getSource('drone').setData(json);
 
// fly the map to the drone's current location
map.flyTo({
center: json.geometry.coordinates,
speed: 0.5
});
}
};
request.send();
}, 2000);
 
map.addSource('drone', { type: 'geojson', data: url });
map.addLayer({
'id': 'drone',
'type': 'symbol',
'source': 'drone',
'layout': {
'icon-image': 'rocket-15'
}
});
});
</script>
 
</body>
</html>

How to automatically update Mapbox when a website updated

1 Answers1