João Vitor d087cefb1b feat: Integração completa Mapbox + Upload de avatares

- 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

2025-12-02 13:55:56 -03:00

2 KiB

Raw Blame History

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

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/

2 KiB Raw Blame History