Interactive map editor
Master all the tools of the visual editor to design your zones
The map editor allows you to create a visual representation of your zone where customers can select their favorite sun loungers.
Access the editor
- Go to Lounger Zones → Zones in the side menu
- Select an existing zone or create a new one
- Click on "Edit map"
Editor interface
Top buttons
At the top of the editor you'll find:
| Button | Function |
|---|---|
| Edit Zone | Modify zone name and description |
| Manage Plans | Upload or change the map background image |
| New Lounger | Open the form to create a sun lounger |
| Save Map | Save all positions and changes |
Zoom controls
On the side of the map there are zoom controls:
- + Zoom in
- - Zoom out
- Fit Fit the entire map on screen
- Percentage Shows current zoom level
Mouse controls
| Action | Result |
|---|---|
| Click on lounger | Select lounger |
| Double-click on empty area | Create new lounger at that position |
| Ctrl + Click | Add/remove loungers from selection |
| Drag on empty area | Draw multiple selection rectangle |
| Space + drag | Move the view (pan) |
| Drag lounger | Move the selected lounger |
Working with sun loungers
Create a sun lounger
There are two ways to create sun loungers:
- Double-click on the map: Opens the form with the position already defined
- "New Lounger" button: Opens the form and then you place the lounger
In the form, select the template, name, and number of loungers to create.
Select sun loungers
- Click: Select an individual lounger
- Ctrl + Click: Add or remove loungers from selection
- Drag on empty: Draw a rectangle to select multiple
When loungers are selected, an information bar appears at the bottom with:
- Name and data of the lounger (if single)
- Quantity and total price (if multiple)
- Edit button (only with single lounger selected)
- Delete button (allows deleting one or multiple)
Move sun loungers
- Select the lounger
- Drag to the new position
- Click on "Save Map" to keep the changes
Resize sun loungers
- Select the lounger
- Blue corners appear at the tips
- Drag a corner to change the size
Rotate sun loungers
- Select the lounger
- A green circle appears above
- Drag the circle to rotate
- Hold Shift to rotate in 15° increments
Align sun loungers
- Select multiple loungers (Ctrl+Click or rectangle)
- Use the alignment buttons that appear to:
- Align left
- Center horizontally
- Align right
- Distribute evenly
Editor legend
At the bottom of the editor there's a legend with:
- Lounger Templates: Colors of each template and their price
- States: Available (green), Occupied (red), Maintenance (yellow), Blocked (gray)
- Controls: Summary of available controls
Save changes
Important: Position changes are NOT saved automatically. You must click "Save Map" before leaving.
The button shows a loading indicator while saving. Once saved, customers will see the new layout in the widget.
Tips for good design
- Leave space between loungers so customers can walk through
- Group by category (VIP together, standard together)
- Orient towards points of interest (sea, pool, bar)
- Use a background image for more realism
Next step
Learn to import a background image to make your map more visual.