Map Element

Maps and Floor Plans can be easily added to the skin by selecting the Map Element in the Toolbar and clicking in the Canvas to add.

The Map element shows your tour on a map or a floor plan, with a pin for every node. Your visitors click a pin to jump to that node, and an optional radar beam shows which way they are looking.

To add it, select Map in the Toolbar and click in the Canvas. The maps and floor plans themselves are set up in the Tour Map; the Map element decides which one to show and how it behaves.

Only nodes with a location get a pin. On a map, a node needs GPS coordinates; on a floor plan, the node has to be placed on that floor plan.

Rectangle

Border

The border or outline of the map element. Click the Toggle Single/Separate Values button next to each parameter to switch between adjusting the entire border and adjusting each edge (each corner for Radius) separately.

• Width – How wide the border is.

• Radius – Rounds the corners of the map. A large radius makes a round map.

• Color – Choose a color for the border. ✭ Logic Block available.

Map

Map Type

Choose to show a Map or a Floor Plan. The settings below change to match the type, and switching the type also resets the map or floor plan choice.

Map

Map – Choose the type of Google Map, or a map added in the Tour Map:

• Google Roadmap

• Google Hybrid

• Google Satellite

• Google Terrain

• First Map in Project – Shows the first map added to the Tour Map. Use this in a component or a skin you want to reuse in other projects, so it always picks up that project’s map. If the project has no map, the element stays empty.

Maps you’ve added in the Tour Map (OpenStreetMap, Mapbox, custom tiles, or your own Google map styles) are listed here too, by title and ID.

API – The map library used to show the map in the tour. The Google maps above always use the Google API, so this menu is only available for other maps.

• Auto – Pano2VR picks the API for you: Google for Google maps, Leaflet for everything else.

• Google – Shows the map through the Google Maps API. An API key is needed, see below.

• Leaflet – Open source, and no key is needed.

Google API Key – Enter your Google API key. Every map shown through the Google API needs a key from Google, not only Google’s own maps. Learn how to create a key. ✭ When setting up this key, make sure to lock this key to your domain (HTTP referrers). ✭ Do not use the same key you use for the Tour Map (for adding Place IDs for Google Street View).

Initial Zoom – The map’s zoom level when it first loads. The default, Marker Bounds, zooms and centers the map so all pins fit inside the element. You can also set a level between 0 and 23: 0 shows the whole world, 23 is the closest zoom.

Satellite Map – Available only when Google Satellite or Google Hybrid is chosen as the Map. Select Disable 45° View to stop the map from switching to Google’s tilted 45° imagery when zooming in.

UI – Settings for the map’s user interface.

• Map controls – Shows the map’s zoom buttons.
• Fractional zoom – Allows smaller zoom steps (between zoom levels) with the mouse wheel and pinch to zoom. The map controls still zoom by a full level. ★ Available only for the Leaflet API and for floor plans (when Simple floor plan is unselected).

Node Change – Select Center node to keep the current node centered on the map. If your visitor has zoomed in and moves through the tour, the map pans along with them.

Radar – Select Enabled to show a radar beam at the current node’s pin. It points where your visitor is looking, turns with the view, and gets wider or narrower with the field of view. For the beam to point the right way, set North for your nodes.

• Color – The color of the beam. It is drawn semi-transparent over the map.

• Size – The length of the beam in pixels.

Marker Clustering – Select Enable to group pins that are close together into a single circle showing how many pins it holds. Click the circle to zoom in and reveal the pins. The current node’s pin always stays visible on its own. Clustering uses the standard pins, so Clone as Marker and Pin Order are not available while it is on.

Clone as Marker – Use an element from your skin as the pin instead of the standard one. See Clone as Marker below.

Pin Order – The order in which pins are added to the map. A pin is drawn on top of the pins added before it, so this decides which pins can cover their neighbors. This matters most for custom markers with thumbnails or tooltips.

• Tour Browser – The same order as in the Tour Browser.

• Top to Bottom – Pins at the top of the map first, so lower pins cover the ones above them.

• Bottom to Top – Pins at the bottom first, so higher pins cover the ones below them.

• Left to Right – Pins on the left first, so pins further right cover the ones to their left.

• Right to Left – Pins on the right first, so pins further left cover the ones to their right.

Floor Plan Overlay – Lays one of your floor plans over the map, at its real-world position. Only floor plans that you’ve given a latitude and longitude in the floor plan properties are listed.

• Opacity – The overlay’s opacity, from 0 (invisible) to 1 (solid).

Loading – Select Unload map on hide to unload the map when a skin action hides it. When the map is shown again, it starts fresh and is centered around the tour’s pins. When unselected, the map keeps its position and zoom while hidden.

Floor Plan

Floor Plan – Choose a floor plan that has been added to the Tour Map. Choose First Floor Plan in Project in a component or a skin to use the first floor plan rather than a specific floor plan.

• Simple floor plan – When selected, the floor plan is shown as a single image, scaled to fit the map element. It can’t be zoomed or panned, and needs no internet access. When unselected, the floor plan can be panned and zoomed but needs internet access.

Initial Zoom – The floor plan’s zoom level when it first loads. The default, Marker Bounds, zooms and centers the floor plan so all pins fit inside the element. You can also set a level between 0 and 23: 0 shows the whole floor plan, 23 is the closest zoom. (Not available if Simple floor plan is selected.)

UI – Map controls shows the zoom buttons, and Fractional zoom allows smaller zoom steps with the mouse wheel and pinch to zoom. (Not available if Simple floor plan is selected.)

Node Change – Select what should happen on a node change.

• Center node – Select to keep the current node’s pin centered in the floor plan when the node changes. (Not available if Simple floor plan is selected.)

• Auto-switch floor plan – When your visitor moves to a node that is not on the floor plan being shown, the element switches to the floor plan that has this node. The zoom level is kept. When this option is not selected, the floor plan stays the same and the current node has no pin.

Radar – Select Enabled to show a radar beam at the current node’s pin, pointing where your visitor is looking. Besides each node’s North, it takes the floor plan’s own North from the floor plan properties into account.

• Color – The color of the beam.

• Size – The length of the beam in pixels.

Clone as Marker – Use an element from your skin as the pin instead of the standard one. See Clone as Marker below.

Pin Order – The order in which pins are added to the floor plan. A pin is drawn on top of the pins added before it, so this decides which pins can cover their neighbors. The choices are the same as for maps.

Alignment – Choose where the simple floor plan sits inside the map element when the element’s shape doesn’t match the floor plan’s.

Loading – Select Unload map on hide to unload the floor plan when a skin action hides it. When the floor plan is shown again, it starts fresh and is centered around the tour’s pins. When unselected, the floor plan keeps its position and zoom while hidden.

Clone as Marker

Without this setting, every node gets a standard pin: Google’s red pin on maps using the Google API, and a built-in pin on Leaflet maps and floor plans. Hovering over a standard pin shows the node’s title, and clicking it opens the node.

With Clone as Marker, you design the pin yourself. Choose the ID of an element in your skin from the menu, or type it in. For every node with a location, Pano2VR makes a copy of that element and places it on the map at the node’s position. Leave the field empty to go back to the standard pins.

The element you choose is only a template. It doesn’t show up in the tour by itself, so you can keep it anywhere in the skin, for example hidden next to the map. Usually it is a container with images, a text box, or a node image inside. Node markers and other map elements can’t be used and are not listed. A warning symbol appears next to the field if no element with that ID exists.

Each copy belongs to its own node, so it can show that node and react to it:

• A node image inside the marker shows that node’s thumbnail.
• Placeholders in a text box, like $(ut) for the title, show that node’s user data.
• The Active logic block trigger is true for the pin of the node your visitor is in, so you can highlight it. The Visited and Tags triggers work with the marker’s node as well.
• The Activate and Deactivate action sources fire when the marker’s node becomes, or stops being, the current node.

The template’s anchor, set under Position, is the spot that sits exactly on the node’s location. Use bottom center for a pin with a tip, or center for a round dot.

A custom marker doesn’t open its node by itself. Give the template a Mouse Click action, Open Next Panorama, with the value $(hu). Inside a marker, $(hu) stands for the marker’s node.

Filtering and Controlling the Map

Skin actions change what the map shows while the tour is running:

• A Set Value action on the Map element shows only the pins of nodes with certain tags. Separate several tags with a comma, or set an empty value to show all pins again. If no node has any of the tags, all pins are shown.
• The Maps actions switch to another map or floor plan, zoom in and out, zoom back to all pins, center a node, change the map layer, or set the tag filter.

Position

ID

Give the element a unique ID or name. An ID is given automatically and will be numerically ordered when more than one are added. If an ID is already used by another element, a warning symbol will appear next to the input field.

Point Hotspot Templates will have a menu that shows all the default template IDs as well as any template IDs used in the project.

Position

The X and Y coordinates for the element.

An element’s position is relative to its parent and to its anchored position (the Canvas is the parent to top level elements).

For example, a video that is anchored and placed in the middle of the Canvas will have its anchor set to center and X and Y set to 0. So, if the element is anchored to the horizontal center, the X coordinate is measured from the center of the parent to the horizontal center of the element. Likewise, if an element is anchored right, the x-coordinate is measured from the right side of the parent to the right side of the element as indicated by the arrows.

X and Y:

• Pixels – Unit to set the actual location of the element within the skin.

• Percent – Unit to set the position of the element based on the size of its parent (the player window for top level elements).

• CSS – Select CSS as a unit to allow for changing units when a logic block has been added or to use calculations.

  • Example: Set the x position unit to CSS. Enter, 100px in the edit field. Add a logic block, choose a trigger and add 20% for the size, effectively switching units.

Anchor

Use this grid to “stick” the element to a section of the player window. See above, to learn how the Anchor influences Position.

Size

The Hotspot Template and Node Marker do not have a size parameter.

Adjust the element’s size (width and height). Width and Height:

• Pixels – Unit to set the actual size of the element.

• Percent – Unit to set the size of the element based on the size of its parent (the player window for top level elements).

• Lock Aspect Ratio – Click the link icon to lock the element’s size aspect ratio when resizing in the Canvas or changing size values in the properties panel. This button is reset to off when another element is selected.

• CSS – Select CSS as a unit to allow for changing units when a logic block has been added or to use calculations.

  • Example: Position an element 50 pixels from the top and then set the height to calc(100% - 50px). The element will then always have the same distance of 50px from the top and will extend straight down to the bottom.

• Reset Size – Available for Image, Button, and SVG elements. Click to return to the image’s original size.

• Reset Size/2 – Available for Image, Button, and SVG elements. Use this when you want to add a PNG or JPG to your project but still want it looking sharp in Hi-DPI displays. For example, if the skin requires a 32px image, use a 64px image and then click, Reset Size/2. This will then make it 32px in the skin but will still have all the pixels for a high resolution display.

Appearance

Scaling

Scales the element along the x and y axes. Doubling the value on either axis, for instance, will double the size of the element. If a scaling modifier is enabled, this scaling setting is ignored.

Center

Use this grid to determine how the element scales. The default is set to the center so the element will scale in or out from its center. If you anchor the scaling to the upper left corner, for example, the scaling will center from this point.

Angle

Use this parameter to adjust the angle of the element. It will use the Center grid (above) as its axis. For example, if the center is chosen, it will rotate around its center. If the bottom left corner is selected, the button will rotate around that corner.

Visible

Select or deselect to keep the element visible or invisible. Visibility or invisibility can be changed and toggled with actions.

Alpha

The transparency of the element. A setting of 1.000 is opaque. Lowering this number will increase the elements’s transparency.

Cursor

Choose which cursor shows when the mouse rolls over the element.

Inherit – The element will inherit the cursor from its parent element. This is the default for all elements except Button and Seekbar.

Hand – The hand cursor will show. This is the default for Button and Seekbar elements. When selected, the cursor is not inherited from its parent element.

Default – Choose this option to force the browser’s default cursor (usually an arrow). When selected, the cursor is not inherited from its parent element.

Masking

Available for Container, Cloner, and Rectangle elements. Select Enabled to clip child elements at the element’s boundaries.

Accessibility

Tab Index

To make skin elements controllable via keyboard, they have to be added to the tab order of the web page. A tab index of -1 (the default) excludes the element from the tab order. A tab index of 0 includes the element in the tab order. Values from 1 to 99 include it with an explicit position: the browser visits those elements first, in ascending order. Browsers highlight the active element by putting a rectangle around them. Once a skin element is the active element, indicated by the highlight, press Return (macOS) or Enter (Windows) to trigger its click action.

ARIA Label, Description, Details

These are attributes or properties that are used to define the element and support the Role.

ARIA Label – Defines or names the element.

ARIA Description – Provide a brief description of the element.

ARIA Details – Provide an extended, detailed description of the element. This field uses your system’s spell checker.

ARIA Role

ARIA roles are used to define UI elements (button, loading bar, and so on). Choose from the list which best defines the element, or type another role.

ARIA Hidden

Select to hide all ARIA attributes.

Advanced

Z-Index

Set the CSS z-index property. Use numbers to set the stacking order or leave the setting at Default. Default will use the stacking order set in the Tree.

This is used to ensure that elements are displayed in the correct stacking order especially when close or overlapping.

Use the Logic Block to change the Z-index value using variables, for example.

Permeable

Select to make sure the element does not accept mouse clicks. This is useful for when you want to include an element in the skin but don’t want it to hinder the ability to interact with the panorama. For example, you could add a vignette or logo or border that when clicked on, will allow interaction with the panoramas.

Proxy ID

Link the element to a hotspot or to an object in a 3D model, so that the element receives the same mouse and touch events: mouse click, mouse double-click, mouse enter, and mouse leave. The element responds with its own actions for those events, so it needs a matching action to react. For example, a text box with a Mouse Enter action that shows it and a Mouse Leave action that hides it can work as a tooltip for a hotspot.

Enter one of the following:

• The ID of a hotspot, from the ID field in the hotspot properties. See hotspot proxy ID.
• The name of an object in a 3D model node. Right-click the model tree in the Overview panel to copy an object’s name.
• A node ID in curly brackets, like {node2}, to react to hotspots that link to that node. Learn more.
• A # followed by a regular expression, like #^info, to react to every hotspot or object whose ID matches.
• * to react to all of them.

CSS Classes

Enter the CSS class names for the selected element. You can enter more than one class separated by spaces. If you need more space, click the Edit button to the right of the field for a larger text field. No dot . needed.

Logic Block available. Use the Additive Mode, to apply different classes to the element. Every condition adds a class (or multiple classes) to the default list of classes set in the CSS classes property of the element or stylesheet. Classes set in the property are not replaced but rather added to.

CSS Styles

Enter the CSS style attributes for the selected element. You can enter more than one style separated by semi-colons. If you need more space, click the Edit button to the right of the field for a larger text field.

CSS Styles Inner Element

Enter CSS style attributes for the selected element’s inner element. (Some skin elements, like Image, Video and External Image, have an inner element nested inside the element’s main <div>.)

For example, an image element can have a border: border-radius: 20px; border: 5px solid red;. This can also be entered with a line break: border-radius: 20px; border: 5px solid red;

Keyboard Shortcut

Enter the preferred key to control the action defined to the element. For example, select the text field and press the Up Arrow key. Then add a Mouse Click action. The element performs the action when it’s clicked or when the Up Arrow key is pressed. Click Clear to remove the shortcut.

Exclude from Translation

Select this option to not include this element in the skin’s translation file.

Safe Area

Available for the Container Element.

Select Use Safe Area for Position and Size to keep child elements of the container inside the safe area of the device. This option makes sure that the elements are always 100% visible and the skin will automatically react to the device’s safe area.

Make sure Ignore Safe Area is not selected in the HTML template settings in the Web Output.

Actions

Actions or a set of directions can be applied to any element added to the skin to create interactivity.

Double-click in the Actions area or click the plus sign to the right to open the Action Settings.

See Skin Actions, for details on all actions.

Modifiers

Adding modifiers allows you to make elements move, scale or rotate when the panorama is being panned, tilted, zoomed or loaded. A good example of a use of a modifier is for a loading bar that scales in relation to how much of the panorama has been loaded.

Double-click in the Modifiers area or hit the plus sign to the right to open the Modifier Settings.

See Skin Modifiers, for more details on all modifiers.

Notes

Use this section to add information about the element. This is especially useful if you have a component and want to explain the elements inside that component. The notes field uses your system’s spell checker.

Notes will show up as tooltips in the Tree.

See also…

• Skin Editor

• Skin Settings

• Tour Map

• Add a Tour Map

• Setting up a Google API key