photum/frontend/MAPBOX_SETUP.md
2025-12-03 09:44:21 -03:00

79 lines
2 KiB
Markdown

# 🗺️ Configuração do Mapbox
## Token do Mapbox Inválido
O sistema está configurado para usar a API do Mapbox, mas o token atual é inválido ou expirado.
## Como Obter um Token Válido (GRATUITO)
### 1. Crie uma conta no Mapbox
- Acesse: **https://account.mapbox.com/**
- Clique em **"Sign up"** (ou faça login se já tiver conta)
- É **100% gratuito** para até 50.000 requisições/mês
### 2. Acesse a página de Tokens
- Após fazer login, vá para: **https://account.mapbox.com/access-tokens/**
- Ou clique no menu em **"Access tokens"**
### 3. Crie um novo token
- Clique em **"Create a token"**
- Dê um nome (ex: "Photum Forms")
- Selecione os escopos necessários (deixe os padrões marcados)
- Clique em **"Create token"**
### 4. Copie o token
- O token será algo como: `pk.eyJ1IjoiZXhhbXBsZSIsImEiOiJja...`
- **COPIE O TOKEN COMPLETO**
### 5. Configure no Projeto
Abra o arquivo **`services/mapboxService.ts`** e substitua o token na linha 26:
```typescript
const MAPBOX_TOKEN = "SEU_TOKEN_AQUI"; // Cole o token do Mapbox aqui
```
### 6. Salve e recarregue
Após salvar o arquivo, o Vite recarregará automaticamente e o mapa funcionará!
---
## Verificação
Se tudo estiver correto, você verá:
- ✅ "Inicializando mapa Mapbox..." no console
- ✅ "Mapa criado com sucesso" no console
- ✅ Mapa interativo carregado na tela de criação de eventos
Se houver erro:
- ❌ Verifique se copiou o token completo (incluindo `pk.`)
- ❌ Verifique se não há espaços extras antes/depois do token
- ❌ Certifique-se de que o token não expirou
---
## Recursos do Mapbox no Sistema
- 🔍 Busca de endereços com autocomplete
- 📍 Mapa interativo com pin arrastável
- 🌍 Geocoding e Reverse Geocoding
- 🗺️ Integração com Google Maps para compartilhamento
## Limites Gratuitos
O plano gratuito do Mapbox inclui:
- 50.000 requisições de geocoding/mês
- 50.000 carregamentos de mapa/mês
- Mais que suficiente para este projeto!
---
**Precisa de ajuda?** Acesse a documentação: https://docs.mapbox.com/api/