Booth Map Editor
Booth Map Editor
Section titled “Booth Map Editor”The Booth Map Editor is a full-featured canvas tool for designing your event’s booth layout. Drag booths into position, resize them, validate the arrangement, and export the finished floor plan as an image.
How to Get There
Section titled “How to Get There”Home > My Events > [Your Event] > Booth Management > Edit Layout
- Open your Event Dashboard.
- Navigate to Booth Management.
- Tap the Edit Layout button (pencil/map icon) in the header.
- The editor opens with your existing booths loaded on a canvas.
Editor Layout
Section titled “Editor Layout”The editor adapts to your screen size:
Desktop (768px and wider)
Section titled “Desktop (768px and wider)”- Floating header at the top with title, save status, and controls
- Canvas occupying the main area - pannable and zoomable
- Side panel on the right with Inspector (properties) and tools
- Toolbar at the bottom center with action buttons
Mobile (under 768px)
Section titled “Mobile (under 768px)”- Floating header at the top
- Canvas fills the screen
- Side panel slides up from the bottom as a drawer
- Toolbar at the bottom (scrollable)
Working with the Canvas
Section titled “Working with the Canvas”Moving Booths
Section titled “Moving Booths”- Tap a booth element on the canvas to select it.
- Drag it to the desired position.
- Release to drop. The change is tracked for undo/redo.
Selecting Multiple Elements
Section titled “Selecting Multiple Elements”- Click/tap individual elements to select them.
- Selected elements show resize handles.
- Press Escape to clear the selection.
Zooming and Panning
Section titled “Zooming and Panning”- Pinch to zoom on mobile/tablet.
- Scroll wheel to zoom on desktop.
- Drag the canvas background to pan.
- Use the Zoom In, Zoom Out, and Fit buttons in the toolbar.
Inspector (Side Panel)
Section titled “Inspector (Side Panel)”The side panel has two sections:
Properties Panel (top)
Section titled “Properties Panel (top)”Shows details of the currently selected booth:
- Position (X, Y coordinates)
- Size (width, height)
- Booth number
- Other editable properties
Tools Panel (bottom)
Section titled “Tools Panel (bottom)”- Clear All: Remove all elements from the canvas
- Validate: Check the layout for issues (overlapping booths, out-of-bounds elements)
- Reset View: Zoom to fit all elements
Keyboard Shortcuts
Section titled “Keyboard Shortcuts”| Shortcut | Action |
|---|---|
| Ctrl + S | Save the map |
| Ctrl + E | Export the map |
| Ctrl + Z | Undo last action |
| Ctrl + Y or Ctrl + Shift + Z | Redo last action |
| Delete / Backspace | Delete selected element(s) |
| Escape | Cancel resize or clear selection |
| F | Zoom to fit |
| G | Toggle grid lines |
Auto-Save
Section titled “Auto-Save”The editor auto-saves your work:
| Feature | Detail |
|---|---|
| Debounce | 2 seconds after your last change |
| Retry | If a save does not go through, the editor keeps trying on its own for a short while, then tells you if it still could not save |
| Status indicator | Green dot = saved, orange dot = unsaved changes, spinner = saving |
If auto-save still cannot go through, the status shows “Failed.” You can manually save using Ctrl + S or the Save button in the toolbar.
Exporting the Map
Section titled “Exporting the Map”- Click Export in the toolbar (or press Ctrl + E).
- An Export Options dialog appears.
- Choose your format and settings.
- Tap Export.
- A progress dialog shows while the image is being generated.
- The file downloads to your device.
The export calculates the actual bounds of all elements and adds padding for a clean output.
Validation
Section titled “Validation”Tap Validate in the side panel to check for layout issues:
- Overlapping booths: Two booths occupying the same space
- Out-of-bounds elements: Booths positioned outside the canvas area
- Missing positions: Booths without defined coordinates
If validation passes, you see a “No issues found” dialog. If issues are found, a summary count is shown.
Unsaved Changes Warning
Section titled “Unsaved Changes Warning”If you try to navigate away with unsaved changes, a dialog asks:
- Cancel: Stay on the editor
- Save: Save changes and then leave
- Discard: Leave without saving
What to Do Next
Section titled “What to Do Next”| Task | Where to go |
|---|---|
| View the finished map (read-only) | Booth Map Viewer |
| Add a new booth | Create or Edit a Booth |
| Manage booth list | Booth List Management |
| Share the floor plan | Export as image, then share |
Related Articles
Section titled “Related Articles”Troubleshooting
Section titled “Troubleshooting”The canvas is blank when I open the editor. If no booths exist for this event, the canvas starts empty. Create booths first via the Booth List, then reopen the editor.
Save failed and shows a red status. Check your internet connection. Try saving manually with Ctrl + S. If the error persists, the backend may be temporarily unavailable - your changes are preserved locally until you save successfully.
Export failed with an error. Ensure the canvas has at least one element. Empty canvases cannot be exported. Also check that your browser allows file downloads (pop-up blockers can interfere).
I cannot find the side panel. On mobile, the side panel is hidden by default. Tap the Inspector toggle button in the header to slide it up from the bottom. On desktop, it appears on the right side.
Undo is not working. Ensure the editor canvas has keyboard focus. Click on the canvas area first, then use Ctrl + Z. If you have navigated to a dialog or side panel, keyboard shortcuts may not reach the canvas.