Refresh MapBox Markers on a Timer?

Question

I'm pretty new to JS apologies if this is basic. I'm putting together an application that pushes geo data from mobile up to MongoDB then plotting it on my browser with MapBox. I was able to follow this pretty good tutorial to get to the point where I can see all my datapoints.

Now I want to make it so that the page automatically refreshes by requesting an update from the server and reloading the markers accordingly. I figured out that I am able to set up a timer function like so:

const timer = setInterval(() => {
          console.log("Hello after 5s!");

}, 5000);

Now I need to know how to make it update the map. I see that the MapBox API has map.on("load"/"dblclick").. functions however not clear to me how to achieve my goal. How do I make requests and then re-render the map periodically?

Answer 1

I was able to solve this with the getSource..setData paradigm like so:

async function refreshMarkers(){
          placeMarkers.forEach(marker => marker.remove());
          placeMarkers = await getPointsOfInterest([-121.4252, 37.7397]);
          console.log("placemarkers " + placeMarkers);
          map.getSource('markers').setData(placeMarkers);
          placeMarkers.forEach(marker => marker.addTo(map));
        }

        //TODO: 3. Create lookups for appropriate marker colors
        const timer = setInterval(() => {
          refreshMarkers();
        }, 30000);