What is the Interactive Graphics Component?

The Interactive graphics component allows using images and adding markers on these images to help your users pinpoint locations.

Why Use the Interactive Graphics Component

The interactive graphics component is commonly used in maps and floor plans. For instance, in event apps, it is commonly used with a floor plan of the venue and marks different sessions, registration, and more. 

Options in the Interactive Graphics Component

Add your maps

Add a new map

Allows adding a new map to the component

Map name

Name of the map

Select an image

Allows selecting an image for the map

Replace image

Allows replacing of the current map with a new one


Add markers to your maps

Mark maps

Displays the add markers window

Markers data source

Displays the current data source used for the map markers

Bulk upload data

Displays the Edit data source window, where you can directly add or remove map markers

Switch to another data source

Displays the current data source settings. From here, you can switch from the current data source to another data source that you should have created previously.

Configure the markers

Allows configuring the map markers, e.g. editing the marker name, deleting the marker, and managing marker styles. See the Manage styles table below for more info.

Manage styles

Displays the Marker styles window

Add new marker

Allows adding of a new map marker


Marker styles

Marker style list

Displays the list of marker styles

Add a new marker style

Allows adding of a new marker style

Marker name

Displays and allows editing of the marker name

Replace icon

Allows replacing of the default marker icon from the Fliplet icon library

Marker color

Displays and allows editing of the default marker color with a color picker

Marker size

Displays and allows editing of the default marker size (can be px, em, or %)