Personalización Componente “mapa”

🧩 Introducción #

Este componente se encarga de renderizar el mapa interactivo de inmuebles utilizando Leaflet o una librería personalizada de VisualInmueble (probablemente basada en Leaflet o similar). La información de los inmuebles se inyecta desde el backend en formato JavaScript para que el componente pueda renderizar los marcadores correspondientes.

Se adapta automáticamente a pantallas pequeñas (responsive) mediante media queries.

---

👀 Vista del componente #

El resultado es un mapa como el siguiente, donde puedes navegar, hacer zoom y ver marcadores de inmuebles:

---

💻 Código del componente #

<style>
    @media (max-width: 700px) {
        .mapa-inmueble {
            width: 96%;
        }
    }
</style>

<div class="mapa-inmueble">
    <div id="visualinmueble-map">
        <visualinmueble-map></visualinmueble-map>
    </div>
    
    <script type="text/javascript">
        window.VISUALINMUEBLE_INMUEBLES = <?php echo $inmuebles; ?>;
    </script>
</div>

---

🗂️ Ruta del componente #

Ubicación original en el plugin:

inmuebles/componentes/search/mapa.php

Ruta para sobrescribirlo en tu tema hijo:

visualinmueble/
├── templates/
│   └── inmuebles/
│       └── componentes/
│           └── search/
│               └── mapa.php

---

✏️ Qué se puede editar #

Aquí tienes lo que puedes personalizar:

✅ 1. Tamaño y diseño del mapa #

• El CSS actual solo ajusta el ancho para móviles: @media (max-width: 700px) { .mapa-inmueble { width: 96%; } }
• Puedes personalizarlo para ajustar altura, bordes, sombras, o incluso hacer que ocupe todo el ancho/alto de la página: .mapa-inmueble { height: 500px; border: 1px solid #ccc; border-radius: 10px; }

✅ 2. Contenedor del mapa #

• El <visualinmueble-map> probablemente es un Web Component que se alimenta con window.VISUALINMUEBLE_INMUEBLES. Puedes reemplazarlo por otro contenedor o modificar su comportamiento si tienes acceso al JS del plugin.

✅ 3. Datos del mapa #

• El array de inmuebles en formato JSON se genera así: window.VISUALINMUEBLE_INMUEBLES = <?php echo $inmuebles; ?>;
• Si deseas filtrar, agrupar o transformar los datos antes de pasarlos al mapa, puedes modificar el contenido de $inmuebles antes del echo.

✅ 4. Estilos responsivos #

• Puedes expandir las media queries para personalizar distintos puntos de quiebre (breakpoints) o controlar el comportamiento horizontal/vertical.

✅ 5. Mapa por defecto / ubicación inicial #

• Esto no está en este archivo PHP, pero podrías:
  • Controlar desde JS el center y zoom.
  • Insertar atributos personalizados para cambiar la ubicación por defecto.

✅ 6. Marcadores personalizados #

• Si tienes acceso al JS donde se renderiza el mapa (visualinmueble-map), podrías:
  • Usar iconos propios (SVG, PNG).
  • Añadir tooltips o popups con más info.
  • Agrupar marcadores (clustering).

💡 Ejemplo de mejora visual rápida: #

<style>
    .mapa-inmueble {
        width: 100%;
        height: 500px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    @media (max-width: 768px) {
        .mapa-inmueble {
            height: 300px;
        }
    }
</style>