Das Beispielmashup wird eine Verbindung aus dem Bilderdienst Flickr und den dynamischen Landkarten von Google Maps. Dabei wird eine von den Benutzern von Flickr eingeführte Konvention benutzt: Durch die benutzung von drei Tags werden die Bilder mit Geoinformationen angereichert. Zum einen bekommen sie einen Tag "geotagged", der angibt, dass dieses Bild Koordinaten enthält. Außerdem zwei Tags "geo:long" und "geo:lat" die Längen- und Breitenangabe enthalten. Dabei wird direkt das für google Maps passende Format benutzt. Diese Bilder sollen dann auf eine Karte dargestellt werden.
Flickr ist ein Paradebeispiel, was die API angeht. Hier stehen dem Entwickler nach der Registrierung eines API-Schlüssels viele Möglichkeiten offen. REST, XML-RPC und SOAP können genauso verwendet werden, wie speziellere Formate, wie serialisierte PHP Objekte.
Um den Zugriff ganz im Sinne des Web 2.0 so einfach wie möglich zu gestalten, kommt eine Wrapper-Klasse zum Einsatz, die die RPC Funktionalität in einfache Funktionen kapselt. Diese Klasse heisst phpFlickr und benutzt intern die einfachen REST Aufrufe, um mit Flickr in Kontakt zu treten. Hier muss man nur noch eine Instanz der phpFlickr-Klasse erstellen und ihr den API-Key übergeben, den man bei Flickr kostenlos beantragen kann. Danach kann auf die Flickr-Funktionen zugegriffen werden. Für das Beispiel werden alle Bilder mit den Tags "wedel" und "fachhochschule" gesucht, dazu sollen noch Geoinformationen vorhanden sein, weswegen der Tag "geotagged" vorhanden sein muss.
// phpFlickr einbinden
require_once("phpFlickr/phpFlickr.php");
// Objektinstanz von phpFlickr erstellen
$f = new phpFlickr("[Flickr-Key-einfügen]");
$search["tags"] = "geotagged,wedel,fachhochschule";
$search["tag_mode"] = "all"; // Alle Tags erforderlich
$search["per_page"] = 6; // Alle Tags erforderlich
$geo_photos = $f->photos_search($search);
Google Maps gehen einen gänzlich anderen Weg als Flickr. Hier soll möglichst viel von dem Webservice geschehen von den Entwicklern ferngehalten werden. Man definiert über JavaScript clientseitig Vorgaben und Einstellungen, die beim Laden der Karte berücksichtigt werden. Zur einfacheren Benutzung gibt es aber auch hier eine Wrapper-Klasse: phoogle. Auch hier ist ein API-Key erforderlich, der kostenlos beantragt werden kann.
Zuerst werden ein paar allgemeine Einstellungen übergeben, z.B. die Höhe und Breite des angezeigten Ausschnitts, der Zoomlevel und die Kontrollelemente, die angezeigt werden sollen.
// Google Maps einbinden einbinden
require_once("phoogle/phoogle.php");
$map = new PhoogleMap();
$map->setAPIKey("[Google-Maps-Key-einfügen]");
// Karte erstellen
$map->zoomLevel = 1;
$map->setWidth(700);
$map->setHeight(540);
$map->controlType = 'large';
$map->showType = true;
$map->showMap();
Das Mashup wird dadurch vervollständigt, dass für jedes Bild, das von der Flickr-API zurückgeliefert wurde, nun ein Marker auf der Karte erstellt wird. Nach einem Klick auf den Marker erscheint eine Blase, die den Titel des Bildes sowie eine kleine Vorschau anzeigt. Der Code muss zwischen dem Aufruf von showMap und der Suche in der Flickr-Datenbank aufgerufen werden
foreach ($geo_photos['photo'] as $photo) {
$something = $f->tags_getListPhoto($photo['id']);
$tags = $something['tags'];
$tog = $tags['tag'];
// Pin-Notiz erstellen
$note = $photo[title] .
"<a href='http://www.flickr.com/photos/$photo[owner]/$photo[id]'
target='_blank'> <img border='0' alt='" . $photo[title] . "'
src='" . $f->buildPhotoURL($photo, "Square") .
"'></a>";
//Geodaten auslesen
foreach ($something as $tag) {
$tag_value = $tag['raw'];
if (substr($tag_value,0,3) == 'geo') {
list ($tag, $pos) = split('[=]', $tag_value);
if ($tag == 'geo:lat') {
$lat = $pos;
}
if (($tag == 'geo:long') || ($tag == 'geo:lon')) {
$lon = $pos;
}
}
}
// Pin auf der Karte platzieren
if (($lon>0) && ($lat>0)) {
$map->addGeoPoint($lat,$lon,$note);
}
}