javascript - Geojson Point FeatureCollection insert a variable

Question

I create from a MySQL database with PHP an array with coordinates. This array I passed to JavaScript in my HTML website. On this site, I want to display these coordinates as markers in a Mapbox API map.

It worked everything, except the last step to implement these coordinates in the Geojson FeatureCollection.

function fccreate() {
  var i;
  var indextt = Object.keys(testtable_array).length;
  for (i = 0; i < indextt; i++) {
      text += '{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [' + testtable_array[i][1] + ',' + testtable_array[i][2] + ']}},';
  }
newtext = text.substring(0, text.length - 1);
addsfa();
};

    
function addsfa() {
console.log(newtext);
map.addSource('mypoints3', {
        'type': 'geojson',
        'data': {
          "type": "FeatureCollection",
          "features": [
              newtext
          ]
          
    }
});
    
map.addLayer({
'id': 'mypoints3',
'type': 'symbol',
'source': 'mypoints3',
'layout': {
'icon-image': 'custom-marker',
}
});
}

This is the array from PHP:

testtable_array

The log to the console shows me the right result, because when i enter the result manualy in the geojson the map shows all of the markers. Console Log:

{"type": "Feature","properties": {}, "geometry": {"type": "Point","coordinates": [9.522359619140815,46.85314975627398]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.522359619140815,46.85314975627398]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.09251953125019,46.973226855658936]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [11.352956040816935,46.479010689522994]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.512746582031014,46.84939301152497]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [20.05803762373668,47.77883708313206]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [10.409505615234451,46.86817410754625]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [10.296895751952889,46.80053141630188]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.5278527832034,46.857845317683655]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [8.058173337244995,47.247794215485754]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.76377244255417,46.436848511271364]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [10.62146641328738,1.658296133484285]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [23.98528433420927,37.41062770063955]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.518239746094821,46.8531497562733]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [11.309174279171373,46.41645943261082]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [11.309174279171373,46.41645943261082]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.378164062501838,46.91416003055292]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.529226074219622,46.8531497562733]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.12387896865556,46.982512425911864]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [11.255599004325092,43.76971806046333]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [9.176296671409006,46.83780694910723]}},
{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [8.361458390095095,48.53379740798499]}}

I'm new to geojson, so maybe I don't know exactly how to paste this variable in the geojson object.

Any Ideas?

Thanks very much.

question from:https://stackoverflow.com/questions/65926282/geojson-point-featurecollection-insert-a-variable

Answer 1

Your GeoJSON is correctly built, you can check if it's valid here

Seems like you are passing a string to Mapbox, features needs to be an array of objects (GeoJSON), you can try something like:

// Create an array that will store the features
const features = [];

// Loop and build each feature
for (let i = 0; i < indextt; i++) {
  const feature = {"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [testtable_array[i][1], testtable_array[i][2]]}};
  features.push(feature);
}

// Add the features to the Mapbox source
map.addSource('mypoints3', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features
  }
});