Essentially, it's a map of all the albums I've got pictures for, mapped out all over the world, with little links at the top to zoom into specific areas where there's some detail to be seen. :)
It uses Google Maps API for the map drawing, and otherwise is a pretty simple little site that links into my simple (yet elegant?) photo gallery I made a few weeks before I added the maps. I had to get the lat/long for all the places I've taken pictures by using http://maps.google.com/. If you double click a spot on Google Maps, it'll zoom and center on that spot. Then by copying and pasting the "Link to this page" link, you can see the lat/long of where you double clicked... for some random double click in Montana gives me:
http://maps.google.com/?ie=UTF8&z=5&ll=47.040182,-109.599609&spn=20.043173,40.78125&om=1
There's your latitude and longitude. There'd be many ways to tag my albums with these, but for speed (and potential digg effect),
I just chose a flat file, written out like this:
2003_08_11_europe/01_amsterdam
52.372874 4.894753 2003_08_11_europe/02_paris 48.857261 2.344551
2003_08_11_europe/03_toulouse 43.603267 1.442986 2003_08_11_europe/04_carcassonne
43.211682 2.355537 2003_08_11_europe/05_sete 43.40405
3.69175 2003_08_11_europe/06_agde 43.309191 3.473053 .. etc
Then here are the important little pieces of map.php:
$locations = array();
$lines = file("locs_flat_file");
$count = 0; foreach ($lines as $line)
{
list($gallery,$lat,$long) = split(" ", $line);
$long = trim($long);
if (!array_key_exists($lat . "," . $long,$locations)
) { $locations[$lat . "," . $long] = array(); }
array_push($locations[$lat . "," . $long],$gallery); }
foreach ($locations as $latlong => $galleries) {
$size = count($galleries);
$count = $count + 1;
print "var marker$count = new GMarker(new GLatLng($latlong));\n";
$tooltip = "<div style='width: 205px; height: " . (55 * $size) . ";'>";
foreach ($galleries as $gallery) {
$tooltip = $tooltip . "<div style='width: 205px; height: 55px;'><table width='100%'>
<tr><td valign='middle'><a href='/g/$gallery'>";
$tooltip = $tooltip . "<img border='2' src='images/$gallery/.thumb50'></a>
</td><td align='center' valign='middle'>
<font size='-2'>";
$tooltip = $tooltip . str_replace("_"," ",$gallery) . "</font></td></tr></table></div>";}
$tooltip = $tooltip . "</div>";
print "GEvent.addListener(marker$count, 'click', function() {
marker$count.openInfoWindowHtml(\"$tooltip\"); });\n";
print "map.addOverlay(marker$count);\n"; }
Basically what's happen here, is that it's reading all the albums in with the lat and long, then the second foreach loop is checking for multiple albums having the
same
location,
and then writing out a little <div>
for the tool tip for when you click on the marker, which has a pre-generated thumbnail and
the album title for all albums at
that pin. Neat, eh? |
