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.
Anonymous
Parents Comment Children
  • Thank you Lorenzo for helping us.

    We had everything right, I just hadn't found the readtextfromfile function (probably because the plugin is a bit old).

    Congratulations on the great Plug-in you've developed, grazie!

  • You are passing the document as parameter while you should pass the svg as string as per doc mapSvg (Text): SVG Map Source

    In your case you can use readtextfromfile(local!svg) , requires Text File Utilities plugin, in your code to get that

    Also be aware that to be shown SVG file should start with <svg> tag (no xml/html headers tag)

    refers to the word document with all parameters and note in the download package