d087cefb1b
- Integração Mapbox GL JS para seleção interativa de localização - Mapa arrastável com pin para localização exata - Geocoding e reverse geocoding automático - Busca de endereços com autocomplete - Campos editáveis que atualizam mapa automaticamente - Token configurado via variável de ambiente (.env.local) - Sistema de upload de fotos de fotógrafos - Upload via input de arquivo (substituiu URL) - Preview automático com FileReader API - Botão para remover foto selecionada - Placeholder com ícone de câmera - Remoção de funcionalidades de uploads/álbuns - Removida página Albums.tsx - Removido sistema de attachments - Removida aba Inspiração para empresas - Criada página Inspiração com galeria de exemplo - Melhorias de responsividade - Cards do mapa adaptados para mobile - Texto e padding reduzidos em telas pequenas - Arquivos de configuração - .env.example criado - vite-env.d.ts para tipagem - MAPBOX_SETUP.md com instruções - Footer atualizado com serviços universitários
72 lines
2 KiB
Markdown
72 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/
|