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

Chiara Gambone 22 hours ago

Hi Lorenzo Alegnani , I am trying to understand if this plugin can be used to show SVG inline in a grid.

I created a fake grid with columnsLayout and columnLayout, and inserted the following SVG:

<svg width='45px' height='45px' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0 7.49996C0 3.52583 3.09098 0.27365 7 0.0163574V4.0354C5.30385 4.27801 4 5.73672 4 7.49996C4 9.43295 5.567 11 7.5 11C8.28618 11 9.01181 10.7407 9.5961 10.3031L12.438 13.1451C11.1188 14.3 9.39113 15 7.5 15C3.35786 15 0 11.6421 0 7.49996Z' fill='#000000'/> <path d='M13.1451 12.438C14.3001 11.1187 15 9.39107 15 7.49996C15 6.46644 14.7909 5.48175 14.4128 4.58586L10.7552 6.21147C10.9132 6.61024 11 7.04496 11 7.49996C11 8.28611 10.7408 9.01174 10.3032 9.59602L13.1451 12.438Z' fill='#000000'/> <path d='M8 4.0354V0.0163574C10.5416 0.183645 12.7373 1.61699 13.9626 3.69166L10.2541 5.33986C9.71063 4.64791 8.91203 4.16585 8 4.0354Z' fill='#000000'/> </svg>

In the interface, it seems that to the right of the viewbox there is some whitespace that I'm not sure if it can be removed:

Here you can see the viewbox as 0, 0, 10, 10. It doesn't seem to me like a problem with viewbox

Comment

Chiara Gambone 22 hours ago

Hi Lorenzo Alegnani , I am trying to understand if this plugin can be used to show SVG inline in a grid.

I created a fake grid with columnsLayout and columnLayout, and inserted the following SVG:

<svg width='45px' height='45px' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0 7.49996C0 3.52583 3.09098 0.27365 7 0.0163574V4.0354C5.30385 4.27801 4 5.73672 4 7.49996C4 9.43295 5.567 11 7.5 11C8.28618 11 9.01181 10.7407 9.5961 10.3031L12.438 13.1451C11.1188 14.3 9.39113 15 7.5 15C3.35786 15 0 11.6421 0 7.49996Z' fill='#000000'/> <path d='M13.1451 12.438C14.3001 11.1187 15 9.39107 15 7.49996C15 6.46644 14.7909 5.48175 14.4128 4.58586L10.7552 6.21147C10.9132 6.61024 11 7.04496 11 7.49996C11 8.28611 10.7408 9.01174 10.3032 9.59602L13.1451 12.438Z' fill='#000000'/> <path d='M8 4.0354V0.0163574C10.5416 0.183645 12.7373 1.61699 13.9626 3.69166L10.2541 5.33986C9.71063 4.64791 8.91203 4.16585 8 4.0354Z' fill='#000000'/> </svg>

In the interface, it seems that to the right of the viewbox there is some whitespace that I'm not sure if it can be removed:

Here you can see the viewbox as 0, 0, 10, 10. It doesn't seem to me like a problem with viewbox

Children

Lorenzo Alegnani 22 hours ago in reply to Chiara Gambone

Have you tried to play with the column width attribute of the column layout component ?
- Cancel
- Up 0 Down
- Reply
- More
- Cancel