On the chapters section of our web site, you’ll now see a dynamically generated map showing the locations of all our chapters, which extend beyond the United States’ borders, reaching places like South America and Africa. I won’t say much more about geographic diversity (since Nelson just discussed the spread of free culture), but I will talk about a subject that doesn’t seem to get enough attention on our blog — the code that runs our site.

As you’ve probably noticed, the interactive map of our chapters is an embedded Google Map, made possible by the fact that Google allows third-party websites to access its maps web service, along with all its features, through an application programming interface (API). Because the Google Maps API is free for virtually anyone to explore and use, all sorts of possibilities emerge for using the technology in creative ways — like displaying criminal activity reported in Chicago, visualizing Craig’s List real estate data, and in our case, showcasing the geographic spread of FreeCulture.org chapters.

Superimposed on our map are markers next to the exact geographic locations of all our FreeCulture.org campuses. Each marker contains the name of the chapter and a link to its website, if it has one. The map allows you to zoom in, making it easier to distinguish individual chapters that are part of large clusters, and zoom out, so you can see some of our international chapters. There are also two dropdown menus — one listing all the US states and the other listing all the countries that have FreeCulture.org chapters — that let you select the area on which you want to zoom in.

What happens behind the scenes is fairly straightforward: whenever someone accesses the chapters page, all the information about the chapters is pulled from a MySQL database, and included in that information are the geographic coordinates (latitude and longitude) of the chapter’s school. These coordinates form points on the Google Map,
while basic chapter information (name and link to the chapter’s web site, if there is one) fill up the markers that accompany the points. Since the map itself is displayed with JavaScript code, we use Phoogle Maps, a PHP class that provides a wrapper for the Google Maps API. In pseudocode:

$google_map = new PhoogleMap();
for each $row in the database table with the chapters information
{
  $marker_note = $row['chapter_name'];
  $google_map -> addGeoPoint($row['latitude'], $row['longitude'], $marker_note);
}
$google_map -> printGoogleJS();
$google_map -> showMap();

We’ve stored the latitude and longitude coordinates of the centers of different countries and the 50 US states. When you select a particular region from one of the dropdown menus, the zoom level is changed and the map is centered on the selected region. Again, in pseudocode:

if a $state has been selected
{
  $google_map -> zoomLevel = 12;
  $google_map -> centerMap($state latitude, $state longitude)
}
or if a $country has been selected
{
  $google_map -> zoomLevel = 12;
  $google_map -> centerMap($country latitude, $country longitude)
}

You can see that the code isn’t that complicated, but the end-result is pretty functional. That’s one of the advantages of opening up an API to a web service: interested developers get to flex their creative muscles and come up with some really cool ideas, or at the very least accomplish something that otherwise may have been really difficult to do. Like musical remixes, these mashups of technology often spur a lot of ideas and a lot of innovation.

(By the way, if you have any comments or suggestions about our map, feel free to let us know!)

This entry was posted on Thursday, May 11th, 2006 at 11:14 pm and is filed under Blog, Commentary. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.