So zeigen Sie Firebase-Backend-Daten in mapbox gl an

Question

Wie kann ich Firebase-Daten in das gl-System importieren, um sie in einer HTML-Datei anzuzeigen?

Ich arbeite von diesem Beispiel: https://www.mapbox.com/mapbox-gl-js/example/heatmap/. Ich weiß nicht, was ich für map.addSource und Daten setzen soll. Danke für jeden Hinweis.

Hier ist ein Code aus Faltblatt HTML-Datei, die ich für gl anpassen möge:

// Initialize Firebase 
var config = { 
apiKey: [key], 
authDomain: "[domain name]", 
databaseURL: "[url]", 
storageBucket: "bitebytes-4d211.appspot.com", 
messagingSenderId: "[id]" 
}; 
firebase.initializeApp(config); 

defaultDatabase = firebase.database(); 
var openedOnce = false 
firebase.auth().onAuthStateChanged(function(user) { 
if (user && !openedOnce) { 
openedOnce = true 
var isAnonymous = user.isAnonymous; 
var uid = user.uid; 
var reportsRef = firebase.database().ref('reports/'); 
reportsRef.on('child_added', function(data) { 
console.log('reports child_added'); 
addPoint(data.val()); 
}); 
} 
}); 

Answer 1

Ihre Daten müssen in gültigem GeoJSON Format von Feuerbasis sein, dann wird diese json hinzugefügt, wie Sie andere hinzufügen würden Geojson-Quelle mit Mapbox-Beispielen. Es gibt viel zu viele Möglichkeiten, um Ihre Firebase-Daten zu strukturieren, um hier ins Detail zu gehen.