Mapbox mit Firebase-Datenbank laden

Question

Ich versuche Firebase und Mapbox zu lernen und wollte die beiden integrieren. Firebase speichert einige meiner Daten in folgendem 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" 
    } 
    } 
} 

Gibt es eine Möglichkeit, die Daten zu laden und in MapBox plotten? Die Beispiele erfordern eine GeoJSON-Datei, die irgendwo gehostet wird, um sie zu plotten. Wie können wir die Firebase-Datenbank in Echtzeit auf der Mapbox plotten?

Sorry, wenn meine Frage nicht eindeutig ist. Ich bin bereit, bei Bedarf weitere Informationen zur Verfügung zu stellen: D

Vielen Dank!

Answer 1

Sie können die Daten laden, müssen sie jedoch zuerst in ein gültiges GeoJSON-Objekt konvertieren.

Hier wird mit einem JSFiddle die Daten, die Sie zur Verfügung gestellt: https://jsfiddle.net/mkrv9uuy/

var firebaseGeojsonFeatures = []; 
for (var key in firebaseData.messages) { 
    var f = firebaseData.messages[key]; 
    f.type = "Feature"; 
    firebaseGeojsonFeatures.push(f); 
}