Editor de mapas interactivo
Domina todas las herramientas del editor visual para diseñar tus zonas
El editor de mapas te permite crear una representación visual de tu zona donde los clientes pueden seleccionar sus hamacas favoritas.
Acceder al editor
- Ve a Zonas en el menú lateral
- Selecciona una zona existente o crea una nueva
- Haz clic en "Editar mapa"
Interfaz del editor
Botones superiores
En la parte superior del editor encontrarás:
| Botón | Función |
|---|---|
| Editar Zona | Modificar nombre y descripción de la zona |
| Gestionar Planos | Subir o cambiar la imagen de fondo del mapa |
| Nueva Hamaca | Abrir el formulario para crear una hamaca |
| Guardar Mapa | Guardar todas las posiciones y cambios |
Controles de zoom
En el lateral del mapa hay controles de zoom:
- + Acercar la vista
- - Alejar la vista
- Ajustar Encajar todo el mapa en la pantalla
- Porcentaje Muestra el nivel de zoom actual
Controles del ratón
| Acción | Resultado |
|---|---|
| Clic en hamaca | Seleccionar hamaca |
| Doble clic en área vacía | Crear nueva hamaca en esa posición |
| Ctrl + Clic | Añadir/quitar hamacas a la selección |
| Arrastrar en área vacía | Dibujar rectángulo de selección múltiple |
| Espacio + arrastrar | Mover la vista (pan) |
| Arrastrar hamaca | Mover la hamaca seleccionada |
Trabajar con hamacas
Crear una hamaca
Hay dos formas de crear hamacas:
- Doble clic en el mapa: Se abre el formulario con la posición ya definida
- Botón "Nueva Hamaca": Abre el formulario y luego colocas la hamaca
En el formulario selecciona el modelo, nombre y cantidad de hamacas a crear.
Seleccionar hamacas
- Clic: Selecciona una hamaca individual
- Ctrl + Clic: Añade o quita hamacas de la selección
- Arrastrar en vacío: Dibuja un rectángulo para seleccionar varias
Cuando hay hamacas seleccionadas, aparece una barra de información en la parte inferior con:
- Nombre y datos de la hamaca (si es una sola)
- Cantidad y precio total (si son varias)
- Botón Editar (solo con una hamaca seleccionada)
- Botón Eliminar (permite eliminar una o varias)
Mover hamacas
- Selecciona la hamaca
- Arrastra a la nueva posición
- Haz clic en "Guardar Mapa" para conservar los cambios
Redimensionar hamacas
- Selecciona la hamaca
- Aparecen esquinas azules en las puntas
- Arrastra una esquina para cambiar el tamaño
Rotar hamacas
- Selecciona la hamaca
- Aparece un círculo verde encima
- Arrastra el círculo para rotar
- Mantén Shift para rotar en incrementos de 15°
Alinear hamacas
- Selecciona múltiples hamacas (Ctrl+Clic o rectángulo)
- Usa los botones de alineación que aparecen para:
- Alinear a la izquierda
- Centrar horizontalmente
- Alinear a la derecha
- Distribuir uniformemente
Leyenda del editor
En la parte inferior del editor hay una leyenda con:
- Modelos de Hamacas: Los colores de cada modelo y su precio
- Estados: Disponible (verde), Ocupada (rojo), Mantenimiento (amarillo), Bloqueada (gris)
- Controles: Resumen de los controles disponibles
Guardar cambios
Importante: Los cambios de posición NO se guardan automáticamente. Debes hacer clic en "Guardar Mapa" antes de salir.
El botón muestra un indicador de carga mientras guarda. Una vez guardado, los clientes verán la nueva disposición en el widget.
Consejos para un buen diseño
- Deja espacio entre hamacas para que los clientes puedan pasar
- Agrupa por categoría (VIP juntas, estándar juntas)
- Orienta hacia puntos de interés (mar, piscina, bar)
- Usa una imagen de fondo para mayor realismo
Siguiente paso
Aprende a importar una imagen de fondo para hacer tu mapa más visual.