Add a Floor Plan

Learn how to add a floor plan to a tour.

Floor Plans can be added to a Map Element in the skin or they can be added directly to the skin. An advantage to adding them directly to the skin is that radar beams won’t be cut off at the edges as what may happen when using a Map Element. A map element, on the other hand will provide map pins and a radar and a few options for handling the floor plan.

For both options, makes sure to set the nodes’ headings before linking them to avoid misaligned links and views.

Adding the Floor Plan to the Skin

In this example, we’ll add a floor plan to the skin directly using a floor plan for one floor level.

  1. Add the tour nodes to the Tour Browser.
  2. Set the nodes’ headings. Hold the N key down and drag the panorama in the Viewer to the correct heading. You’ll see direction markers in the Viewer and the radar in the Tour Map move.
  3. [Optional] Geolocate the floor plan.
  4. Link the nodes.
  5. Add Titles to the nodes in User Data.
  6. Open the Skin Editor.
  7. Drag in the Floor Plan to the skin’s Canvas.
  8. Set the Anchor to the top right (or wherever you’d like to keep floor plan pinned).
  9. Define a markertemplate. This is needed to add interactive map pins. Open the Components Toolbox and find Map Pin with Radar Silhouette. Double-click to add it to the Canvas. This component is a map pin with a built-in radar.
  10. Drag the nodes from the Tour Browser to the floor plan in the skin canvas (On a Mac, you’ll need to pop the Tour Browser out first and then bring the Skin Editor into focus.). This will add the map pins. To refine placement, click in the Canvas to deselect everything and then select the pin and drag.
    Floor plan and markers added to the skin.
    Floor plan and markers added to the skin.
  11. Save the skin.
  12. Output the project.

Using the Map element to add a Floor Plan

One of the advantages of using this method is that you can set up your nodes and add them to the Floor Plan without opening the Skin Editor. However, you’ll still need to work in the Skin Editor to add the Map Element.

If your nodes don’t have GPS, you can add location data to the floor plan. Then you can drag the nodes to the tour map and they’ll be placed automatically.

  1. Add the tour nodes to the Tour Browser.
  2. Open the Tour Map.
  3. Add the floor plan by clicking the Add Map*_ button. Choose Add Floor Plan. Select the image that will be used as the floor plan.
  4. Open the Properties panel. For the format, select the image format of the floor plan. This will be either JPG or PNG. ★ Tip: if using PNG and you’d like to have a transparent background, set the Background Color’s alpha channel to 0.
  5. [Optional]Add location data to the floor plan.
  6. Drag the nodes from the Tour Browser to their places on the floor plan.
  7. Set the directions (heading). Hold the N key down and drag the panorama in the Viewer to the correct heading. You’ll see direction markers in the Viewer and the radar in the Tour Map move.
  8. Link the nodes using automatic linking. In the Menu, choose Tour > Automatic Linking.
  9. Open the Skin Editor.
  10. Add a Map Element and draw the map on the canvas.
  11. Set the element’s anchor. If the map should stick to the upper right corner, then select the corresponding section in the grid for Anchor. Then, refine the element’s position, if needed.
  12. Go to the Map properties and select Floor Plan.
  13. Select the Floor Plan that was added to the Tour Map.
  14. Change the Anchor to center.
  15. Save the skin. You could output it from here and then you can make some design decisions.

You’ll notice that the map element will add map pins. These pins are not interactive. But you can replace them with interactive pins and use custom pins:

  1. Open the skin to edit.
  2. Open the Components Toolbox. Find the Map Element Map Pin, then add it to the skin.
  3. Select the Map element and go to the Floor Plan settings. For Clone as Marker, select map_pin.
  4. Save the skin and output to test. You now have interactive map pins.

If you want different pins, you can swap these out in the Image parameters.

The option, Simple Floor Plan, is set by default. This keeps the floor plan from being zoomed or panned. It doesn’t require internet access. The floor plan will be scaled to fit the map element. If you want zoom enabled, deselect Simple Floor Plan. You’ll be presented with more options to refine how the floor plan behaves.


See also