tooltipster on interactive map

Question

I need to create an interactive map with tooltipster but I don't really know how to begin... I have a map of the world (a png file) and I need to : - have a set of "dot" on certain countries - when the user clicks on a dot it zooms the map and display other dots of given cities. - When user clicks on a city, it displays a kind of tag with some informations about the city

Is it possible to do that with tooltipster ? Could anyone help me to start because I don't really know where to start...

Thanks for your help.

Answer 1

First, create an image map if you haven't already. This online tool will help you do it: https://www.image-map.net

Then when you download the HTML generated by this tool, insert it in your own page.

You will see tags in it, like <area shape="circle" coords="314,105,44" />. You can add a class or an id onto these tags, and operate on them just as if it were a div, as demonstrated in Tooltipster's documentation.

I Hope it helps!