Question

I am not sure how to do this. Can it be done? How can it be done eligently? And hopefully can it be done without the need for another plugin library (jquery is ok) – I am trying to cut down the number of js files.

I have a canvas with a map in it. The user can click on the map. Then I want a white square to appear near to where the user clicked (rounded corners and a black border) with a few options on it for the user to select one. These can be text options, eg ‘Country Summary’, ‘GDP’, etc. Then the user selects one and the info appears in a area to the left, and the white option square automatically disappears.

Is this possible? Can it be done without the need for a window with a blue bar at the top and all the other window baggage?

Hope someone can help.

Jon

Answer 1

Yes, it can be done. You don’t have to do it in the canvas, you can use regular HTML for that part.
Just add a new element to the page with the following CSS properties

position:absolute;
display:inline;

(as well as some CSS for rounded corners and black borders)
and then set its X and Y properties to the X and Y mouse coordinates of the event.

Then work with that element as you would with anything else.