Loading mapbox with Firebase database - firebase

Question

I'm trying to learn Firebase and Mapbox and wanted to integrate the two. Firebase stores some of my data in the following format:
{
"messages" : {
"-KUE2EwfvbI48Azw01Hv" : {
"geometry" : {
"coordinates" : [ 28.6618976, 77.22739580000007 ],
"type" : "Point"
},
"properties" : {
"description" : "xyz",
"hashtag" : "#xyz",
"imageUrl" : "xyz.jpg",
"name" : "Xyz Xyz",
"photoUrl" : "xyz.jpg",
"title" : "XYZ"
},
"type" : "Issue"
},
"-KUD2EwfvbI48Azw01Hv" : {
"geometry" : {
"coordinates" : [ 12.9715987, 77.59456269999998 ],
"type" : "Point"
},
"properties" : {
"description" : "xyz",
"hashtag" : "#xyz",
"imageUrl" : "xyz.jpg",
"name" : "Xyz Xyz",
"photoUrl" : "xyz.jpg",
"title" : "XYZ"
},
"type" : "Issue"
}
}
}
Is there a way to load the data and plot it into Mapbox? The examples require a GeoJSON file hosted somewhere that can be used to plot them. How can we use the Firebase database to plot on the Mapbox in realtime?
Sorry if my question is ambiguous. I'm willing to provide more information if needed :D
Thanks!

Answer 1

You can load the data, but you first have to convert it to a valid GeoJSON object.
Here is a JSFiddle using the data you provided:
https://jsfiddle.net/mkrv9uuy/
var firebaseGeojsonFeatures = [];
for (var key in firebaseData.messages) {
var f = firebaseData.messages[key];
f.type = "Feature";
firebaseGeojsonFeatures.push(f);
}