How to define some clickable areas on ImageView (like HTML image map)

Question

Let's say I have an ImageView displaying a school map:

I want to define some clickable regions on the image (like HTML image map), something like this:

Point musicRoom = new Point(30,70);
Point schoolGarden = new Point(120, 80);
Point library = new Point(60, 50);
Point cafetaria = new Point(60, 40);
Point mainOffice = new Point(70, 60);

Then I can handle the click events on each point, e.g is musicRoom poins is clicked, a Toast will appear. Or if schoolGarden point is clicked, another activity will be started.

Is there a library to easily achive this? I tried ClickcableImagesAreas:

implementation 'com.github.Lukle:ClickableAreasImages:v0.1'
implementation 'com.github.chrisbanes:PhotoView:2.0.0'

Doesn't compile because the library seems to depend on an old, hardcoded PhotoView library

Answer 1

You can use just imagemap.io platform to solve this issue. There you can add tooltips for your clickable area. You can find an example here https://imagemap.io/examples/demo-product