Interactive SVG Map Component

Overview

The possibility to highlight business KPIs with colors on tailored custom maps and to drill down into details from that is a common need in several sectors such as:

• Retail for stores
• Public Sector for geographical area
• Logistic for warehouses
• Office Space design/allocation
• and many others

Leveraging an SVG integration, we provide a way to customer to use their own svg maps into Appian SAIL.

Key Features & Functionality

The interactiveSvgMapComponent allows customers to:

• Provide a custom SVG map image
• Specify a list of areas as a parameter for which a different color (standard Appian colors or hex code) can be applied, show a custom tooltip, decide the best way to highlight the area on mouse hover, and optionally allow a click event on the area itself
• Zoom in and out on the map using the mouse, buttons, or icons
• Pan the map within the component area
• Use Appian document generation template format to populate a text field in the map image with Appian values
• As a result, the component will return the index of the selected area (across the ones specified as a parameter), which can be used in SAIL to show the details data related to that area
• By leveraging the Rich Text Editor image upload connected system, it is also possible to convert the resulting map into a PNG image document for reporting purposes or for use in SAIL interfaces for read-only users.