Clickable areas on a picture (map) ?

Question

Hi,
I have a map of a country on the left and a panel on the right.
I want to make the cities on the map clickable so that when a user clicks on one of them, the details of the city is displayed on the right panel.
1) How do i render certain areas of a picture (map) clickable ?
2) what about the interaction with the right panel ? how do i do that ?
Thanks for helping, i am a beginner.

Answer 1

From a very high-level, a solution could be:
Start with a Canvas control for your map.  We want this because a Canvas supports absolute positioning.
Set the map image to be the Canvas background: canvas.setStyle( "backgroundImage", urlToImage );
Use a Canvas for each clickable map city using cooridates (x,y) for absolute positioning over each city.
Set the data of each canvas-city to be the city name or some other identifier.
When you click on a canvas set an application variable of the city name/identifier using a "click" event listener.
Bind the right panel's display to the "current city" application variable.
Is that what you were looking for?