Hello @Benedict cruz 

Can you please share an SVG of this image if you have already?

Hi Benedict,

There is a widget called "Inline SVG" in OutSystems UI to render SVGs, have you tried checking it out? 
https://outsystemsui.outsystems.com/OutSystemsUIWebsite/PatternDetail?PatternId=597

So you would need to convert your image into SVG first.

Hi @Benedict cruz 

You can check the OML file below. 

Hope this helps,

Peter Hieu

Hello @Benedict cruz 

You can try the Image Map forge component, The image map enables specific areas of an image to be clickable, acting as links to different destinations.

The Image map is a type of image that contains one or more clickable areas. These clickable areas, known as "hotspots," are defined using coordinates on the image. Each hotspot can trigger different actions when clicked 

Thanks
Deep

Hi Benedict,

I've built something similar before, where an SVG needed to be interactive. You can approach it like this:

1. Put the SVG inside a Web Block

This keeps the map isolated and reusable.

2. In the OnReady of the Web Block, run a JavaScript

Use it to attach click events and update visuals dynamically.

Example:

const selectedStates = $parameters.SelectedStates.split(",");

selectedStates.forEach(state => {
    const element = document.getElementById(state);

    if (element) {
        element.classList = "enabled";   // This applies the highlight style
    }
});

3. On click, update state + send back to parent

Assign the clicked area’s ID/name to a local variable, then trigger an event so the parent screen can store it or run logic against it.

Hi @Benedict cruz,

I think this question is related to another question you posted.

https://www.outsystems.com/forums/discussion/105492/how-to-make-a-interactive-clickable-svg-in-phone/

I am adding this reply, so that if someone opens it, he/she can find the answer.

Regards,
Mustafa.