Share
Stel je voor dat je van de prachtige kaart een gevraagde klant hebt gemaakt; het toevoegen van allerlei interessante markeringen, pop-ups, aangepaste overlays en foto's. Maar dan zegt de klant dat ze hun eigen foto's willen kunnen toevoegen zonder je te verontrusten of zelf te coderen. Dit is waar de Flickr API erg handig is.
Met de Flickr API kunt u de Flickr-website in wezen gebruiken als uw database of opslaggebied voor uw foto's. Met behulp van de Flickr API kunt u uw foto's van Flickr pakken en deze, onder andere, weergeven op uw Google-kaart. Telkens wanneer u of uw klant foto's toevoegt aan uw account op de Flickr-website, wordt uw Google-kaart automatisch bijgewerkt.
Als u de demo bekijkt, worden de foto's die verschijnen wanneer u op de knop 'Kleinere evenementen' klikt, opgehaald uit een Flickr-account dat ik voor deze zelfstudie heb ingesteld. Of, als u naar mijn Portsmouth History-kaart kijkt, worden alle foto's die worden weergegeven wanneer u op de knop Oude foto's (rechtermenu) klikt, allemaal van Flickr getrokken.
Met de Flickr API kun je eigenlijk veel meer doen dan foto's maken vanuit je eigen account. Het biedt u de mogelijkheid om complexe query's te maken op de metadata, en foto's te maken van alle Flickr-gebruikers. Dit geeft je een extreem krachtige tool die je op allerlei interessante en creatieve manieren kunt gebruiken. Het nadeel is echter dat de uitgebreide mogelijkheden van de API het een beetje ontmoedigend kunnen maken als je het nog niet eerder hebt gebruikt, en het kan moeilijk zijn om te weten waar je moet beginnen. Met dit in gedachten richt deze tutorial zich op het voorbeeld van het tekenen van foto's vanuit uw eigen Flickr-account, waardoor het proces volledig wordt doorlopen. Zodra je dit onder de knie hebt, zou je de rest van de API goed kunnen gebruiken.
Deze zelfstudie is gebaseerd op de vorige zelfstudies, waarbij het ging om het creatief gebruiken van de Google Maps API en het maken van aangepaste overlays, door uit te leggen hoe u de Flickr API kunt koppelen aan de Google Maps API.
Een API, of Application Programming Interface, is een mooie manier om een reeks commando's te definiëren, gepubliceerd door een bedrijf (bijvoorbeeld Facebook, Twitter, You Tube, Flickr), waarmee iedereen een zeer aangepaste versie van hun inhoud kan maken. Wanneer mensen het hebben over 'mash-ups', bedoelen ze dat ze de API van twee of meer bedrijven hebben gebruikt om inhoud te combineren. Er zijn letterlijk duizenden van deze API's in de buurt; Neem een kijkje op de programmeerbare website voor een lijst.
In de eerste zelfstudie werd bekeken hoe u met de Google Maps API allerlei dingen kunt doen, zoals het aanpassen van de kleuren, kaartmarkeringen, pop-upvakstijl, detailniveau, zoomniveau. De Flickr API is net zo uitgebreid.
Om met de Flickr API aan de slag te gaan, moet je een Flickr-account maken en vervolgens een paar foto's aan je account toevoegen, zodat je iets hebt om mee te werken. Probeer een aantal foto's van verschillende locaties te gebruiken (dit zal later belangrijk zijn). De afbeeldingen in deze zelfstudie zijn beschikbaar in de bronbestanden bovenaan deze pagina.
Notitie: Als u deze afbeeldingen gebruikt, vermeldt u hun oorspronkelijke makers, die aan de voet van deze pagina worden vermeld.
Zodra je wat inhoud hebt om mee te spelen, is het tijd om aan de slag te gaan met de API. Dit zijn een paar belangrijke websites.
Voordat u aan de slag kunt gaan, moet u eerst uw eigen API-sleutel ophalen. Noteer deze details; je hebt ze later nodig!
Bekijk dit eenvoudige voorbeeld; het maakt gebruik van de Flickr API om foto's te maken van het Flickr-account dat ik voor deze tutorial heb gemaakt. In plaats van geïsoleerde codefragmenten hier op te nemen, is het nuttiger als u de code van de hele website bekijkt om te zien hoe de dingen samenwerken. Ga naar het eenvoudige voorbeeld, klik met de rechtermuisknop op de pagina en selecteer bekijk de bron. Of download de bron vanaf de bovenkant van deze pagina en trek hem uit elkaar.
De opmerkingen in de broncode geven een gedetailleerde uitleg, maar het is de moeite waard om een paar belangrijke gebieden te doorlopen.
Het belangrijkste om je hoofd rond te krijgen, is hoe je de Flickr API opent met een speciale URL. U construeert deze URL om te 'vragen' naar de gegevens die u zoekt. Het eerste deel van deze URL is -
http://api.flickr.com/services/rest/
Je voegt dan dingen toe om te specificeren wat je zoekt. Het eerste dat u toevoegt, is de methode -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos
Vervolgens voegt u de argumenten en het formaat toe dat u nodig hebt, met een & teken tussen elk -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&format=json&jsoncallback=?
Accentsconagua
gebruikersnaam argument is het account waarvan u de foto's wilt maken. Gebruik idGettr om dit uit te werken.API sleutel is de code die u in de vorige stap hebt verkregen. U kunt deze URL handmatig construeren door te kijken naar de documentatie voor de door u gekozen methode, bijvoorbeeld flickr.people.getPublicPhoto, maar dit is een beetje lastig.Gelukkig biedt Flickr een link naar een handige wizard (genaamd API Explorer) onderaan elke 'methode'-pagina. Een woord van waarschuwing echter; standaard heeft de door de wizard gegenereerde URL aan het eind 'nojsoncallback = 1'. Omdat we de resultaten naar een functie moeten pushen, moet in ons geval het einde 'nojsoncallback =?' Zijn (Zie JSON-antwoordformaat voor meer details).
Dus, om uw URL te construeren die de Flickr API aanroept, moet u:-
API sleutel argument met uw eigen sleutel.$ .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); Zodra u uw URL heeft samengesteld die de Flickr API aanroept, hebben we een manier nodig om de resultaten te verzamelen. We doen dit met de $ .getJSON jQuery-methode. De $ .getJSON-methode leest gegevens in JSON-formaat in (bijvoorbeeld hieronder) en roept een functie aan (in dit geval displayImages1), die de gegevens op een of andere manier verwerkt (in dit geval de afbeeldingen op een webpagina weer te geven).
Hoewel we het hebben over JSON, is het de moeite waard om erop te wijzen dat JSON alleen een manier is om informatie te formatteren of te structureren, zodat een computer het kan lezen. Als u naar de JSON-uitvoer (hierboven) kijkt, kunt u beginnen om te zien hoe de code elk bit van de gegevens benadert. Dus bijvoorbeeld, data.photos.photo (kijk in de displayImages1 functie in de broncode van het eenvoudige voorbeeld) leidt de javaScript naar de foto array in JSON waar de meeste informatie wordt opgeslagen. Dan bijvoorbeeld, var photoID = item.id; heeft toegang tot het ID-element voor elke foto.
Voordat we verder gaan, is het de moeite waard om snel naar een ander voorbeeld te kijken. Laten we het primaire doel van internet omhelzen (d.w.z. foto's van katten delen) en foto's zoeken die zijn getagd met het woord 'kitten'.
Om onze kittenvaardigheden te maximaliseren, willen we dit keer zoeken naar foto's die door iedereen zijn geüpload. Dus de eerste stap is het bouwen van de Flickr API-query, die er zo uitziet -
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=?
Deze API-aanroep gebruikt de flickr.photos.search-methode. Deze URL wordt vervolgens in de $ .getJSON methode en verwerkt op een vergelijkbare manier als het eerste voorbeeld. Bekijk het live-voorbeeld om het resultaat te zien. De broncode is beschikbaar via de link bovenaan deze pagina.
Nadat u beide voorbeelden hebt bekeken, kunt u de API gebruiken om uw eigen afbeeldingen van uw Flickr-account te halen en ze op een webpagina weer te geven.
Uw eerste penseel met de Flickr API zou u moeten hebben uitgerust met de belangrijkste principes van hoe het werkt. Het is echter ook waarschijnlijk dat u begint op te merken hoe groot het is!
Dit is geen slechte zaak omdat het u een scala aan mogelijkheden biedt. Gebruik de API-documentatie als een soort 'boodschappenlijst'. Neem de tijd om de methoden te doorzoeken (aan de rechterkant van de startpagina van de API-documentatie) om te zien wat er wordt aangeboden.
Je hebt misschien ook de verschillende aanvraagformaten opgemerkt (we gebruiken bijvoorbeeld 'rest' - zoals aangegeven door het woord in de URL die de API roept - hierboven), responsformaten (we gebruiken bijvoorbeeld JSON) en programmeertalen die je kunt gebruiken met de API (we gebruiken bijvoorbeeld JavaScript). Nogmaals, dit is een sterkte van de API, omdat content van Flickr kan worden geporteerd naar veel verschillende apps.
De combinatie die in deze zelfstudie is gebruikt, is gekozen omdat het een goede combinatie is om mee aan de slag te gaan tijdens het leren over de Flickr API, en omdat dit de logische combinatie is wanneer deze API wordt gekoppeld aan de op JavaScript gebaseerde Google Maps API. Het is nog steeds de moeite waard om naar de andere opties te kijken die beschikbaar zijn aan de linkerkant van de startpagina van de API-documentatie.
Het mooie van Flickr is dat je allerlei metagegevens voor elke foto kunt bewerken.
De bit waar we in geïnteresseerd zijn, is de geografische locatie van elke foto, en het is gemakkelijk om dit in te stellen voor elke afbeelding:
U moet dit proces voor elk van uw foto's herhalen.
Nadat u uw foto's geotagged hebt in Flickr, kunt u ze weergeven op een Google-kaart. Klik hier om een live demo te zien en klik met de rechtermuisknop om de broncode te bekijken.
Net als bij het vorige voorbeeld geven de opmerkingen in de broncode een gedetailleerde uitleg. Het is echter de moeite waard om enkele kernpunten te benadrukken. Ten eerste gebruiken we de flickr.photos.search om de URL te bouwen die de Flickr API aanroept. Deze keer hebben we de argumenten opgenomen has_geo = 1 en extras = geo om ervoor te zorgen dat de breedte- en lengtegraad voor elke afbeelding ook in de resultaten worden opgenomen. Als u de resultaten wilt zien van de URL die de Flickr API aanroept, kopieert u deze (hieronder) naar uw browser en gebruikt u vervolgens JSON Formatter om de uitvoer duidelijker te zien.
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=?
Het is ook de moeite waard om erop te wijzen dat terwijl de JavaScript-code door de afbeeldingen loopt, deze ook de Google Maps API gebruikt om kaartmarkeringen te maken op basis van de waarden voor de breedte- en lengtegraad van de Flickr API. Vervolgens, binnen de lichaam tags, de Google Maps API wordt gebruikt om de kaart zelf te maken.
Je zou in staat moeten zijn om iets vergelijkbaars te maken met je eigen afbeeldingen die je op Flickr hebt geladen. De iTouchMap-website is handig om uit te zoeken wat het middelpunt van uw kaart zou moeten zijn.
Het enige wat nu nog te doen is, is alles in deze tutorial te behandelen en toe te passen op de UK Festival Map die we hebben opgebouwd tijdens de eerste en tweede tutorials in deze serie..
Dit is het soort ding dat we nastreven. Als u op de knop 'Kleinere evenementen' klikt, ziet u de afbeeldingen die u van Flickr haalt.
Voor de volledigheid heb ik ook afbeeldingen toegevoegd, die niet van Flickr komen, naar de pictogrammen van het 'hoofdfestival'. Ook kun je de verschillende opties in termen van pop-upvensters zien, ik heb zowel de 'infovakken' (voor de 'hoofdfestivals') als de standaard 'infovensters' gebruikt voor de foto's van Flickr.
Deze kaart is gemaakt door een paar aanpassingen aan de code uit de vorige zelfstudie aan te brengen en de code toe te voegen vanuit de mashup voor Google Maps en Flickr (hierboven). We maken eerst een variabele (smallEventsToggle) om aan te geven of de markeringen voor 'kleine gebeurtenissen' momenteel worden weergegeven. En maak vervolgens een nieuwe optie in de handelRequests functie om te gaan met de situatie wanneer de knop 'kleine evenementen' (smallEvents) is geklikt. Ten slotte wordt de code uit de vorige stap toegevoegd en een paar afwerkingen gemaakt, zoals het wijzigen van de standaard kaartmarkering.
Zoals gebruikelijk, om grote fragmenten in de zelfstudie te besparen, geven de opmerkingen in de downloadbare broncode een gedetailleerde uitleg.
De volgende tutorial zal kijken naar optimalisatie, responsief ontwerp, debugging en testen.
De credits voor de foto's op de kaartmarkeringen zelf zijn te vinden aan het einde van de eerste tutorial.
