Como criar uma planta de loteamento interativa que se atualiza em tempo real (grátis)

Imagine que sua equipe de vendas pode atualizar a disponibilidade de um lote pelo celular e, em questão de segundos, essa mudança aparece na planta publicada no seu site. Sem ligar para ninguém, sem mandar e-mail, sem mexer em código.

É exatamente isso que você vai aprender a fazer neste artigo.

E o melhor: é totalmente grátis.

O que você vai construir?

Uma planta de loteamento interativa em que:

• Cada lote tem um código de cor conforme a disponibilidade: verde (disponível), vermelho (vendido) e amarelo (reservado)
• Ao passar o cursor ou tocar em um lote no celular, aparece um tooltip com o nome, a área e o preço
• A disponibilidade é atualizada em tempo real a partir de uma planilha do Google Sheets
• A planta fica publicada com um link próprio que você pode compartilhar pelo WhatsApp ou usar no seu site

As ferramentas que você vai usar

Você precisa de apenas 4 ferramentas:

1. Adobe Illustrator: para vetorizar a planta (usado uma única vez)
2. Claude: a IA que transforma sua planta em código
3. Google Sheets: o banco de dados onde você controla a disponibilidade
4. Lovable: a plataforma que publica sua planta na internet

O Illustrator é pago? Sim, exige licença. Mas você só precisa dele uma vez para vetorizar a planta. Dá para ativar a versão de teste, fazer o trabalho e pronto. Outra opção é o Inkscape, que é gratuito e funciona do mesmo jeito para este processo.

Passo 1: Vetorizar a planta no Illustrator

O primeiro passo é traçar cada lote da sua planta como uma forma vetorial independente. É isso que permite ao site identificar cada lote e torná-lo interativo.

Como configurar o Illustrator

1. Abra o Illustrator e crie um documento novo. O tamanho não importa
2. Vá em Arquivo → Inserir e procure a imagem ou o PDF da sua planta
3. No painel Camadas, renomeie essa camada para PLANO IMG e bloqueie-a. Isso evita movê-la sem querer
4. Crie uma nova camada acima e chame-a de TRAZOS ("traçados" em espanhol)

As únicas 4 teclas de que você precisa

Como traçar cada lote

Com a ferramenta Caneta (P), clique em cada canto do lote para criar os pontos. Quando chegar ao último, clique sobre o primeiro ponto. Você verá um pequeno círculo aparecer embaixo do cursor, indicando que a forma vai se fechar.

⚠️ Erro mais comum: deixar uma forma aberta. Uma forma aberta não tem preenchimento e o processo falha. Sempre confira se cada lote é um polígono fechado.

Como nomear as camadas

Cada lote precisa ter seu próprio nome no painel Camadas. Esse nome vira o ID no código. Use nomes simples e sem caracteres especiais:

• A1, A2, A3 para os lotes da quadra A
• B1, B2, B3 para a quadra B
• CALLE ("rua" em espanhol) para a rua ou via

💡 O nome da camada no Illustrator = o ID do lote no site. Escreva certo desde o início.

Exportar como SVG

Depois de traçar todos os lotes:

1. Arquivo → Salvar como → SVG
2. Nas opções de exportação, ative Object IDs: Layer names (IDs de objeto: nomes de camadas). Isto é o mais importante
3. Salve o arquivo como plano.svg

Passo 2: Transformar o SVG em componente web com o Claude

Abra o claude.ai, inicie uma conversa nova, anexe seu arquivo SVG e cole o prompt abaixo:

Prompt 1: Para o Claude (transforma o SVG em componente React)

Você é um motor de conversão de ativos vetoriais imobiliários em interfaces web React com interatividade geoespacial. Sua função é processar arquivos SVG de plantas cadastrais e produzir componentes de produção prontos para deploy.

INPUT: você vai receber um arquivo SVG exportado de um software CAD ou de design vetorial (Illustrator, AutoCAD, Inkscape) com a geometria de um loteamento.

FASE 1: Processamento vetorial (silencioso, não relate):
Faça o parse do SVG e identifique todos os elementos por id, data-name ou camada. Extraia o viewBox, as dimensões e o sistema de coordenadas. Classifique cada elemento: lote vendável, via, área comum, construção. Calcule o centroide geométrico real de cada polígono (não o bounding box). Não relate a análise. Vá direto para a Fase 2.

FASE 2: Coleta de parâmetros:
Faça estas perguntas em um único bloco, sem preâmbulo:
1. Qual é o nome comercial do loteamento?
2. Qual é a cor de fundo do seu site em HEX? (ex.: #F3F6F0)
3. Para cada lote identificado: status inicial (disponible / vendido / reservado, mantenha exatamente esses valores) e área em m²
4. Qual é o preço base por m² em USD?
5. Existe uma via interna ou projetada? Precisa de textura de paralelepípedo?
6. É preciso sinalizar os acessos de veículos? Dimensão em metros?

FASE 3: Sem mais perguntas, gere o componente PlanoLotes.tsx com: cores fixas (disponible #c8e0a0, vendido #d4a0a0, reservado #e8d880), LOTES_DATA como objeto separado e substituível, hover e toque interativos, tooltip com nome/área/preço e a marca d'água "✦ Developed by royaltor360.com" no canto inferior direito.

RESTRIÇÕES: nunca invente geometria, use apenas os paths do SVG original, entregue cada arquivo para download separadamente.

O Claude vai fazer 6 perguntas. Responda todas em uma única mensagem e, em minutos, ele entrega o arquivo PlanoLotes.tsx pronto para baixar.

Os valores de status ficam em espanhol (disponible = disponível, vendido = vendido, reservado = reservado) porque precisam coincidir com o modelo do Google Sheets e com o código dos próximos prompts.

Passo 3: Preparar a planilha do Google Sheets

Sua planilha do Google Sheets é o banco de dados que controla a disponibilidade de cada lote. A estrutura é simples:

O modelo dos arquivos para download está em espanhol. Mantenha os nomes das colunas exatamente como estão (estado = status, precio_m2 = preço por m²): o código lê as colunas por esses nomes.

Os valores válidos para estado são disponible, vendido ou reservado, sempre em minúsculas.

Adicionar validação de dados com cores

Para facilitar a gestão pelo celular:

1. Selecione a coluna estado inteira
2. Vá em Dados → Validação de dados → Adicionar regra
3. Escolha Menu suspenso (lista de itens): disponible,vendido,reservado
4. Ative as cores: verde para disponible, amarelo para reservado, vermelho para vendido

Assim, sempre que atualizar o status, basta escolher no menu suspenso.

Publicar a planilha como CSV

1. Arquivo → Compartilhar → Publicar na Web
2. Selecione a primeira página (Página1)
3. No formato, escolha Valores separados por vírgula (.csv)
4. Clique em Publicar
5. Copie a URL. Ela deve terminar em &output=csv

Guarde essa URL, você vai precisar dela no próximo passo.

Passo 4: Subir o componente no Lovable e publicar

Acesse lovable.dev, crie uma conta gratuita e abra um projeto novo. No chat do Lovable, cole este prompt:

Prompt 2: Para o Lovable (sobe o componente)

Adicione o arquivo de componente .tsx que acabei de anexar em src/components/ (mantenha o nome original do arquivo). Exiba-o centralizado na página principal, sobre uma seção de largura total com cor de fundo #F3F6F0. Sem header, sem footer, apenas o componente.

Anexe o arquivo PlanoLotes.tsx que o Claude gerou. O Lovable o integra automaticamente e, em segundos, você vê a planta funcionando no preview.

Passo 5: Conectar ao Google Sheets (tempo real)

Este é o passo final. Copie o prompt abaixo, cole no chat do Lovable e, no final, adicione a URL CSV da sua planilha:

Prompt 3: Para o Lovable (conecta ao Google Sheets)

Modifique o arquivo de componente .tsx que adicionei antes em src/components/ (o componente do mapa de lotes, mantenha o nome atual do arquivo) para carregar os dados dos lotes do Google Sheets em vez do objeto estático LOTES_DATA. Siga exatamente estas instruções:

1. Adicione useEffect e useRef à linha de import do React
2. Substitua o objeto estático LOTES_DATA por um tipo LoteData e uma constante SHEETS_URL
3. Adicione dentro do componente: o estado lotesData, o estado cargando, prevDataRef e intervalRef
4. Adicione um useEffect que busque o CSV de SHEETS_URL com cache busting (&cachebust=Date.now()), pule a linha de cabeçalho, leia as colunas A=id, B=area (acrescente " m²"), C=estado, D=precio_m2, gere nombre automaticamente como "Lote " + id, só atualize o estado se os dados mudaram (compare com JSON.stringify), repita a cada 15000ms e faça a limpeza ao desmontar
5. Substitua todas as referências a LOTES_DATA por lotesData
6. Se os IDs dos polígonos do SVG não coincidirem com os IDs da planilha, normalize-os automaticamente
7. Mostre "Carregando disponibilidade..." enquanto cargando for true
8. Adicione a marca d'água: "✦ Developed by royaltor360.com", 11px, #4a7a2a com 40% de opacidade, com link para https://royaltor360.com em nova aba
9. Nunca deixe lotesData vazio entre uma busca e outra. Se a busca falhar, mantenha os dados anteriores visíveis.

Não altere mais nada no componente nem renomeie o arquivo.

URL CSV do Google Sheets:

O Lovable faz as alterações automaticamente. Depois clique em Publish para que as mudanças fiquem no ar.

Como fica o resultado final?

Com tudo conectado, o fluxo é assim:

1. Sua equipe de vendas abre o Google Sheets pelo celular
2. Muda o status de um lote de disponible para vendido
3. Em no máximo 15 segundos, a planta na web mostra a mudança
4. Qualquer pessoa com o link vê a informação atualizada

⚠️ Nota sobre o cache do Google: Às vezes o Google demora alguns instantes para propagar a mudança. Se a cor não mudar na hora, espere alguns segundos e recarregue a página. O sistema tem cache busting ativado para reduzir esse atraso ao mínimo.

O que vem depois disso?

O que você acabou de construir é a base: uma planta interativa funcional, atualizável em tempo real e publicada de graça na internet.

Mas, se quiser levar isso para o próximo nível:

• Um tour 360° interativo integrado à planta
• Um CRM para gerenciar os leads que chegam pela planta
• Formulários que capturam os dados dos clientes diretamente
• Alertas por e-mail sempre que alguém consulta um lote
• Uma plataforma de visualização completa para o seu projeto

Tudo isso é o que fazemos na Royaltor360: o masterplan interativo do seu loteamento conectado a um CRM. Se também quiser entender do que precisa uma equipe que vende lotes, leia o que um CRM para imobiliárias que vendem lotes deve ter (em espanhol).

Curso grátis · Em espanhol

Crie seu primeiro vídeo imobiliário com After Effects

O curso grátis da minha comunidade no Skool, em espanhol: edite do início ao fim um vídeo de um imóvel ou de um empreendimento, mesmo que nunca tenha aberto o programa.

Entrar grátis

Resumo do processo

Este artigo foi útil? Compartilhe com alguém que tenha um projeto imobiliário e ainda use PDFs estáticos para mostrar a disponibilidade dos lotes.