Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

93
Views
Update FeatureCollection Geojson coordinates to mapbox map every 2sec

I am new to Javascript and mapbox and I want some help to solve an issue (code below). I am using some coordinates ({{coords}}) coming from a python script and I am adding them as a geojson to the map (featureCollection). I want these geojson coordinates to be updated every 2 seconds. I have used setData(), but my coordinates are not refreshing on the map. Can you help and give some hints? Thank you very much.

var longLat = {{coords}};
var featureCollection = [];

for(var itemIndex in longLat) {
featureCollection.push({
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": longLat[itemIndex]
    },
    "properties": {
      "title": "boat",
      "icon": "ferry"
    }
  });
}
map.on('load', function () {

map.addSource('ship', { type: 'geojson', data: featureCollection });
  map.addLayer({
    "id": "points",
    "type": "symbol",
    "source": {
    "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": featureCollection
      }
    },
    "layout": {
      "icon-image": "{icon}-15",
      "text-field": "{title}",
      "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
      "text-offset": [0, 0.6],
      "text-anchor": "top"
    }
  });

window.setInterval(function() {

  map.getSource('ship').setData(featureCollection);
}, 2000);

});
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You didn't use 'ship' source for the layer, so updating source data (map.getSource('ship').setData) wouldn't trigger rerender.

Change the source property of map.addLayer(...), Try map.addLayer({...,source:'ship'})

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!