Mapping Hacks

186

|

Chapter 4, Mapping (on) the Web

#41 Plot Points on an Interactive Map Using DHTML

HACK

In similar fashion to “Plot Arbitrary Points on a World Map” [Hack #29],we

calculate the number of degrees from our point to the left edge of the map

on line 22, and then multiply that by our scale value to get the number of

pixels. Then we do the same for the vertical axis on line 23.

Now, here’s an added wrinkle: absolute positioning in CSS is reckoned from

the edge of the browser window, not the edge of the enclosing HTML ele-

ment. However, our base map image might not be rendered at the exact top

or left edges of the document. What’s worse, the DOM API will only tell us

how far the map image rests from the edge of its immediate parent element,

rather than from the edge of the window. So, in lines 25–28, we walk

upward through the chain of nested HTML elements, and add up each hori-

zontal and vertical offset, until we get to the very top of the document.

Next, we deal with one final hitch in lines 30–32, which is that we really

want the star centered over the point in question, not placed on its corner.

To achieve this result, we have to find the width and height of the star and

subtract half of each from our x- and y-coordinates, so that the star appears

centered over our point. Again, we could hardcode the width and height of

the star, but doing it this way allows us to use any image in place of our ...