Information
  • Author: Appian Corporation
  • Type: Plug-in (Component)
  • Support: This plug-in or utility is not supported by the author. The content is free to use with a licensed product, but it is made available as-is and Community supported.
  • Industry: All Industries
  • Compatible Version(s): 22.1
  • First Released:
  • Last Updated:
  • Cost: Free
Resources
Share
Home » AppMarket » Interactive SVG Map Component

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

  • Hello Lorenzo, I wonder if you can help us with a problem.

    We receive an SVG from a webservice and we save the whole SVG tag from the XML to an Appian document.

    We found that the only way to view this SVG document is using the documentViewerField, but we would love to use your custom component (which we are already using elsewhere).

    Can you advise us if there is any way to view this SVG Appian Document with your component?

    Thank you

  • in reply to Chiara Gambone

    Hi Chiara , yes the component can also display svg document without interacting with it , you can download the sample app in this page for directions and code

  • in reply to Lorenzo Alegnani

    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!

  • in reply to Chiara Gambone

    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

Comment
  • in reply to Chiara Gambone

    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

Children
© 2025 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.