frontend-mobile/app/(tabs)/map.tsx

@@ -1,9 +1,80 @@
-import { View, Text, StyleSheet } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import MapView, { Marker } from 'react-native-maps';
+import { useRouter } from 'expo-router';
+import { getPharmacies } from '../../services/pharmacies';
+import { LoadingSpinner } from '../../components/LoadingSpinner';
+import { colors, spacing } from '../../constants/theme';
+import { Pharmacy } from '../../types';
 
 export default function MapScreen() {
+  const router = useRouter();
+  const [pharmacies, setPharmacies] = useState<Pharmacy[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [region, setRegion] = useState({
+    latitude: 40.4168, // Madrid default
+    longitude: -3.7038,
+    latitudeDelta: 0.0922,
+    longitudeDelta: 0.0421,
+  });
+
+  useEffect(() => {
+    const fetchPharmacies = async () => {
+      try {
+        const data = await getPharmacies();
+        setPharmacies(data);
+        
+        // Center map on first pharmacy if available
+        if (data.length > 0) {
+          setRegion({
+            latitude: data[0].latitude,
+            longitude: data[0].longitude,
+            latitudeDelta: 0.0922,
+            longitudeDelta: 0.0421,
+          });
+        }
+      } catch (error) {
+        console.error('Error fetching pharmacies:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchPharmacies();
+  }, []);
+
+  if (isLoading) {
+    return <LoadingSpinner message="Cargando farmacias..." />;
+  }
+
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Mapa de Farmacias</Text>
+      <MapView
+        style={styles.map}
+        region={region}
+        onRegionChangeComplete={setRegion}
+        showsUserLocation={true}
+        showsMyLocationButton={true}
+      >
+        {pharmacies.map((pharmacy) => (
+          <Marker
+            key={pharmacy.id}
+            coordinate={{
+              latitude: pharmacy.latitude,
+              longitude: pharmacy.longitude,
+            }}
+            title={pharmacy.name}
+            description={pharmacy.address}
+            onCalloutPress={() => router.push(`/pharmacy/${pharmacy.id}`)}
+          />
+        ))}
+      </MapView>
+      
+      <View style={styles.legend}>
+        <Text style={styles.legendText}>
+          {pharmacies.length} farmacias en el mapa
+        </Text>
+      </View>
     </View>
   );
 }
@@ -11,13 +82,27 @@ export default function MapScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F2F2F7',
   },
-  title: {
+  map: {
-    fontSize: 24,
+    flex: 1,
-    fontWeight: 'bold',
+  },
-    color: '#1C1C1E',
+  legend: {
+    position: 'absolute',
+    bottom: spacing.lg,
+    left: spacing.md,
+    right: spacing.md,
+    backgroundColor: colors.card,
+    borderRadius: 8,
+    padding: spacing.sm,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  legendText: {
+    fontSize: 14,
+    color: colors.text,
   },
 });