Share
Imaginez que vous ayez créé la belle carte demandée par un client. en ajoutant toutes sortes de marqueurs intéressants, de fenêtres contextuelles, de superpositions personnalisées et de photos. Mais ensuite, le client indique qu'il souhaite pouvoir ajouter ses propres photos sans vous déranger ni coder lui-même. C’est là que l’API Flickr est très utile.
L'API Flickr vous permet essentiellement d'utiliser le site Web Flickr comme base de données ou zone de stockage pour vos photos. À l'aide de l'API Flickr, vous pouvez récupérer vos photos sur Flickr et les afficher, entre autres, sur votre carte Google. Chaque fois que vous ou votre client ajoutez des photos à votre compte sur le site Web de Flickr, votre carte Google est automatiquement mise à jour..
Si vous regardez la démo, les photos qui apparaissent lorsque vous cliquez sur le bouton "Petits événements" sont extraites d'un compte Flickr que j'ai configuré pour ce didacticiel. Ou, si vous consultez la carte de l'historique de Portsmouth, les photos qui apparaissent lorsque vous cliquez sur le bouton Anciennes photographies (menu de droite) sont toutes tirées de Flickr..
L'API Flickr vous permet en réalité de faire beaucoup plus que de prendre des photos de votre propre compte. Il vous permet de créer des requêtes complexes sur les métadonnées, en prenant des photos de tous les utilisateurs Flickr. Cela vous donne un outil extrêmement puissant que vous pouvez utiliser pour toutes sortes d'utilisations intéressantes et créatives. L'inconvénient, cependant, est que les capacités étendues de l'API peuvent rendre les choses un peu décourageantes si vous ne les utilisiez pas auparavant et il peut être difficile de savoir par où commencer. En gardant cela à l’esprit, ce didacticiel porte sur l’exemple de la prise de photos à partir de votre propre compte Flickr, donnant ainsi un aperçu complet du processus. Une fois que vous avez maîtrisé cela, vous devriez être en mesure de bien utiliser le reste de l'API..
Ce didacticiel s'appuie sur les didacticiels précédents, qui traitaient de la création avec l'API Google Maps et de la création de superpositions personnalisées, en expliquant comment lier l'API Flickr à l'API Google Maps..
Une API, ou Application Programming Interface, est une manière élégante de définir un ensemble de commandes publiées par une entreprise (Facebook, Twitter, You Tube, Flickr, par exemple), qui permettent à quiconque de créer une version hautement personnalisée de leur contenu. Lorsque les gens parlent de «mash-ups», ils signifient qu'ils ont utilisé l'API de deux entreprises ou plus pour associer du contenu. Il y a littéralement des milliers de ces API autour; consultez le site Web Programmable pour une liste.
Le premier tutoriel portait sur la manière dont l'API Google Maps vous permettrait de faire toutes sortes de choses, y compris la personnalisation des couleurs, les marqueurs de carte, le style de la boîte contextuelle, le niveau de détail, le niveau de zoom. L'API Flickr est tout aussi étendue.
Pour commencer à utiliser l'API Flickr, vous devez créer un compte Flickr, puis ajouter quelques photos à votre compte afin de pouvoir utiliser quelque chose. Essayez d’utiliser des images de différents endroits (ce sera important plus tard). Les images utilisées dans ce tutoriel sont disponibles dans les fichiers sources en haut de cette page..
Remarque: Si vous utilisez ces images, merci de mentionner leurs créateurs originaux, énumérés au bas de cette page..
Une fois que vous avez du contenu à jouer, il est temps de vous familiariser avec l'API. Voici quelques sites clés.
Avant de pouvoir commencer, vous devez tout d’abord obtenir votre propre clé d’API. Prenez note de ces détails. vous en aurez besoin plus tard!
Jetez un oeil à cet exemple simple; il utilise l'API Flickr pour récupérer des photos du compte Flickr que j'ai créé pour ce tutoriel. Au lieu de répertorier des extraits de code isolés ici, il est plus utile de consulter le code de tout le site Web pour voir comment les choses fonctionnent ensemble. Aller à l'exemple simple, faites un clic droit sur la page et sélectionnez voir la source. Ou téléchargez le code source en haut de cette page et séparez-le.
Les commentaires dans le code source fournissent une explication détaillée, mais cela vaut la peine de passer en revue quelques zones clés..
Le plus important est de savoir comment accéder à l'API Flickr à l'aide d'une URL spéciale. Vous construisez cette URL pour "demander" les données que vous recherchez. La première partie de cette URL est -
http://api.flickr.com/services/rest/
Vous ajoutez ensuite des éléments pour spécifier ce que vous recherchez. La première chose que vous ajoutez est la méthode -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos
Vous ajoutez ensuite les arguments et le format dont vous avez besoin, avec un & signe entre chacun -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7266d34a4b2&user_id=99599718@N05&format=json&jsoncallback=?
Accentsconagua
identifiant d'utilisateur argument est le compte que vous voulez dessiner les photos. Utilisez idGettr pour résoudre ce problème.clé API est le code que vous avez obtenu à l'étape précédente. Vous pouvez créer cette URL manuellement en consultant la documentation de la méthode choisie, par exemple. flickr.people.getPublicPhoto, mais c'est un peu délicat.Heureusement, Flickr propose un lien vers un assistant pratique (appelé API Explorer) au bas de chaque page 'méthode'. Un mot d'avertissement cependant; Par défaut, l'URL générée par l'assistant a 'nojsoncallback = 1' à la fin. Comme nous devons pousser les résultats dans une fonction, dans notre cas, la fin devrait être 'nojsoncallback =?' (Voir le format de réponse JSON pour plus de détails).
Donc, pour construire votre URL qui appelle l'API Flickr, vous devez:-
clé API argument avec votre propre clé.$ .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&jsoncallbackback??"; displayImages1); Une fois que vous avez construit votre URL qui appelle l'API Flickr, nous avons besoin d'un moyen de capturer les résultats. Nous faisons cela en utilisant la méthode $ .getJSON jQuery. La méthode $ .getJSON lit les données au format JSON (par exemple, ci-dessous) et appelle une fonction (dans ce cas, displayImages1), qui traite les données d'une manière ou d'une autre (dans ce cas, l'affichage des images sur une page Web).
Bien que nous parlions de JSON, il convient de souligner que JSON n’est qu’un moyen de formater ou de structurer des informations pour qu’elles puissent être lues par un ordinateur. Si vous regardez la sortie JSON (ci-dessus), vous pouvez commencer à voir comment le code accède à chaque bit des données. Donc, par exemple, data.photos.photo (regardez dans le displayImages1 fonction dans le code source de l'exemple simple) dirige le javaScript dans le photo tableau dans le JSON où la plupart des informations sont stockées. Ensuite, par exemple, var photoID = item.id; accède à l'élément id pour chaque photo.
Avant de poursuivre, jetons un coup d’œil à un autre exemple. Embrassons l'objectif principal d'Internet (partage de photos de chats) et trouvons des images contenant le mot "chaton"..
Afin de maximiser nos capacités de recherche de chaton, cette fois, nous souhaitons effectuer une recherche parmi les photos téléchargées par tous. La première étape consiste donc à construire la requête de l'API Flickr, qui ressemble à ceci: -
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=?
Cet appel d'API utilise la méthode flickr.photos.search. Cette URL est ensuite introduite dans le $ .getJSON procédé et traité de manière similaire au premier exemple. Jetez un coup d'œil à l'exemple en direct pour voir le résultat. Le code source est disponible à partir du lien en haut de cette page.
Une fois que vous avez examiné les deux exemples, essayez d’utiliser l’API pour saisir vos propres images à partir de votre compte Flickr et les afficher sur une page Web..
Votre premier contact avec l'API Flickr aurait dû vous familiariser avec les principes de base de son fonctionnement. Cependant, il est également probable que vous ayez commencé à remarquer à quel point il est vaste!
Ce n'est pas une mauvaise chose car cela vous offre un éventail de possibilités. Utilisez la documentation de l'API comme une sorte de "liste de courses". Prenez le temps de parcourir les méthodes (répertoriées à droite de la page d'accueil de la documentation de l'API) pour voir ce qui vous est proposé..
Vous avez peut-être également remarqué les différents formats de demande (par exemple, nous utilisons 'rest' - comme indiqué par le mot dans l'URL qui appelle l'API - ci-dessus), les formats de réponse (par exemple, nous utilisons JSON) et les langages de programmation que vous pouvez utiliser. avec l'API (par exemple, nous utilisons JavaScript). Encore une fois, il s’agit d’une force de l’API car cela signifie que le contenu de Flickr peut être transféré dans de nombreuses applications différentes..
La combinaison utilisée dans ce didacticiel a été choisie parce que c’est une bonne combinaison pour se familiariser avec l’API Flickr, et parce que c’est la combinaison logique lorsque vous liez cette API à l’API Google Maps basée sur JavaScript. Cela vaut toujours la peine de jeter un coup d'œil aux autres options disponibles dans la partie gauche de la page d'accueil de la documentation de l'API..
La beauté de Flickr est que vous pouvez éditer toutes sortes de métadonnées pour chaque photo..
Le bit qui nous intéresse ici est l'emplacement géographique de chaque photo, et il est facile de le définir pour chaque image:
Vous devez répéter cette procédure pour chacune de vos photos..
Une fois que vous avez géomarqué vos photos sur Flickr, vous pouvez les afficher sur une carte Google. Cliquez ici pour voir une démonstration en direct, puis faites un clic droit pour voir le code source.
Comme dans l'exemple précédent, les commentaires dans le code source fournissent une explication détaillée. Cependant, il convient de souligner quelques points essentiels. Tout d'abord, pour construire l'URL qui appelle l'API Flickr, nous utilisons à nouveau flickr.photos.search. Cette fois nous avons inclus les arguments has_geo = 1 et extras = geo pour vous assurer que la latitude et la longitude de chaque image sont également incluses dans les résultats. Pour voir les résultats de l'URL qui appelle l'API Flickr, copiez-la (ci-dessous) dans votre navigateur, puis utilisez JSON Formatter pour voir la sortie plus clairement..
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&has_geo=1&extras=geo&format=json&journal=?
En outre, il convient également de noter que lorsque le code JavaScript parcourt les images, il utilise également l'API Google Maps pour créer des marqueurs de carte à l'aide des valeurs de latitude et de longitude de l'API Flickr. Ensuite, dans le corps balises, l'API Google Maps est utilisé pour créer la carte elle-même.
Vous devriez être capable de recréer quelque chose de similaire en utilisant vos propres images que vous avez chargées dans Flickr. Le site Web iTouchMap est utile pour déterminer le centre de votre carte..
Tout ce qui reste à faire maintenant, c’est de prendre tout ce qui est couvert dans ce tutoriel et de l’appliquer à la carte des festivals du Royaume-Uni que nous avons construite au cours des premier et deuxième tutoriels de cette série..
C'est le genre de chose que nous visons. Si vous cliquez sur le bouton "Petits événements", vous verrez les images tirées de Flickr..
Par souci d'exhaustivité, j'ai également ajouté des images, ne provenant pas de Flickr, aux icônes "Festival principal". De plus, afin que vous puissiez voir les différentes options en termes de boîtes contextuelles, j'ai utilisé à la fois les "boîtes d'information" (pour les "principaux festivals") et les "fenêtres d'information" par défaut pour les photos de Flickr..
Cette carte a été créée en apportant quelques modifications au code du didacticiel précédent et en ajoutant le code issu du mashup Google Maps et Flickr (ci-dessus). Nous créons d'abord une variable (smallEventsToggle) pour déterminer si les marqueurs de «petits événements» sont actuellement affichés. Et puis créez une nouvelle option dans le handelRequests fonction pour gérer la situation lorsque le bouton "petits événements" (petits événements) est cliqué. Enfin, le code de l'étape précédente est ajouté et quelques touches finales sont apportées, telles que la modification du marqueur de carte par défaut..
Comme d'habitude, pour vous épargner de gros extraits de code dans le didacticiel, les commentaires dans le code source téléchargeable fournissent une explication détaillée..
Le prochain tutoriel portera sur l'optimisation, la réactivité, le débogage et les tests..
Les crédits des photos sur les marqueurs de carte se trouvent à la fin du premier tutoriel..
