Voltar para Lista
BLOG / Crom Editor / / 5 min leitura

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

O Crom GeoFlowMap é um projeto open-source que transforma dados JSON em mapas geográficos 3D interativos e cinematográficos. Focado em fluxos (logística, ataques cibernéticos) e visualização volumétrica, ele permite criar extrusões (torres) sobre coordenadas para representar volumes de dados, como vendas por cidade. É uma alternativa física e impactante aos mapas de calor 2D tradicionais, integrada ao ecossistema de soberania técnica da Crom.

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/crom-geoflowmap@1.0.4/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/crom-geoflowmap@1.0.4/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):

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

🔗 Links Úteis

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: mrj.crom@gmail.com

⚠️ 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: mrj.crom@gmail.com.

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! 🗿🍷

Fim da Transmissão