Using An Array Of Longitudes And Latitudes To Plot On Mapbox

i am trying to implement Mapbox api into my web application however i have reached a snag. My objective is to grab the longitudes and latitudes from my array and insert them into t

Solution 1:

I've got no mapbox experience, but basing on this documentation page, i came up with following;

You need to create your features collection (array) within for loop, like that:

var featureCollection = []; // Initialize empty collection// Your longLat collectionvar longLat = [
  [53.515333, -6.190796],
  [53.342686, -6.403656],
  [51.678091, -9.624023],
  [52.768293, -1.560059]
];

// for every item object within longLatfor(var itemIndex in longLat) {
  // push new feature to the collection
  featureCollection.push({
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": longLat[itemIndex]
    },
    "properties": {
      "title": "Mapbox DC",
      "icon": "monument"
    }
  });
}

Try if you can skip the properties (icon and title). For now they are hardcoded.

Then, you pass them to the map itself this way:

map.on('load', function () {
  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"
    }
  });
});

I'm not sure what all of the things mean (like layout with all icons for example), but that's just taken from the mentioned example, so it should not break anything.