Interactive Map

Interactive Map is part of the Image Component Set. Studio Users upload a map and set interaction points along with content for each interaction point. When app users tap an interaction point the content below the image dynamically updates with the related content. This Interactive Map is designed to occupy a full Page in the app and other Components should not be added to a Page when the Interactive Image is used.

Ideas for Using Interactive Map

Add the floor plan of an event venue and highlight breakout rooms, allowing app users to plan their visit or navigate during an event.
Help students and visitors find their way around a large school campus. Use the interaction points to highlight key places students should visit during the campus tour. Studio users can also choose to add a custom icon for an interaction point. For example, add a restroom icon to identify the bathrooms or an info icon to highlight the information booths.

If you are looking for a simpler interactive component, check out the Interactive Image.

Interactive Map Properties

The Interactive Map Component has the following properties:

Component Id - Sets the name of the Image component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.

Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.

Map Image

Upload Image - Upload a .JPG or .PNG to display an Image. To remove an uploaded Image, click on the Trash Can.

Pro Tip: Optimize all Images for the web to increase app performance and shorten load time. For more detailed maps, a larger image would work best as it will allow users to zoom in without pixelation.

Map Settings

Icon Type - Sets the type of icon used in the Interactive Image for each Interaction Point. Choose from the dropdown list: Alphabetical, Full Circle, or Numerical.
Active Point Background Color - Sets the Interaction Point Background Color when an app end user taps an Interaction Point. All other Interaction Points show as Inactive. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Active Point Border Color - Sets the Interaction Point Border Color when an app end user taps an Interaction Point. All other Interaction Points show as Inactive. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Active Point Text Color - Sets the Text Color when the Icon Type is set to Alphabetical or Numerical. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Inactive Point Background Color - Sets the Interaction Point Background Color when an app end user taps any other Interaction Point. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Inactive Point Border Color - Sets the Interaction Point Border Color when an app end user taps any other Interaction Point. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Inactive Point Text Color - Sets the Text Color when the Icon Type is set to Alphabetical or Numerical. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Display Click Coordinates - Toggles on or off the Coordinates of a location on the image when clicked by the Studio User. This is extremely helpful to determine the X and Y coordinates for each Interaction Point.

Info Panel Settings

Background Color - Sets the Background Color. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Border Color - Sets the Border Color. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Border Width (px) - Sets the width of the border. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). The border does not appear if it is set to 0 px.
Border Radius (px) - Sets how rounded corners appear by entering a number from 0 to 24. A setting of 0 will result in sharp corners and a setting of 24 will result in rounded corners.
Overlay Color - Set the color of the overlay. The Overlay is a layer of color with adjustable transparency over an image making it easier for users to read text. There are two ways to set the Overlay Color: Click the Color Swatch to select a color or enter the hex code in the text field.
Overlay Opacity (%) - Set the percentage for the Overlay Opacity. 0% is completely transparent.
Drop Shadow - Toggles on or off to display a drop shadow.
Interaction Points (Up to 20)
- X - The X coordinate for the Interaction Point.
- Y - The Y coordinate for the Interaction Point.
- Upload Custom icon - Upload a .SVG to display an icon. To remove an uploaded icon, click on the Trash Can. If a custom icon is uploaded it will override the selected icon type.
- Upload Image - Upload a .JPG or .PNG to display an Image. This image will appear inside the info popup. To remove an uploaded Image, click on the Trash Can.
- Content Editor- Click the botton to open the Interactive Point content modal. Enter the text in this modal. The text will wrap and there is no limit on the number of characters allowed. The toolbar is used to format the text as needed

Interactive Map Placement Settings

The Placement Settings for the Component sets which column(s) the Component will appear. Each Page of the app can have a different number of columns that are set in the Layout section of the Page Settings. The following Placement settings are available for this Component:

Column Start - Sets the column where the Component will start.
Column Span - Sets how many columns the Component will span.
Padding - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.