How to draw labels in the clicked point on the map?

0 like 0 dislike
15 views
There is a map. You need to realize the possibility of her label. Ie when you click on the map in this place draw a shape such as a circle. Anyone have any ideas? or something to read
asked by | 15 views

1 Answer

0 like 0 dislike
The problem concerned with the rendering of the label, and the coordinates as I understand it from pageX/pageY to take.
Yes, the coordinates must be taken from the click event.
Render the label should not cause any problem - just create an empty absolutely positioned div with the right class, and draw a circle in css is easy.

If you change the size of the image a label corresponding also to move.
This makes the task a little complicated. But only need to converterwith coordinates of the label when it was created in the interest of the map and position them - then the zoom will work as expected.

A simplified example: jsfiddle.net/alexey_m_ukolov/Lnvfju2b/24

The specific implementation depends on which browsers you want to support, and other features of the project, but the idea of this.
In my example, however, managed to give up interest in favor of the conversion of pixels depending on the zoom, but for the correct location already meets the browser itself. But I don't remember how well the browsers supported zoom, so I can not say how such an implementation is reliable.
Caniuse saysthat won't work in Firefox, so it's best to alter under transform: scale.
answered by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
3 answers
asked May 20 by mozzart_live
110,581 questions
257,150 answers
0 comments
477 users