Cómo crear un plano inmobiliario interactivo que se actualiza en tiempo real (gratis)

Imagina que tu equipo de ventas puede actualizar la disponibilidad de un lote desde el celular y en cuestión de segundos ese cambio aparece en el plano que está publicado en tu web — sin llamar a nadie, sin mandar un correo, sin tocar código.

Eso es exactamente lo que vas a aprender a hacer en este artículo.

Y lo mejor: es completamente gratis.

¿Qué vas a construir?

Un plano de lotización interactivo donde:

• Cada lote tiene un código de color según su disponibilidad: verde (disponible), rojo (vendido) y amarillo (reservado)
• Al pasar el cursor o tocar un lote en móvil, aparece un tooltip con el nombre, área y precio
• La disponibilidad se actualiza en tiempo real desde una hoja de cálculo de Google Sheets
• El plano queda publicado con un enlace propio que puedes compartir por WhatsApp o usarlo en tu web

Las herramientas que vas a usar

Necesitas solo 4 herramientas:

1. Adobe Illustrator — para vectorizar el plano (solo se usa una vez)
2. Claude — la IA que convierte tu plano en código
3. Google Sheets — la base de datos donde controlas la disponibilidad
4. Lovable — la plataforma que publica tu plano en internet

¿Illustrator tiene costo? Sí, tiene licencia. Pero solo lo necesitas una vez para vectorizar el plano. Puedes activar la versión de prueba, hacer el trabajo y ya. Alternativamente, Inkscape es gratuito y funciona igual para este proceso.

Paso 1 — Vectorizar el plano en Illustrator

El primer paso es trazar cada lote de tu plano como una forma vectorial independiente. Esto es lo que le permite a la web identificar cada lote y hacerlo interactivo.

Cómo configurar Illustrator

1. Abre Illustrator y crea un documento nuevo — el tamaño no importa
2. Ve a Archivo → Colocar y busca la imagen o PDF de tu plano
3. En el panel de capas, renombra esa capa como PLANO IMG y blóqueala — esto evita moverla accidentalmente
4. Crea una nueva capa encima y llámala TRAZOS

Las únicas 4 teclas que necesitas

Cómo trazar cada lote

Con la herramienta Pluma (P), haz clic en cada esquina del lote para crear los puntos. Cuando llegues al último, haz clic sobre el primer punto — verás un pequeño círculo aparecer debajo del cursor, eso indica que la forma se va a cerrar.

⚠️ Error más común: dejar una forma abierta. Una forma abierta no tiene relleno y el proceso falla. Siempre verifica que cada lote sea un polígono cerrado.

Cómo nombrar las capas

Cada lote debe tener su propio nombre en el panel de capas. Este nombre se convierte en el ID en el código. Usa nombres simples y sin caracteres especiales:

• A1, A2, A3 para lotes de la manzana A
• B1, B2, B3 para la manzana B
• CALLE para la calle o vía

💡 El nombre de la capa en Illustrator = el ID del lote en la web. Escríbelo bien desde el inicio.

Exportar como SVG

Una vez que tienes todos los lotes trazados:

1. Archivo → Guardar como → SVG
2. En las opciones de exportación, activa: Object IDs: Layer names ← esto es lo más importante
3. Guarda el archivo como plano.svg

Paso 2 — Convertir el SVG en componente web con Claude

Abre claude.ai, inicia una conversación nueva, adjunta tu archivo SVG y pega el siguiente prompt:

Prompt 1 — Para Claude (convierte el SVG en componente React)

Eres un motor de conversión de activos vectoriales inmobiliarios a interfaces web React con interactividad geoespacial. Tu función es procesar archivos SVG de planos catastrales y producir componentes de producción listos para deploy.

INPUT: recibirás un archivo SVG exportado desde software CAD o de diseño vectorial (Illustrator, AutoCAD, Inkscape) con la geometría de una lotización.

FASE 1 — Procesamiento vectorial (silencioso, no reportes):
Parsea el SVG e identifica todos los elementos por id, data-name o capa. Extrae el viewBox, dimensiones y sistema de coordenadas. Clasifica cada elemento: lote vendible, vía, área comunal, construcción. Calcula el centroide geométrico real de cada polígono (no el bounding box). No reportes el análisis. Pasa directo a la Fase 2.

FASE 2 — Recopilación de parámetros:
Formula estas preguntas en un único bloque, sin preámbulo:
1. ¿Cuál es el nombre comercial del proyecto de lotización?
2. ¿Cuál es el color de fondo de tu web en HEX? (ej: #F3F6F0)
3. Para cada lote identificado: estado inicial (disponible / vendido / reservado) y superficie en m²
4. ¿Cuál es el precio base por m² en USD?
5. ¿Existe vía interna o propuesta? ¿Requiere textura de adoquín?
6. ¿Se requiere señalización de accesos vehiculares? ¿Dimensión en metros?

FASE 3 — Genera sin más preguntas el componente PlanoLotes.tsx con: colores fijos (disponible #c8e0a0, vendido #d4a0a0, reservado #e8d880), LOTES_DATA como objeto separado y reemplazable, hover y tap interactivo, tooltip con nombre/área/precio, y marca de agua "✦ Developed by royaltor360.com" en esquina inferior derecha.

RESTRICCIONES: nunca inventes geometría, usa solo los paths del SVG original, entrega cada archivo descargable por separado.

Claude te va a hacer 6 preguntas. Respóndelas todas en un solo mensaje y en minutos te entrega el archivo PlanoLotes.tsx listo para descargar.

Paso 3 — Preparar la hoja de Google Sheets

Tu Google Sheet es la base de datos que controla la disponibilidad de cada lote. La estructura es simple:

Los valores válidos para estado son: disponible, vendido o reservado — siempre en minúsculas.

Agregar validación de datos con colores

Para hacer más fácil la gestión desde el celular:

1. Selecciona toda la columna estado
2. Ve a Datos → Validación de datos → Agregar regla
3. Elige Lista de elementos: disponible,vendido,reservado
4. Activa los colores: verde para disponible, amarillo para reservado, rojo para vendido

Así cada vez que actualices el estado, simplemente eliges del menú desplegable.

Publicar la hoja como CSV

1. Archivo → Compartir → Publicar en la web
2. Selecciona Hoja 1
3. En el formato elige Valores separados por comas (.csv)
4. Clic en Publicar
5. Copia la URL — debe terminar en &output=csv

Guarda esa URL, la vas a necesitar en el siguiente paso.

Paso 4 — Subir el componente a Lovable y publicar

Ve a lovable.dev, crea una cuenta gratuita y abre un proyecto nuevo. En el chat de Lovable pega este prompt:

Prompt 2 — Para Lovable (sube el componente)

Add the .tsx component file I just attached to src/components/ (keep its original filename). Display it centered on the main page over a full-width section with background color #F3F6F0. No header, no footer, just the component.

Adjunta el archivo PlanoLotes.tsx que te dio Claude. Lovable lo integra automáticamente y en segundos ves el plano funcionando en el preview.

Paso 5 — Conectar con Google Sheets (tiempo real)

Este es el paso final. Copia el siguiente prompt, pégalo en el chat de Lovable y al final agrega la URL CSV de tu Google Sheet:

Prompt 3 — Para Lovable (conecta con Google Sheets)

Modify the .tsx component file I previously added to src/components/ (the lots map component, keep its current filename) to load lot data from Google Sheets instead of the static LOTES_DATA object. Follow these exact instructions:

1. Add useEffect and useRef to the React import line
2. Replace the static LOTES_DATA object with a LoteData type and a SHEETS_URL constant
3. Add inside the component: lotesData state, cargando state, prevDataRef, intervalRef
4. Add a useEffect that fetches the CSV from SHEETS_URL with cache busting (&cachebust=Date.now()), skips the header row, parses columns A=id, B=area (append " m²"), C=estado, D=precio_m2, auto-generates nombre as "Lote " + id, only updates state if data changed (compare with JSON.stringify), repeats every 15000ms, and cleans up on unmount
5. Replace all references to LOTES_DATA with lotesData
6. If SVG polygon IDs don't match Sheet IDs, normalize them automatically
7. Show "Loading availability..." while cargando is true
8. Add watermark: "✦ Developed by royaltor360.com", 11px, #4a7a2a at 40% opacity, linked to https://royaltor360.com in new tab
9. Never reset lotesData to empty between fetches. If fetch fails, keep previous data visible.

Do not change anything else in the component or rename the file.

Google Sheets CSV URL:

Lovable hace los cambios automáticamente. Luego haz clic en Publish para que los cambios queden en vivo.

¿Cómo se ve el resultado final?

Una vez conectado todo, el flujo es así:

1. Tu equipo de ventas abre Google Sheets desde el celular
2. Cambia el estado de un lote de disponible a vendido
3. En máximo 15 segundos, el plano web refleja el cambio
4. Cualquier persona que tenga el enlace ve la información actualizada

⚠️ Nota sobre el caché de Google: A veces Google tarda unos instantes en propagar el cambio. Si el color no cambia de inmediato, espera unos segundos y recarga la página. El sistema tiene cache-busting activado para minimizar este retraso.

¿Qué sigue después de esto?

Lo que acabas de construir es la base. Un plano interactivo funcional, actualizable en tiempo real, publicado gratis en internet.

Pero si quieres llevar esto al siguiente nivel:

• Un Tour 360° interactivo integrado al plano
• Un CRM para gestionar leads que llegan desde el plano
• Formularios que capturan datos de clientes directamente
• Alertas por correo cada vez que alguien consulta un lote
• Una plataforma de visualización completa para tu proyecto

Resumen del proceso

¿Te resultó útil este artículo? Compártelo con alguien que tenga un proyecto inmobiliario y todavía esté usando PDF estáticos para mostrar la disponibilidad de sus lotes.