entregas_app/docs/MAPS_OPTIONS_README.md

# 🗺️ **Opções de Mapas para Expo Go**

## ✅ **Componentes de Mapa Compatíveis**

### **1. react-native-maps (RECOMENDADO) ⭐**

**Instalação:**
```bash
npx expo install react-native-maps
```

**Vantagens:**
- ✅ **100% compatível** com Expo Go
- ✅ **Suporte nativo** para iOS e Android
- ✅ **Desenho de rotas** com `Polyline`
- ✅ **Marcadores customizados** com `Marker`
- ✅ **Controles de mapa** completos
- ✅ **Performance nativa** excelente

**Exemplo de uso:**
```tsx
import MapView, { Marker, Polyline } from 'react-native-maps';

<MapView style={styles.map}>
  {/* Marcadores */}
  <Marker coordinate={coordinate} />
  
  {/* Rotas */}
  <Polyline
    coordinates={routeCoordinates}
    strokeColor="#3B82F6"
    strokeWidth={4}
  />
</MapView>
```

**Funcionalidades:**
- 🎯 **Marcadores interativos** com `onPress`
- 🛣️ **Rotas curvas** com `Polyline`
- 📍 **Localização do usuário** com `showsUserLocation`
- 🧭 **Controles de mapa** (zoom, compass, scale)
- 🏢 **Tipos de mapa** (standard, satellite, hybrid)

---

### **2. @rnmapbox/maps (Mapbox)**

**Instalação:**
```bash
npx expo install @rnmapbox/maps
```

**Vantagens:**
- ✅ **Rotas curvas** do Mapbox
- ✅ **Navegação em tempo real**
- ✅ **Estilo de mapa** personalizado
- ✅ **Geocoding** integrado
- ✅ **APIs avançadas** do Mapbox

**Exemplo:**
```tsx
import Mapbox from '@rnmapbox/maps';

<Mapbox.MapView style={styles.map}>
  <Mapbox.ShapeSource id="routeSource" shape={routeGeoJSON}>
    <Mapbox.LineLayer id="routeLine" />
  </Mapbox.ShapeSource>
</Mapbox.MapView>
```

**Funcionalidades:**
- 🛣️ **Rotas inteligentes** com Mapbox Directions
- 🎨 **Estilos customizados** de mapa
- 📍 **Geocoding** de endereços
- 🚗 **Navegação turn-by-turn**
- 🌍 **Mapas offline** e customizados

---

### **3. react-native-web-maps (Web)**

**Instalação:**
```bash
npm install react-native-web-maps
```

**Vantagens:**
- ✅ **Compatível com web**
- ✅ **API similar** ao react-native-maps
- ✅ **Fallback** para web
- ✅ **Sem dependências nativas**

**Exemplo:**
```tsx
import { MapView, Marker } from 'react-native-web-maps';

<MapView style={styles.map}>
  <Marker coordinate={coordinate} />
</MapView>
```

---

## 🎯 **Implementação Atual**

### **DeliveryMap com react-native-maps**

O componente atual usa `react-native-maps` com:

#### **Funcionalidades Implementadas:**
- 🗺️ **Mapa nativo** com `MapView`
- 🎯 **Marcadores customizados** com `CustomPin`
- 🛣️ **Rotas otimizadas** com `Polyline`
- 🧠 **Algoritmo TSP** (Caixeiro Viajante)
- 📍 **Centro de distribuição** destacado
- 🔄 **Otimização automática** de rotas

#### **Estrutura do Mapa:**
```tsx
<MapView
  ref={mapRef}
  style={styles.map}
  provider={Platform.OS === 'android' ? PROVIDER_GOOGLE : undefined}
  initialRegion={initialRegion}
  showsUserLocation={centerOnUser}
  showsMyLocationButton={centerOnUser}
  showsCompass={true}
  showsScale={true}
>
  {/* Marcadores das entregas */}
  {mapMarkers.map((marker) => (
    <Marker
      key={marker.id}
      coordinate={marker.coordinate}
      title={marker.title}
      description={marker.description}
      onPress={handleMarkerPress}
    >
      <CustomPin number={marker.number} size={40} />
    </Marker>
  ))}

  {/* Rotas otimizadas */}
  {mapPolylines.map((polyline) => (
    <Polyline
      key={polyline.id}
      coordinates={polyline.coordinates}
      strokeColor={polyline.strokeColor}
      strokeWidth={polyline.strokeWidth}
      lineDashPattern={polyline.lineDashPattern}
      geodesic={true}
    />
  ))}
</MapView>
```

---

## 🚀 **Como Usar**

### **1. Instalar dependência:**
```bash
npx expo install react-native-maps
```

### **2. Importar no componente:**
```tsx
import MapView, { Marker, Polyline } from 'react-native-maps';
```

### **3. Usar o DeliveryMap:**
```tsx
<DeliveryMap
  deliveries={deliveries}
  onDeliveryPress={handleDeliveryPress}
  showRoute={true}
  centerOnUser={true}
/>
```

---

## 🔧 **Configurações**

### **app.json (Expo):**
```json
{
  "expo": {
    "plugins": [
      [
        "expo-location",
        {
          "locationWhenInUseDescription": "Permitir que $(PRODUCT_NAME) use sua localização para mostrar rotas de entrega."
        }
      ]
    ]
  }
}
```

### **Metro Config:**
```js
// metro.config.js
config.resolver = {
  ...resolver,
  platforms: ['ios', 'android', 'native', 'web'],
};
```

---

## 📱 **Compatibilidade**

| Plataforma | react-native-maps | @rnmapbox/maps | react-native-web-maps |
|------------|-------------------|----------------|----------------------|
| **Expo Go** | ✅ **Sim** | ✅ **Sim** | ✅ **Sim** |
| **iOS** | ✅ **Sim** | ✅ **Sim** | ✅ **Sim** |
| **Android** | ✅ **Sim** | ✅ **Sim** | ✅ **Sim** |
| **Web** | ❌ **Não** | ❌ **Não** | ✅ **Sim** |

---

## 🎉 **Recomendação Final**

**Use `react-native-maps`** porque:

1. ✅ **100% compatível** com Expo Go
2. ✅ **Performance nativa** excelente
3. ✅ **API simples** e intuitiva
4. ✅ **Suporte oficial** da comunidade
5. ✅ **Funcionalidades completas** de mapa
6. ✅ **Fácil manutenção** e debug

**Resultado:** Mapa funcional com rotas, marcadores e otimização em qualquer ambiente! 🗺️✨