Interactive SVG Map Component

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

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

• New Zoom In and out into SVG Map thru gesture/mouse wheel/component built-in controls
• New Pan feature to move the map within component area allowing to focus on specific area
• New Options to enable/disable Pan and Zoom features
• New Option to show/hide zoom controls and to specify their position and color when shown

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

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

Hi Arun

there is readme file in the download package. also there is a demo application inside which you can import once you installed the component.  Let me know if I can assist further

Please suggest how to use this component as I dont find any document