Advanced Guide to Map Builder

Introduction

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

Basic Maps

Introduction The Flexopus application supports two types of floorplans. This article is about Basic Maps, you can read about Premium Maps in this article. Basic Maps rely on an image of the floorplan, uploaded by the user. You can upload any kind of image that suits your needs the best

Flexopus Help CenterDaniel Fafula

Premium Maps

Introduction The Flexopus application supports two types of floorplans. This article is about Premium Maps, you can read about Basic Maps in this article. Created by the Flexopus team, premium maps come with advanced features and optimized designs to improve navigation and workspace management. With Map Builder, users can further

Flexopus Help CenterDaniel Fafula

Application layout

The Map Builder 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.

Header

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

Use the Options menu (⋮) in the left corner to access global actions. Some of these actions are only available in the dropdown, or via shortcuts.

Next to the options menu, you can find the Tool selector that allows you to switch between the basic tools, ie. the Pan tool, the Selection tool, and the Create objects tool.

At the right end of the header a Close and a Publish button is placed. Once you finished working with your map, you can exit the application with either of these buttons.

Left panel — Layers panel

The left panel contains all the layers of the application. Editable objects of the map are grouped into groups (or layers) such as Workspaces or Furniture, based on their type. You can expand or collapse these groups to tidy up some space. Objects with active bookings appear with amber highlights, while newly added objects get a turquoise emphasis.

Right panel — Tools & Properties

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

Canvas

The central part of the application is the map canvas itself. All the objects 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 objects, use the Selection tool. When enabled, rulers make it easier to position objects. For further accuracy, you can enable a grid overlay.

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

Basic tools

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

Pan tool

Activate the Pan tool by clicking the palm icon in the header, holding Space while using the Selection tool, or by pressing N with shortcuts enabled.

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

Selection tool

Activate the Selection tool by clicking the cursor icon in the header, or by pressing V with shortcuts enabled.

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

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

Create objects tool

To add new objects to the map, select the Create objects tool from the header.

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

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

Project-level functions

Publish & close

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

Export SVG

Flexopus maps are stored in SVG format, using a custom scheme for representing static and bookable objects. You can download your floor plan from the Map Builder and make changes to it in your preferred SVG editor tool. Once you made your changes send the updated map to support@flexopus.com and our colleagues will upload it for you. All maps will be manually evaluated to match the Flexopus Map 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.

You will be asked to select the resolution of the exported map. Click Export SVG to download the file to your computer. In case you have hidden objects, or texts with 0% opacity, you will be prompted to choose what to do with them during the export.

Export PNG

For your convenience, we also added a feature to download a PNG version of the map. You can use this in case you require a raster image format, such as PNG.

To download the PNG file, select Export as SVG from the dropdown menu in the top left corner, or press Ctrl / ⌘ + Shift + E anywhere in the app.

Object-level functions

Changing object properties

All objects have the following common properties: name, position, mirroring, rotation, and size. In some cases, some of these properties are fixed, and can not be changed. Every property can be managed on the right panel (properties panel), the canvas, or the layer list panel. We summarized how to change an attribute. In most of the cases, there are multiple ways to change an attribute.

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

2. Changing the position
   1. Select the object on the canvas using the Selection tool and change the X and Y positions in the properties panel. Once you click in the input field, you can use the up and down arrow keys to change the value. Hold Shift for bigger steps.
   2. Drag and move around the object on the canvas with the Selection tool
   3. Select the object and press the arrow buttons (up/down or left/right) to move it pixel-by-pixel.

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

4. Changing the rotation
   1. Drag and move the corner of a selected object on the map to rotate freely. Hint: the cursor turns to a rotation sign (↻) when hovering the correct handle.
   2. On the properties panel, set a precise rotation in degrees, or click the rotate buttons to change the rotation by 90°.

5. Changing the size: the size of most objects is fixed, with two exceptions.
   1. On Basic Maps, objects have a globally set size that applies to all of them. You can change this by selecting an object and modifying the Size property.
   2. On Basic Maps, the image serving as a background can also be resized by dragging the corner of the image.

Copy & paste

Select the object/objects that you want to duplicate and press Ctrl / ⌘ + C to copy them, then press Ctrl / ⌘ + V to paste. The duplicated object will appear next to its original counterpart.

You can also copy an object by clicking the options menu in the layers panel and selecting Copy.

Lock & hide

Two object states can alter visibility and interactivity on the map: they can be locked or hidden.

The goal of locking is to avoid unwanted changes on some objects while focusing on changing others. For example, once you have placed your bookable desks, you may want to lock them while arranging furniture or decoration objects. On Basic Maps, we lock the background image by default to stop you from accidentally moving it. To lock or unlock an object, click the lock icon in the layers panel, select Lock / Unlock in the options menu, or press Ctrl / ⌘ + L.

The hide feature can be helpful if you want to edit a specific part or modify overlaying objects. Hidden objects are completely removed from the canvas, and are only accessible from the layers panel. To hide or show an object, click the eye icon in the layers panel, select Hide / Show in the options menu, or press Ctrl / ⌘ + H.

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.

Layer ordering

In most cases, the order of the layers does not change as floorplans usually don't contain overlapping objects. However, if your floor plan does have them, you may need to consider layer ordering. The objects on the map are placed on top of each other in the same order as they are displayed on the layers panel, ie.: the first object in the list is the one on top.

You can modify the layer order by four actions, namely: Bring to front, Send to back, Shift up, and Shift down, all of which are found in the options menu, or using shortcuts.

Delete

The application offers 3 ways to delete objects that are not needed anymore.

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

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

Shortcuts

To make Map Builder more easy to use, most actions have a keyboard shortcut registered. To list all the shortcuts in the app, click on Keyboard shortcuts in the bottom right corner.

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

You can find all the possible shortcuts listed here below.