Category Archives: Maps

Bringing A Marker To The Top

In maps and charts, where there are several markers, there is a likelihood of a overlap depending on how dense the data is. In such cases, it would be good to be able to bring the marker that has been selected using the mouse to the top and display the details and push the rest of the neighboring points to the bottom. And then when a mouse is placed over one of those neighboring points, then the current point should go down and the other point should come up.

So, how to achieve this in HTML using Javascript? Below is a way to do this.

Say each marker is a div element. You can do the following. First have a depth variable.

var depth = 1001;

Now, have the following code for the div.

div.onmouseover = function(event) { div.style.zIndex = depth++; }

That’s it! What this does is, every time the mouse is placed over a div, it sets it’s depth to be one more than the current maximum depth ensuring that the element is the top-most element. Isn’t this simple and elegant?

Leave a comment

Filed under DHTML, javascript, Maps