Interactive SVG Map Component

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
  • and many others

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

interactiveSvgMapComponent allows to:

  • Provide a custom svg map image
  • Specify as parameter a list of area for which we can apply a different color (standard appian colors or hex code) , show a custom tooltip and allow click event on the area itself
  • As result the component will return the index of selected area (across the ones specified as parameter) which can be used in sail to show the details data related to that

New in v2

  • Optional click behavior by adding selectable parameter in reference Json parameter in order to have an area highlighted with click disabled (default true to preserve V1 behavior and compatibility)
  • New component parameter hoverEffect to drive the behavior of highlighted area on mouse hover by using outline (default to preserve V1 behavior and compatibility ) or darkener or lightener the selected area (refer to readme V2 for details)