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:

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:

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:

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:

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:

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:

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:

<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:

npx expo install react-native-maps

2. Importar no componente:

import MapView, { Marker, Polyline } from 'react-native-maps';

3. Usar o DeliveryMap:

<DeliveryMap
  deliveries={deliveries}
  onDeliveryPress={handleDeliveryPress}
  showRoute={true}
  centerOnUser={true}
/>

---

🔧 Configurações

app.json (Expo):

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

Metro Config:

// 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! 🗺️✨