Using my RESTapi, I extract data from a mongoDB and pass it to my mapbox gl app as a JSON array with the help of the following code:
$.ajax(
{
type: "GET",
contentType: "application/json; charset=utf-8",
url: myUrl,
cache: false,
async: true,
timeout: 5000,
dataType: "json",
success: function (data)
{
console.log("Reading Data");
console.log(data);
},
error: function (xhr, ajaxOptions, thrownError)
{
console.log("http Status Response: " + xhr.status);
console.log(thrownError);
}
});
The data is structured as individual documents in mongoDB, and a GET request retrieves it in the following format.
[
{
"_id": "588a3d5a524da321dd937891",
"__v": 0,
"geometry": {
"type": "Point",
"coordinates": [ -113.5299938027191, 53.42859997065679 ]
},
"type": "Feature",
"properties": {
"icon": "horse-riding-15",
"title": "A Horse",
"description": "A Horse description",
"date": "2017-01-26T18:18:02.175Z"
}
},
{
"_id": "588ac68aa99e6a38134997b5",
"__v": 0,
"geometry": {
"type": "Point",
"coordinates": [ -113.56076949999999, 53.4528447 ]
},
"type": "Feature",
"properties": {
"icon": "dog-park-15",
"title": "A Dog",
"description": "A Dog description",
"date": "2017-01-27T04:03:22.381Z"
}
}
]
To display this data in mapbox, it needs to be a part of a GeoJSON Feature Collection, which should be structured like this (including the type info at the start, and {} wrapper):
{
"type": "FeatureCollection",
"features": [
{
"_id": "588a3d5a524da321dd937891",
"__v": 0,
"geometry": {
"type": "Point",
"coordinates": [ -113.5299938027191, 53.42859997065679 ]
},
"type": "Feature",
"properties": {
"icon": "horse-riding-15",
"title": "A Horse",
"description": "A Horse description",
"date": "2017-01-26T18:18:02.175Z"
}
},
{
"_id": "588ac68aa99e6a38134997b5",
"__v": 0,
"geometry": {
"type": "Point",
"coordinates": [ -113.56076949999999, 53.4528447 ]
},
"type": "Feature",
"properties": {
"icon": "dog-park-15",
"title": "A Dog",
"description": "A Dog description",
"date": "2017-01-27T04:03:22.381Z"
}
}
]
}
I'm not sure if there's a preferred method for this conversion, a technique I'm overlooking, or some client-side code that can automatically reformat and add the extra data after downloading. At this point, I'm uncertain about the best approach to include the extra wrapper data.