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.

tarun.sharma over 2 years ago in reply to Lorenzo Alegnani
Thanks Lorenzo. I tried using the above suggested but same results.
```
readtextfromfile function asks for two parameters, I tried passing another boolean param both values but no luck
```
...
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
Lorenzo Alegnani over 2 years ago in reply to tarun.sharma
The component does not read the document but expect a text as svg map parameter, so if you want to use a document you should import in your environment the Text File Utilities plugin and pass as parameter
svgMap: readtextfromfile(cons!TVM_USA_LABEL_BOXES)
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
tarun.sharma over 2 years ago

Hi, I am trying to use this plugin but when referencing a document image via constant it's not showing up. I am not able to import the sample application as its a community edition environment. Please suggest what could be wrong here.

Moreover, How can we get a sample svg image for world or USA map?
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
Appian AppMarket over 2 years ago
v5.0.0 Release Notes
- New conversion of SVG Map to PNG document Image (requires Rich Text Editor Image Upload Connected System community.appian.com/.../rich-text-editor-image-upload-connected-system)
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
Lorenzo Alegnani over 3 years ago in reply to Vladislav Morozov
Things I would check
- Are you experiencing this with just this plugin or with other Interface components as well ?
- Are you rendering the same map you have on your community or is it a different map ?
- Also have you tried to inspect the page ?
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
Vladislav Morozov over 3 years ago

Hello, I used this plug-in in my community appian and everything worked fine. Then I copied the interface in my company's appian and map won't appear. Everything is the same. I had an issue of this type a month ago, when I didn't see the map, but one of my colleagues did - I thought that it could be a version issue (as my company's Appian used the previous version of plug-in), but now neither of us sees the map. (Currently we have the latest version of plug-in)
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
Chiara Gambone over 3 years ago 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!
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
Lorenzo Alegnani over 3 years ago 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
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
Chiara Gambone over 3 years ago in reply to Lorenzo Alegnani

This is the second image, not sure if you can see it.
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
Chiara Gambone over 3 years ago in reply to Lorenzo Alegnani

Thank you for your reply.

I took another look at the sample app, but from what I can see all the SVGs that are used there are inside constants.

Let me show you an example:

As you can see, the SVG is not visible with your component. Are we doing something wrong?
- Cancel
- Up 0 Down
- Reply
- More
- Cancel