Skip to main content

Map builder

Advanced guide to Floorplanner

Introduction

In this article, we delve into the advanced features of the Floorplanner that can elevate your plan editing skills. Previously, we covered the differences between Basic Plans and Premium Plans and demonstrated how to create a floor plan, add, edit, remove resources, and publish changes in Flexopus. If you haven't read those articles, we recommend doing so first. Here, we'll focus on using premium plans as examples. Note that some features discussed are exclusive to premium plans and not available on basic plans.

Basic maps
Learn how to create and customize basic maps in Flexopus by uploading floor plan images and adding interactive objects.
Premium maps
Learn how to obtain and customize premium maps in Flexopus for enhanced navigation and workspace management.

Application layout

Layout of the Map Builder application

The Floorplanner application is built up of four major parts. You will find every important function in one of these areas, arranged to be as easy to use as possible.


In the application header, you can find application-level information and actions.

Application header

To access global actions in the Floorplanner, use the Options menu (⋮) located in the left corner. Some actions are only available in the dropdown, or via shortcuts.

Options menu dropdown

Next to the Options menu, you'll find the Tool Selector, which allows you to switch between the basic tools, such as the Pan tool, Selection tool, and Create Resource tool.

At the right end of the header, you'll see the Close and Publish buttons. Once you've finished working on your plan, you can exit the application using either button. Publish saves your changes, while Close exits without saving.

Your changes are not saved as you are working. To save your work, you must always publish your plan and confirm the modifications in Flexopus as well. To discard your changes you can click on Close, or just close the browser window/tab.

Left panel — Layers panel

The left panel contains all the layers of the application, with editable resources grouped by type into layers such as Workspaces or Furniture. You can expand or collapse these groups to organize the space more efficiently.

  • Resources with active bookings are highlighted in amber.
  • Newly added resources are emphasized with a turquoise highlight.

This helps you to quickly identify active and recently added elements on the map.

Layers panel overview

Right panel — Tools & Properties

The right panel serves a double purpose. On one hand, it is used to display options for adding a new resource, and on the other hand, it hosts the settings panel where you can modify all the properties of a selected resource.

The right panel is used for selecting a new resource
The right panel shows the properties of a selected resource

Canvas

The central part of the application is the map canvas itself. All the resources are displayed on the canvas, except for the ones you explicitly hide. You can navigate on the canvas with the Pan tool, the scroller button of your mouse, or the zoom controls in the bottom right corner of the canvas. To select one or more resource, use the Selection tool. When enabled, rulers make it easier to position resources. For further accuracy, you can enable a grid overlay.

Rulers and zoom controls of the canvas

You can access some of the resource-level actions by right-clicking on one of the resources, and some basic application-level actions by right-clicking the background of the canvas.

Context menu of a resource
Context menu of the application

Basic tools

You can control the application with the three base tools, which you can select in the header panel.


Pan tool

You can activate the Pan tool in the following ways:

  • Click the palm icon in the header.
  • Hold Space while using the Selection tool.
  • Press N if shortcuts are enabled.

This allows you to easily move the map around without interacting with the resources.

Pan tool in the header panel

With the Pan tool, you can grab the plan and navigate without accidentally moving any of the resources. Use the zoom controls, or the mouse wheel to zoom in or out.


Selection tool

You can activate the Selection tool in two ways:

  • Click the cursor icon in the header.
  • Press V if shortcuts are enabled.

This allows you to select, move, and modify resources on the map.

Selection tool in the header panel

As the name suggests, the selection tool's main function is to select resources on the plan. Click on any resource to select them, or draw a bounding box by holding down the left mouse key, to select one or more neighboring resources.

Multiple selection

You can then drag and move resources, or rotate them by dragging the handle at their corner. When moving close to other resources, guidelines appear to help to position the resource precisely.

Move and rotate resources with the selection tool

Create resources tool

To add new resources to the map, select the Create Objects (+) tool from the header. This will allow you to place new items on the map.

Create objects tool in the header panel

Once you have activated the tool, you will be asked to select the type of resource you want to create. You can do this by clicking a category on the right panel.

Types of new resources

Most resource types have variants or configurations. Select the variant from the list and click anywhere on the map to place a new resource. You can also create items by dragging and dropping them directly on the plan.

Add new resources to the plan

Project-level functions

Publish & close

There are two ways of exiting Floorplanner: you can either close the app and discard your changes, or publish the changed plan to Flexopus. Either way, you will be taken back to the Flexopus admin dashboard.

Close and Publish buttons
Floorplanner does not save your changes as you go. Always click on Publish if you want your changes to be kept.

Export SVG

Flexopus maps are stored in SVG format, using a custom scheme for representing static and bookable resources. You can download your floor plan from the Floorplanner and make changes to it in your preferred SVG editor tool. Once you made your changes send the updated plan to support@flexopus.com and our colleagues will upload it for you. All plans will be manually evaluated to match the Flexopus Plan Scheme, ensuring no mistakes are made.

To download your SVG map, click the Options menu in the top left corner of the application and select Export as SVG from the dropdown menu, or press ⌘ + E anywhere in the app to quickly export the plan.

Options menu dropdown

When exporting your plan as an SVG, you will be prompted to select the resolution of the exported map. After making your selection, click Export SVG to download the file to your computer.

If there are hidden resources or text with 0% opacity on the map, you will be prompted to decide how to handle them during the export process. You can choose to include or exclude these elements.

Export options modal
Chose what to do with hidden and transparent elements

Export PNG

For your convenience, you can also download a PNG version of the map if you require a raster image format.

To download the PNG file:

  • Select Export as PNG from the dropdown menu in the top left corner, or
  • Press Ctrl / ⌘ + Shift + E anywhere in the app to quickly export the map as a PNG file.

PNG files do not contain the information that Flexopus uses to link the resources with their visual representation, thus they can not be used to reconstruct Flexopus floor plans.

Object-level functions


Changing object properties


All resources in Flexopus have common properties such as name, position, mirroring, rotation, and size. Some of these properties may be fixed and not editable. You can manage these attributes through the properties panel, the canvas, or the layer list panel. Below are the methods to change a resource's name:

  • Method 1: Select the resource on the canvas using the Selection tool and change the name in the properties panel.
  • Method 2: Double-click the resource name in the layers panel to enter Edit mode.
  • Method 3: Click the options button (⋮) next to the resource in the layers panel, and select Rename from the menu to enter Edit mode.

These multiple options allow flexibility in managing resource attributes.

Change the name on the properties panel
Select Rename in the options menu
Edit mode

To change the position of a resource, you have several options:

Change in the properties panel:

These methods give you precision when positioning resources on the plan.

    • Select the resource on the canvas using the Selection tool.
    • In the properties panel, adjust the X and Y positions.
    • You can use the up/down arrow keys in the input field to change the value. Hold Shift for bigger increments.

Drag on the canvas:

    • Use the Selection tool to drag and move the resource directly on the canvas.

Use arrow keys:

    • Select the resource and use the arrow keys (up/down or left/right) to move it pixel-by-pixel.
Change the position on the properties panel
Moving a resource on the canvas

Mirror resource: once selected, click the horizontal or vertical flip buttons to mirror the resource over the X or Y axis.

Mirror a resource over one of the two axes

To change the rotation of a resource, you have two main options:

Rotate freely on the canvas:

These methods give you control over the rotation of resources.

    • Select the resource on the map.
    • Drag the corner of the resource to rotate it. When you hover over the correct handle, the cursor will turn into a rotation sign (↻).

Rotate precisely in the properties panel:

    • In the properties panel, enter a specific rotation value in degrees for precise adjustments.
    • Alternatively, click the rotate buttons to change the rotation by 90° increments.
Rotate a resource on the canvas
Change rotation on the properties panel

Changing the size: the size of most resources is fixed, with two exceptions.

  1. On Basic Plans, resources have a globally set size that applies to all of them by default. You can change this by selecting a resource and adjusting the Size property in the properties panel.

Additionally, the background image can also be resized:

  • Simply drag the corner of the image to adjust its size as needed.

These features allow you to tailor both the resources and the background image to fit your plan layout.

Changing the size of badge-type resources (Basic Plans)
Resize plan image on the canvas
Images on basic plans are locked by default. To resize your background image, you have to unlock it first.

Copy & paste

To duplicate resources:

  1. Select the resource(s) you want to duplicate.
  2. Press Ctrl / ⌘ + C to copy them.
  3. Press Ctrl / ⌘ + V to paste the duplicated resource(s).

The duplicated resource will appear next to the original counterpart on the plan.

Pressing Ctrl / ⌘ + V repeatedly will stack duplicates on top of each other. Be sure to move the duplicated resources to their appropriate positions to avoid overlap and ensure proper placement on the plan.

You can also copy a resource by opening the options menu (⋮) in the layers panel and selecting Copy.

Copy a resource from the layers panel

Lock & hide

Two resource states can alter a resource's visibility and interactivity on the plan: locked and hidden.

  • Locking resources prevents unwanted changes while you focus on editing others. For example, after placing bookable desks, you may want to lock them while arranging furniture or decorations. On Basic Plans, the background image is locked by default to prevent accidental movement.

To lock or unlock a resource:

  • Click the lock icon in the layers panel.
  • Select Lock/Unlock in the options menu.
  • Press Ctrl / ⌘ + L to quickly toggle the lock state.

This helps maintain control over which resources can be modified.

Locked resources are not selectable. To make any changes, you have to unlock them in the layers panel.
Locking and unlocking objects

The hide feature is useful when you need to focus on a specific part of the plan or modify overlapping resources. Hidden resources are completely removed from the canvas but remain accessible through the layers panel.

To hide or show a resource:

  • Click the eye icon in the layers panel.
  • Select Hide/Show from the options menu.
  • Press Ctrl / ⌘ + H to toggle the visibility of the resource.

This allows you to work more efficiently by clearing clutter from the workspace without deleting resources.

Hiding and showing objects
You will be asked what to do with hidden resources when publishing your plan. Leaving hidden resources on the plan is not recommended, as it may cause issues in the booking process.

The lock and hide features can also be used on a group level, by clicking the lock or the eye icon next to a layer's name in the layers panel.

Lock or hide all workspaces

Layer ordering

In most cases, layer order isn't a concern, as floor plans typically don't contain overlapping resources. However, if your floor plan does have overlapping elements, you'll need to consider the layer order.

Resources on the plan are stacked in the same order as they appear in the layers panel. This means that the first resource in the list is displayed on top. Adjusting the order of layers can help ensure that resources are correctly displayed in relation to one another.

Object layer ordering demonstration

You can modify the layer order of resources using four actions:

  1. Bring to Front: Moves the selected resource to the top of the layer stack.
  2. Send to Back: Moves the selected resource to the bottom of the layer stack.
  3. Shift Up: Moves the resource one layer up.
  4. Shift Down: Moves the resource one layer down.

These actions are available in the options menu or can be done using keyboard shortcuts for quick adjustments.

Change layer order
Due to the plan structure, the layer order is constrained by the grouping of the resources. This means that you can not create alternating order of multiple, different types of resources. Resources of one type are always neighbors in the layer order.

Delete

The application offers 3 ways to delete unnecessary resources:

  1. Select Delete from the options menu in the layers panel.
  2. Select the resource(s), then click the trash bin icon in the properties panel.
  3. Select the resource(s) and press Backspace or Del on your keyboard.

These options allow you to efficiently remove resources from the map.

Delete a resource

In any case, you will be asked to confirm the deleting operation. You may also select multiple resources and delete them at once.

Confirm delete operation
You can not delete resources with active bookings on them, therefore you have to delete all bookings connected to the resource in Flexopus.
Booked resources can not be deleted

Shortcuts

To make the Floorplanner easier to use, most actions have corresponding keyboard shortcuts. To view a full list of shortcuts, simply click on Keyboard Shortcuts in the bottom right corner of the application. This will display all available shortcuts for quicker navigation and editing.

Keyboard shortcuts

By default, shortcuts are turned on. This may cause issues since binding the key combinations to Floorplanner might prevent the system or other apps from handling important keyboard shortcuts. If you experience any blocking issues, you can disable Floorplanner's shortcut handling in the dialog.

Enable and disable shortcuts

You can find all the possible shortcuts listed here below.

Action Shortcut
Close editor ⇧Q
Save & Publish ⌘P
Export as SVG ⌘E
Export as PNG ⌘⇧E
Activate "Navigation" tool N
Activate "Selection" tool V
Activate "Spaces" tool T
Activate "Parking" tool P
Activate "Rooms" tool M
Activate "Special Object" tool X
Activate "Furniture" tool F
Show/Hide grid ⇧G
Show/Hide ruler ⇧R
Show/Hide navigation ⇧N
Zoom in W
Zoom out S
Reset zoom E
Rename selected layer/s Dbl Click
Copy selected layer/s ⌘C
Paste layer/s ⌘V
Hide/Show selected layer/s ⌘H
Lock/Unlock selected layer/s ⌘L
Delete selected layer/s
Shift up ⌘ + arrow up
Shift down ⌘ + arrow down
Bring to front ⌘⇧ + arrow up
Send to back ⌘⇧ + arrow down
Move layer arrow keys
Fast move layer ⇧ + arrow keys