Maps

To improve navigability within a virtual tour, GoThru Overlay Editor has developed the interactive map. Maps are a great tool for a smart virtual tour that can help conserve energy and create a great experience for visitors. With this map, all the environments included in the tour become more accessible. The user knows through the map where exactly the rooms are located and can reach them directly. There you can move between the different areas and you can enlarge the map through a zoom.

There are three types of maps on Gothru Overlay editor -- Floor Map, Berlin Floor Map and Map Box.

Floor Map

Floor Map allows you to make multiple level maps in one overlay. It is very suitable to show building directories such as houses or buildings with multi-stories.  It is supported by level switcher so the users can go floor to floor and reach specified rooms directly.

How to Work with Floor Map on GoThru Overlay Editor?


1. Click on the “+” button (or A key) to open the Plugin Manager for Hotspots, Menus, Maps, Control Center, and Other. Select Floor Map to add it to your virtual tour.

2. The Map Settings appear on the right panel and the default map area is at the top-right corner of the screen. Make the desired changes to your map design using the tools under the map settings. For information about the tools under map settings, see “Available map setting tools” below.

3. Add an image for the map by clicking on the map image. It will open the asset library then you can select a representative image for the map. You can set up multiple maps with floor map. Slide the multiple map toggle and click on the "+" to add an extra map. The following example, the floor map consists of two floors, 1F and 2F map.

Map Picture.png

4. Resize the map by using the map size slider and choose the position of the map - the top right corner, bottom right corner, top left corner, or bottom left corner.

Map size.png

5. Increase the value of the border radius field to make a rounded corner. GoThru Overlay Border Radius will automatically adjust all 4 corners at once if you click on the up arrow in the border radius fields.

border and radius.gif

6. Click on the “+” button on the Dot list to add a marker or “dot” that connects to the panoramas and represents the areas in your map. Drag the dots to move them around and use the slider of the dot size to change the dot size. You can repeat this step to add more dots to the map.

7. Set the map colors. Common color sets the map colors to connect the colors in the general setting. Background color sets the color of the map background.  Text color sets the colors of texts on the map. Active color sets the color of the active dots. Dot Color sets the color of dots on the map.


8. Now you have a fancy and responsive Floor map on your virtual tour. Once you are happy with the map setups, click “save”  and “publish” to see the results.

Available map setting tools

The floor map uses options which can be set in the same way as other map options, and these are the available options under the Map settings :

Map Size

This feature is used to adjust the size of the map in your overlay, slide the bar to the right to enlarge the map.

Area

You can choose the top right corner, bottom right corner, top left corner, and bottom left corner of your screen. Defaults to 'top-right'.

Margin

Margin is the distance between the map and the tour edges. Adjust the margin to make your overlay look more attractive and match the design to your Side Menu

Border

The border is space between your Map and the background

Border Radius

The border radius is the roundness of the corner in your map background. Increase the value in each field to make a rounded corner and GoThru Overlay Border Radius will automatically adjust all four corners at once.

Multiple maps

Turn on multiple map buttons to make a multi-level map, give the name of each level. The name also represents the level switcher that allows you to move from one floor to the other floors in the building.

Map Image

you can use your own designed map that you have uploaded to the asset manager.

Map Angle

This feature adjusts the angle of a dot on your map.

Dot
Use the Dots list to add clickable dots on the map connected to the rooms in a tour and Dot size to adjust the size. You can also change the color of dots on the map using the Dot color tool.

Colors
Common color sets the map colors to connect the colors in the general setting.
Background color sets the color of the map background.
Text color sets the colors of texts on the map.
Active color sets the color of the active dots.
Dot Color sets the color of dots on the map.