Mapping Hacks

184

|

Chapter 4, Mapping (on) the Web

#41 Plot Points on an Interactive Map Using DHTML

HACK

Obviously, one way to turn this interface into an application would be to

point the form action at a CGI script, do all of the work on the web server,

and return a dynamically generated version of the world map. The main rea-

son not to do this is, quite frankly, that it’s slow. The time that a user spends

waiting for their web browser to go out over the network, request the page,

have the image rendered server-side, download everything, and then render

the web page itself is time that they’re not spending getting information out

of our map. If we can do all of our calculations in the browser itself, and

overlay the star on top of the map dynamically, then the usability of our

map goes way up.

Fortunately, if the map projection is simple enough, we can do this by hack-

ing together a bit of JavaScript with some Cascading Style Sheet (CSS) prop-

erties. (When JavaScript is used to push bits of HTML and CSS around, the

result is called Dynamic HTML, or DHTML.) As it happens, the Pathfinder

map is a Plate Carrée, or an Equidistant Cylindrical, projection, so the math

required to turn a latitude and longitude into a point on the map image is

quite simple, as discussed in

[Hack #29], and well within the means of

JavaScript. We’ll step through the process of building this form so that a

user can enter points and