Auto recup des chantiers dans Firebase et affichage

app/(tabs)/mapScreen.tsx

@@ -1,17 +1,40 @@
 // MapScreen.tsx
 import { ThemedMapView } from '@/components/themed-mapview';
-import React from 'react';
-import { StyleSheet, View, Dimensions } from 'react-native';
-import MapView, { Marker, PROVIDER_DEFAULT } from 'react-native-maps';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View, Dimensions, Image, Text } from 'react-native';
+import MapView, { Marker, Callout, CalloutSubview, PROVIDER_DEFAULT } from 'react-native-maps';
+import { db } from '../../firebase_config';
+import { Chantier } from '@/class/class';
+import { getChantiers } from '@/services/ressourcesService';
 
-const MapScreen: React.FC = () => {
-  const region = {
+
+const MapScreen = () => {
+
+const region = {
     latitude: 48.8566,
     longitude: 2.3522,
     latitudeDelta: 0.05,
     longitudeDelta: 0.05,
   };
 
+
+  const [chantiers, setMarkers] = useState<Chantier[]>([]);
+  const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+    async function loadData() {
+      try {
+        const data = await getChantiers();
+        setMarkers(data);
+      } catch (error) {
+        console.error("Erreur lors du chargement :", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, []);
+
   return (
     <View style={styles.container}>
       <ThemedMapView
@@ -19,11 +42,12 @@ const MapScreen: React.FC = () => {
         style={styles.map}
         region={region}
       >
+        {chantiers.map(chantier => (
         <Marker
-          coordinate={{ latitude: 48.8566, longitude: 2.3522 }}
-          title="Paris"
-          description="Capitale de la France"
+          key={chantier.id}
+          coordinate={{ latitude: chantier.latitude, longitude: chantier.longitude }}
         />
+      ))}
       </ThemedMapView>
     </View>
   );