Mapping Hacks

Plot Points on an Interactive Map Using DHTML #41

Chapter 4, Mapping (on) the Web

|

187

HACK

Hacking the Hack

Now, in and of itself, this demo application isn’t very interesting, because

people don’t usually think of places in terms of latitude and longitude, per

se. If we wanted to use this application to show the world’s 50 largest cities,

we might have something a little more interesting, but we’d still have to hit

the network to look up the location of a selected city in a database some-

where—unless we happened to put that list in JavaScript somewhere, as

well. The following is an excerpt from cities.js, which just happens to be

such a list:

var cities = [

[ "Mumbai, India [12.4M]", 18.96, 72.82 ],

[ "Buenos Aires, Argentina [12.1M]", -34.61, -58.37 ],

[ "Kar\u0101chi, Pakistan [10.5M]", 24.86, 67.01 ],

[ "Manila, Philippines [10.2M]", 14.62, 120.97 ],

// ... and so on, for 46 more lines ...

];

This data structure is just a list of lists, in which each inner list contains the

name and population of the city, as well as its latitude and longitude. You

can find a copy of the full cities.js in http://mappinghacks.com/code/dhtml/,

which was generated using the list of cities found at http://mappinghacks.

com/data/cities.txt. We can pull it into our HTML interface, by adding an

external script reference to it, like so:

<script language="JavaScript" src="cities.js" ></script>

Figure 4-9. The same web-based ...