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.

Parents

Antonio Lamanna over 3 years ago

Hi, I'm trying to use this plugin but I am having some problems. I write this code

interactiveSvgMapField(
    label: "SVG Label test", 
    labelPosition: "ABOVE", 
    instructions: "instructions", 
    helpTooltip: "tooltip", 
    required: false, 
    disabled: false, 
    validations: {}, 
    height: "TALL", 
    showWhen: true, 
    mapSvg: cons!SVG_TEST, 
    mapAreaParameters: {
      id: "circlex",
      caption: "caption test",
      color: "ACCENT"
    }, 
    hoverEffect: "OUTLINE", 
    selectedIndex: {local!selectedIndex}
)

I can see the image, but I cannot interact with it.

I'm using a simple svg image:

<svg width="100" height="100">
   <circle id="circlex" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

In any case, what I would like to do is change the color of the elements based on some inputs.

Thank you

Lorenzo Alegnani over 3 years ago in reply to Antonio Lamanna
Thanks Antonio for your spot , I think I understood where your issue is

by design mapAreaParameters is a JSON list of parameters (as per help in designer) but in your code it is single dictionary object.

Lines from 12 to 16 may be modified as follow
```
mapAreaParameters: a!tojson(
      {
        {
          id: "circlex",
          caption: "caption test",
          color: "ACCENT",

        }
     }
),
```
Note that even you are having only one parameter you need to to pass a list of dictionary to a!toJson to get the json list of parameters..

We may consider in future version to remove the need of forcing a list when there is just one parameter but if you stick to above your SVG sample should work properly
- Cancel
- Up 0 Down
- Reply
- More
- Cancel

Comment

Lorenzo Alegnani over 3 years ago in reply to Antonio Lamanna
Thanks Antonio for your spot , I think I understood where your issue is

by design mapAreaParameters is a JSON list of parameters (as per help in designer) but in your code it is single dictionary object.

Lines from 12 to 16 may be modified as follow
```
mapAreaParameters: a!tojson(
      {
        {
          id: "circlex",
          caption: "caption test",
          color: "ACCENT",

        }
     }
),
```
Note that even you are having only one parameter you need to to pass a list of dictionary to a!toJson to get the json list of parameters..

We may consider in future version to remove the need of forcing a list when there is just one parameter but if you stick to above your SVG sample should work properly
- Cancel
- Up 0 Down
- Reply
- More
- Cancel

Children

No Data