🌎GeoFlowMap: Visualização de Fluxos Geográficos em 3D (Open Source) · MrJ

Se você já precisou visualizar rotas de logística, ataques cibernéticos em tempo real ou infraestrutura de cabos submarinos, sabe que mapas 2D estáticos muitas vezes não contam a história completa.

Apresento o Crom GeoFlowMap, um projeto open-source que transforma dados JSON simples em experiências geográficas 3D interativas e cinematográficas.

Screenshots

🌍 O Que é o Projeto?

O Crom GeoFlowMap é um componente React (agora também disponível via CDN/Vanilla JS) focado em visualização de fluxos. Ele abstrai a complexidade de bibliotecas pesadas de WebGL para permitir que desenvolvedores criem mapas impactantes com poucas linhas de código.

Principais Funcionalidades:

Camadas de Arco 3D (Arc Layer): Perfeito para rotas aéreas, marítimas ou conexões lógicas (origem → destino).
Scatterplots Volumétricos: Visualização de pontos (cidades, hubs) com extrusão 3D baseada em valor/intensidade.
Camadas de Linha (Line Layer): Para infraestrutura física ou conexões planas.
Editor Visual Integrado: Uma interface para manipular o JSON em tempo real, ajustar cores e posições sem recarregar a página.
Modo Standalone: Uma versão compilada única (.js) que pode ser importada em qualquer site (WordPress, PHP, HTML puro) via CDN.

🛠️ Stack Tecnológica

O projeto foi construído sobre gigantes do ecossistema de dados geoespaciais, mas empacotado para ser simples de usar:

Core: React + Vite (Build ultra-rápido).
Visualização: Deck.GL (Renderização de camadas de dados em WebGL).
Base Map: MapLibre GL (Mapas vetoriais open-source, livre de custos do Google Maps).
Estilização: TailwindCSS (Para a UI do Editor e Docs).

⚡ A História: "Vibe Coding" e Honestidade Técnica

Este projeto nasceu de uma sessão intensa de "Vibe Coding". Cerca de 99% do código inicial foi gerado em fluxo rápido para validar a ideia e colocar o pixel na tela.

Isso significa que o projeto funciona incrivelmente bem, mas a base de código precisa de carinho.

Existem padrões que podem ser melhorados.
Algumas dependências ou métodos internos podem estar deprecados (o ecossistema Deck.GL/MapLibre evolui rápido).
A tipagem (TypeScript) pode ser mais estrita em alguns pontos.

É aqui que entra o Open Source. O projeto não é apenas uma ferramenta, é um convite.

🎮 Playground: O Editor Online

Não quer instalar nada agora? Sem problemas. Criamos um Editor Visual Online para você experimentar o poder do GeoFlowMap direto no navegador.

Edição em Tempo Real: Altere cores, adicione rotas e ajuste a espessura das linhas visualmente.
JSON-Driven: Tudo o que você faz no editor gera um JSON limpo, pronto para ser copiado e colado no seu projeto.
Zero Config: Acesse e comece a criar.

👉 Brinque agora: geoflowmap.crom.run/editor

🚀 Como Usar (Exemplo Rápido)

Você não precisa instalar nada para testar. Basta criar um HTML e usar a versão via CDN que acabamos de publicar:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist-standalone/crom-geoflowmap.css">
  <style>body { margin: 0; background: #000; }</style>
</head>
<body>
  <div id="map" style="width: 100vw; height: 100vh;"></div>
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist-standalone/crom-geoflowmap.standalone.js"></script>
  <script>
    const data = [{
      id: "rota-1",
      type: "item",
      itemType: "Arc",
      visible: true,
      color: [0, 255, 128], // Verde Neon
      data: { source: [-46.6, -23.5], target: [2.35, 48.85] } // SP -> Paris
    }];

    // Inicializa o mapa
    initCromGeoFlowMap('map', data);
  </script>
</body>
</html>

🤝 Chamada para Contribuição (Roadmap)

Estamos procurando desenvolvedores que queiram aprender ou já dominem React, TypeScript e WebGL/Mapas para ajudar a levar o Crom GeoFlowMap para o próximo nível.

Áreas prioritárias para PRs (Pull Requests):

Refatoração: Limpar o código gerado no "vibe coding", melhorando a separação de responsabilidades.
Atualização de Dependências: Identificar e substituir métodos deprecados do react-map-gl ou deck.gl.
Performance: Otimizar a renderização de grandes datasets (milhares de arcos).
UI do Editor: Melhorar a experiência de UX na sidebar de edição.

🔗 Links Úteis

Demo Online: geoflowmap.crom.run
Repositório GitHub: github.com/MrJc01/crom-brasil-geoflowmap
Documentação: geoflowmap.crom.run/docs
NPM: npmjs.com/package/crom-geoflowmap
👉 Brinque agora: geoflowmap.crom.run/editor

O Crom GeoFlowMap é mantido pela comunidade. Se você curtiu a iniciativa de trazer visualização de dados de alto nível de forma acessível, deixe uma ⭐ no GitHub!

De um protótipo "Vibe Code" para uma biblioteca de visualização de alta performance.

☕ Apoie o Desenvolvimento Open-Source Nacional (Não falo só de mim aqui)

A revolução da "IA Soberana" e do "Local-First" não acontece apenas no Vale do Silício ou na Europa. Aqui no Brasil, através da organização Crom, também estou focado em construir e manter projetos que devolvem o controle ao desenvolvedor (além de trazer análises aprofundadas como esta para o TabNews e comunidade).

Manter o desenvolvimento de ferramentas open-source e a produção de conteúdo técnico denso exige tempo, dedicação e, claro, muito ☕ e 🍀. Se este artigo gerou valor para você, ou se você apoia a iniciativa de construirmos tecnologia de base independente por aqui, qualquer apoio é bem-vindo.

Sim eu uso IA, não como meu amigo ou faz tudo, mas como ferramenta, e recomendo o mesmo a você.

Estou idealizando ainda um módulo dedicado de donations na plataforma da Crom, mas enquanto ele não entra no ar, estou aceitando apoios via PIX para manter a infraestrutura rodando:

Chave PIX:
[email protected]

⚠️ Importante:
Se você realizar um apoio, por favor, envie o comprovante (pode ser apenas com seu user do GitHub ou TabNews no assunto/corpo) para o e-mail: [email protected].

O Futuro: Assim que eu lançar a implementação oficial de donate/invest da Crom, farei questão de migrar manualmente esses apoios, transformando-os em créditos, badges de early supporter ou garantindo os devidos agradecimentos na plataforma.

Muito obrigado por ler até aqui e pela força! 🗿🍷