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.
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
}
});