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,

    We noticed that trying to zoom/pan the SVG component on the native Appian mobile app causes the entire page to scroll. Is it possible to lock the entire screen when attempting to move around the svg image via touch controls?

  • in reply to anthonyc3378

    I don't see the issue on mobile you need to hold a finge and move it to pan and  use 2 fingers to zoom in and out

Comment
  • in reply to anthonyc3378

    I don't see the issue on mobile you need to hold a finge and move it to pan and  use 2 fingers to zoom in and out

Children
  • in reply to anthonyc3378

    Looks like I have different phone layout (I m on Android) btw in your video components stack usually the behavior you are observing should happen when you pan up and down outside the component area, while it should not if you do that within the component, unless there is a different behavior on iphone web engine. May you try on another phone or via browser on the mobile device?

    We overlapped our answer then maybe you need to open a support case

  • in reply to anthonyc3378

    Looks like I have different phone layout (I m on Android) btw in your video components stack usually the behavior you are observing should happen when you pan up and down outside the component area, while it should not if you do that within the component, unless there is a different behavior on iphone web engine. May you try on another phone or via browser on the mobile device?

  • in reply to Lorenzo Alegnani

    Hi  , I attached a video of the behavior I'm experiencing on my iPhone 12. Zooming and pan left/right work just fine. The issue is that when I try to move up or down, the whole page scroll is moving as well.

    EDIT: I tested both an iPhone and an Android. It appears that only the native iOS mobile app has the issue described above. The Android app, and using the web browser on both devices allowed the SVG image to be moved independently of the rest of the page

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