Verknüpfen der Google Maps- und Flickr-APIs

() translation by (you can also view the original English article)

Stellen Sie sich vor, Sie haben die schöne Karte von einem Kunden angefordert. Hinzufügen aller Arten von interessanten Markierungen, Popups, benutzerdefinierten Überlagerungen und Fotos. Aber dann erwähnt der Kunde, dass er in der Lage sein möchte, seine eigenen Fotos hinzuzufügen, ohne Sie zu stören oder selbst zu codieren. Hier bietet sich die Flickr-API an.

Mit der Flickr-API können Sie die Flickr-Website im Wesentlichen als Datenbank oder Speicherbereich für Ihre Fotos verwenden. Mit der Flickr-API können Sie Ihre Fotos von Flickr abrufen und unter anderem auf Ihrer Google-Karte anzeigen. Jedes Mal, wenn Sie oder Ihr Kunde Ihrem Konto auf der Flickr-Website Fotos hinzufügen, wird Ihre Google-Karte automatisch aktualisiert.

Wenn Sie sich die Demo ansehen, werden die Fotos, die beim Klicken auf die Schaltfläche "Kleinere Ereignisse" angezeigt werden, von einem Flickr-Konto abgerufen, das ich für dieses Lernprogramm eingerichtet habe. Wenn Sie sich meine Portsmouth-Verlaufskarte ansehen, werden die Fotos, die beim Klicken auf die Schaltfläche Alte Fotos (rechtes Menü) angezeigt werden, alle von Flickr gezeichnet.

Mit der Flickr-API können Sie viel mehr tun, als Fotos von Ihrem eigenen Konto abzurufen. Sie haben die Möglichkeit, komplexe Abfragen in den Metadaten zu erstellen und Fotos von allen Flickr-Benutzern zu zeichnen. Dies gibt Ihnen ein äußerst leistungsfähiges Werkzeug, das Sie für alle möglichen interessanten und kreativen Zwecke einsetzen können. Der Nachteil ist jedoch, dass die umfangreiche Funktionalität der API sie ein wenig entmutigend machen kann, wenn Sie sie noch nicht verwendet haben, und es schwierig sein kann, zu wissen, wo Sie anfangen sollen. In diesem Sinne konzentriert sich dieses Tutorial auf das Beispiel des Zeichnens von Fotos aus Ihrem eigenen Flickr-Konto und bietet einen vollständigen Überblick über den Vorgang. Sobald Sie den Dreh raus haben, sollten Sie in der Lage sein, den Rest der API gut zu nutzen.

Dieses Tutorial baut auf den vorherigen Tutorials auf, in denen es darum ging, mit der Google Maps-API kreativ zu werden und benutzerdefinierte Überlagerungen zu erstellen, indem erläutert wird, wie Sie die Flickr-API mit der Google Maps-API verknüpfen können.

Schnelle Erinnerung an APIs

Eine API oder Anwendungsprogrammierschnittstelle ist eine ausgefallene Methode zum Definieren einer Reihe von Befehlen, die von einem Unternehmen (z. B. Facebook, Twitter, You Tube, Flickr) veröffentlicht wurden und mit denen jeder eine hochgradig angepasste Version seines Inhalts erstellen kann. Wenn Leute über "Mashups" sprechen, meinen sie, dass sie die API von zwei oder mehr Unternehmen verwendet haben, um Inhalte zu kombinieren. Es gibt buchstäblich Tausende dieser APIs; Eine Liste finden Sie auf der programmierbaren Website.

Im ersten Tutorial wurde untersucht, wie Sie mit der Google Maps-API alle möglichen Aufgaben ausführen können, einschließlich der Anpassung der Farben, Kartenmarkierungen, des Popup-Box-Stils, der Detailstufe und der Zoomstufe. Die Flickr-API ist ebenso umfangreich.

Erste Schritte mit der Flickr-API

Um mit der Flickr-API zu beginnen, müssen Sie ein Flickr-Konto erstellen und dann ein paar Fotos zu Ihrem Konto hinzufügen, damit Sie mit etwas arbeiten können. Versuchen Sie, einige Bilder von verschiedenen Orten zu verwenden (dies wird später wichtig sein). Die in diesem Tutorial verwendeten Bilder sind in den Quelldateien oben auf dieser Seite verfügbar.

Hinweis: Wenn Sie diese Bilder verwenden, schreiben Sie bitte die ursprünglichen Ersteller gut, die am Fuß dieser Seite aufgeführt sind.

Sobald Sie Inhalte zum Spielen haben, ist es Zeit, mit der API zu beginnen. Dies sind einige wichtige Websites.

Flickr API-Entwicklerhandbuch. Dies ist eine Art „gestarteter Leitfaden“.
Flickr API-Dokumentation. Hier werden alle API-Methoden aufgelistet (d. h. alles, was Sie mit der API tun können), die Formate, mit denen Sie Daten anfordern können, und die Formate, in denen die Daten zurückgegeben werden können. Setzen Sie ein Lesezeichen auf diese Seite!
Flickr API-Hilfeseite.

Bevor Sie beginnen können, müssen Sie zunächst Ihren eigenen API-Schlüssel abrufen. Notieren Sie sich diese Details; Sie werden sie später brauchen!

Die "Hallo Welt" der Flickr-API

Schauen Sie sich dieses einfache Beispiel an. Es verwendet die Flickr-API, um Fotos von dem Flickr-Konto abzurufen, das ich für dieses Tutorial erstellt habe. Anstatt hier isolierte Codefragmente aufzulisten, ist es nützlicher, wenn Sie sich den Code für die gesamte Website ansehen, um zu sehen, wie die Dinge zusammenarbeiten. Gehen Sie zum einfachen Beispiel, klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie die Ansichtsquelle. Oder laden Sie die Quelle oben auf dieser Seite herunter und ziehen Sie sie auseinander.

Die Kommentare im Quellcode enthalten eine detaillierte Erklärung, es lohnt sich jedoch, einige wichtige Bereiche zu erläutern.

Die URL

Das Wichtigste, um sich ein Bild zu machen, ist, wie Sie über eine spezielle URL auf die Flickr-API zugreifen. Sie erstellen diese URL, um nach den Daten zu fragen, nach denen Sie suchen. Der erste Teil dieser URL ist -

1	http://api.flickr.com/services/rest/

Anschließend fügen Sie Dinge hinzu, um anzugeben, wonach Sie suchen. Das erste, was Sie hinzufügen, ist die Methode -

1	http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos

Anschließend fügen Sie die Argumente und das gewünschte Format hinzu, zwischen denen jeweils ein & -Zeichen steht.

1	http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&format=json&jsoncallback=?

Das Argument user_id ist das Konto, aus dem Sie die Fotos zeichnen möchten. Verwenden Sie idGettr, um dies herauszufinden.
Der api_key ist der Code, den Sie im vorherigen Schritt erhalten haben. Sie können diese URL manuell erstellen, indem Sie die Dokumentation für die von Ihnen gewählte Methode lesen, z.B. flickr.people.getPublicPhoto, aber das ist ein bisschen fummelig.

URL-Assistent

Glücklicherweise bietet Flickr unten auf jeder Methodenseite einen Link zu einem praktischen Assistenten (API-Explorer genannt). Ein Wort der Warnung; Standardmäßig hat die vom Assistenten generierte URL am Ende "nojsoncallback = 1". Da wir die Ergebnisse in eine Funktion verschieben müssen, sollte in unserem Fall das Ende "nojsoncallback =?" Sein (weitere Informationen finden Sie im JSON-Antwortformat).

Example of creating the URL that calls the Flickr API — Beispiel für die Erstellung der URL, die die Flickr-API aufruft.

Um Ihre URL zu erstellen, die die Flickr-API aufruft, müssen Sie: -

Gehen Sie zur Homepage der Flickr-API-Dokumentation und wählen Sie die Methode (aus der Liste rechts) aus, die Sie verwenden möchten.
Schauen Sie sich dann auf der Seite "Methode" (z. B. flickr.people.getPublicPhoto) die Beschreibung und die Details genauer an, um sicherzustellen, dass dies die richtige für Sie ist. Scrollen Sie dann ganz nach unten zum Ende der Seite und klicken Sie auf den Link API-Explorer.
Geben Sie auf der API-Explorerseite die relevanten Informationen zu den Argumenten ein und scrollen Sie nach unten. Wählen Sie die JSON-Ausgabe aus. (Mehr zu Ausgabeformaten später). Wählen Sie beim Anzeigen öffentlicher Daten die Option "Anruf nicht unterschreiben?". Klicken Sie dann auf die Schaltfläche Anrufmethode (oben).
Schauen Sie sich jetzt den unteren Bildschirmrand an. Sie sollten sehen, dass Ihnen die Ergebnisse Ihrer Abfrage angezeigt werden. Und am Ende steht die URL, die Sie benötigen!
Wenn Sie diese URL in Ihren Browser kopieren, wird das Ergebnis der Abfrage angezeigt. Sie sind oft etwas schwer zu lesen, aber wenn Sie die Ergebnisse in den JSON-Formatierer kopieren, werden alle angezeigt. Bevor Sie diese URL verwenden, um Flickr von Ihren eigenen Webseiten aus aufzurufen, ändern Sie wie oben erwähnt das Ende in "nojsoncallback =?" Und denken Sie daran, das Argument api_key durch Ihren eigenen Schlüssel zu ersetzen.

1	$.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=YOUR_FLICKR_API_KEY_HERE&user_id=YOUR_FLICKR_ID_HERE&format=json&jsoncallback=?", displayImages1);

Erfassen Sie die Ergebnisse

Sobald Sie Ihre URL erstellt haben, die die Flickr-API aufruft, benötigen wir eine Möglichkeit, die Ergebnisse zu erfassen. Wir tun dies mit der $.getJSON jQuery-Methode. Die $.getJSON-Methode liest Daten im JSON-Format (z. B. unten) ein und ruft eine Funktion (in diesem Fall displayImages1) auf, die die Daten auf irgendeine Weise verarbeitet (in diesem Fall die Bilder auf einer Webseite anzeigt).

The data in JSON format retrieved from this example Only the information about the first two photos is visible in this screen shot — Die aus diesem Beispiel abgerufenen Daten (im JSON-Format). (In diesem Screenshot sind nur die Informationen zu den ersten beiden Fotos sichtbar.)

Warten Sie - Was genau ist JSON?

Während wir uns mit JSON befassen, sollte darauf hingewiesen werden, dass JSON nur eine Möglichkeit ist, Informationen zu formatieren oder zu strukturieren, damit ein Computer sie lesen kann. Wenn Sie sich die JSON-Ausgabe(oben) ansehen, können Sie sehen, wie der Code auf jedes Bit der Daten zugreift. So leitet beispielsweise data.photos.photo (sehen Sie die Funktion displayImages1 im Quellcode des einfachen Beispiels) das JavaScript in das photo-Array im JSON, in dem die meisten Informationen gespeichert sind. Dann ist zum Beispiel var photoID = item.id; greift auf das ID-Element für jedes Foto zu.

Ein letztes Beispiel: Kätzchen

Bevor Sie fortfahren, sollten Sie sich ein anderes Beispiel ansehen. Lassen Sie uns den Hauptzweck des Internets (d. h. das Teilen von Katzenbildern) annehmen und Bilder finden, die mit dem Wort "Kätzchen" gekennzeichnet sind.

To Jump or Not to Jump by William Leiwakabessy — Springen oder nicht springen, von William Leiwakabessy

Um unsere Fähigkeiten zum Auffinden von Kätzchen zu maximieren, möchten wir diesmal Fotos durchsuchen, die von allen hochgeladen wurden. Der erste Schritt besteht also darin, die Flickr-API-Abfrage zu erstellen, die folgendermaßen aussieht:

1	http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=?

Dieser API-Aufruf verwendet die Methode flickr.photos.search. Diese URL wird dann in die $.getJSON-Methode eingegeben und auf ähnliche Weise wie im ersten Beispiel verarbeitet. Schauen Sie sich das Live-Beispiel an, um das Ergebnis zu sehen. Der Quellcode ist über den Link oben auf dieser Seite verfügbar.

Wenn Sie sich beide Beispiele angesehen haben, können Sie mithilfe der API Ihre eigenen Bilder aus Ihrem Flickr-Konto abrufen und auf einer Webseite anzeigen.

Die Spitze des Eisbergs!

Ihr erster Pinsel mit der Flickr-API sollte Sie mit den wichtigsten Prinzipien der Funktionsweise ausgestattet haben. Es ist jedoch auch wahrscheinlich, dass Sie bemerkt haben, wie groß es ist!

Dies ist keine schlechte Sache, da es Ihnen eine Reihe von Möglichkeiten bietet. Verwenden Sie die API-Dokumentation wie eine Art Einkaufsliste. Nehmen Sie sich Zeit, um die Methoden (rechts auf der Homepage der API-Dokumentation aufgeführt) durchzusehen, um zu sehen, was angeboten wird.

Möglicherweise haben Sie auch die verschiedenen Anforderungsformate (z. B. verwenden wir 'rest' - wie durch das Wort in der URL angegeben, die die API aufruft - oben angegeben), Antwortformate (z. B. verwenden wir JSON) und Programmiersprachen bemerkt, die Sie verwenden können mit der API (z. B. verwenden wir JavaScript). Auch dies ist eine Stärke der API, da Inhalte von Flickr in viele verschiedene Apps portiert werden können.

Die in diesem Tutorial verwendete Kombination wurde ausgewählt, da dies eine gute Kombination ist, um mit dem Erlernen der Flickr-API zu beginnen, und weil dies die logische Kombination ist, wenn diese API mit der JavaScript-basierten Google Maps-API verknüpft wird. Es lohnt sich immer noch, einen Blick auf die anderen Optionen zu werfen, die auf der linken Seite der Homepage der API-Dokumentation verfügbar sind.

Geotagging

Das Schöne an Flickr ist, dass Sie für jedes Foto alle Arten von Metadaten bearbeiten können.

Setting the location of a photo within Flickr — Festlegen der Position eines Fotos in Flickr.

Das, woran wir hier interessiert sind, ist die geografische Position jedes Fotos, und es ist einfach, dies für jedes Bild festzulegen:

Melden Sie sich in Ihrem Flickr-Konto an.
Klicken Sie oben links auf "Sie".
Klicken Sie unten rechts auf das Menüsymbol (drei kleine Kreise hintereinander).
Klicken Sie auf "Zur Karte hinzufügen". Folgen Sie dann den Anweisungen auf dem Bildschirm. Flickr berechnet automatisch die Breiten- und Längengrade für jedes Foto und speichert sie.

Sie müssen diesen Vorgang für jedes Ihrer Fotos wiederholen.

Erstellen eines Google- und Flickr-Mashups

Sobald Sie Ihre Fotos in Flickr mit einem Geotag versehen haben, können Sie sie auf einer Google-Karte anzeigen. Klicken Sie hier, um eine Live-Demo anzuzeigen, und klicken Sie dann mit der rechten Maustaste, um den Quellcode anzuzeigen.

Simple Flickr and Google maps mashup — Mashup von Flickr und Google Maps.

Ähnlich wie im vorherigen Beispiel geben die Kommentare im Quellcode eine detaillierte Erklärung. Es lohnt sich jedoch, einige wichtige Punkte hervorzuheben. Um die URL zu erstellen, die die Flickr-API aufruft, verwenden wir zunächst erneut die Datei flickr.photos.search. Dieses Mal haben wir die Argumente has_geo=1 und extras=geo eingefügt, um sicherzustellen, dass der Breiten- und Längengrad für jedes Bild auch in den Ergebnissen enthalten ist. Um die Ergebnisse der URL anzuzeigen, die die Flickr-API aufruft, kopieren Sie sie(unten) in Ihren Browser und verwenden Sie dann JSON Formatter, um die Ausgabe klarer zu sehen.

1	http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&has_geo=1&extras=geo&format=json&jsoncallback=?

Es ist auch erwähnenswert, dass der JavaScript-Code beim Durchlaufen der Bilder auch die Google Maps-API verwendet, um Kartenmarkierungen unter Verwendung der Breiten- und Längengrade der Flickr-API zu erstellen. Innerhalb der body-Tags wird dann die Google Maps-API verwendet, um die Karte selbst zu erstellen.

Sie sollten in der Lage sein, etwas Ähnliches mit Ihren eigenen Bildern zu erstellen, die Sie in Flickr geladen haben. Auf der iTouchMap-Website können Sie den Mittelpunkt Ihrer Karte ermitteln.

Flickr und unsere UK Festivals Karte

Jetzt müssen Sie nur noch alles, was in diesem Tutorial behandelt wird, auf die UK Festival Map anwenden, die wir in den ersten und zweiten Tutorials dieser Reihe erstellt haben.

google_maps_api_festival_map_with_flickr_600

Dies ist die Art von Dingen, die wir anstreben. Wenn Sie auf die Schaltfläche "Kleinere Ereignisse" klicken, werden die von Flickr gezeichneten Bilder angezeigt.

Der Vollständigkeit halber habe ich auch Bilder, die nicht von Flickr stammen, zu den Symbolen des Hauptfestivals hinzugefügt. Damit Sie die verschiedenen Optionen in Bezug auf Popup-Felder sehen können, habe ich sowohl die "Infoboxen" (für die "Hauptfestivals") als auch die Standard "Infofenster" für die Fotos von Flickr verwendet.

Diese Karte wurde erstellt, indem einige Änderungen am Code aus dem vorherigen Tutorial vorgenommen und der Code aus dem Google Maps- und Flickr-Mashup(oben) hinzugefügt wurden. Wir erstellen zuerst eine Variable (smallEventsToggle), um zu speichern, ob die Markierungen für kleine Ereignisse derzeit angezeigt werden oder nicht. Erstellen Sie anschließend eine neue Option in der Funktion handelRequests, um die Situation zu behandeln, in der auf die Schaltfläche "Kleine Ereignisse" (smallEvents) geklickt wird. Schließlich wird der Code aus dem vorherigen Schritt hinzugefügt und einige letzte Änderungen vorgenommen, z. B. das Ändern der Standardkartenmarkierung.

Wie üblich enthalten die Kommentare im herunterladbaren Quellcode eine ausführliche Erklärung, um Ihnen große Ausschnitte aus dem Tutorial zu ersparen.

Was nun?

Das nächste Tutorial befasst sich mit Optimierung, Responsives Design, Debugging und Testen.

Bildnachweis

Die Credits für die Fotos auf den Kartenmarkierungen selbst finden Sie am Ende des ersten Tutorials.