Share
Tenk deg at du har laget det vakre kartet en klient forespurt; legger til alle slags interessante markører, popup-vinduer, tilpassede overlegg og bilder. Men da klienten nevner at de vil kunne legge til sine egne bilder uten å bekymre deg eller gjøre noen koding selv. Dette er hvor Flickr API kommer veldig praktisk.
Flickr API gir deg mulighet til å bruke Flickr nettsted som din database eller lagringsplass for bildene dine. Ved hjelp av Flickr API kan du ta bilder fra Flickr og vise dem, blant annet på Google-kartet. Hver gang du eller din klient legger til bilder på kontoen din på Flickr-nettstedet, oppdateres Google-kartet automatisk.
Hvis du ser på demoen, blir bildene som vises når du klikker på knappen "Mindre hendelser", trukket fra en Flickr-konto som jeg har satt opp for denne opplæringen. Eller, hvis du ser på mitt Portsmouth History-kart, blir alle bildene som vises når du klikker på knappen Old Photographs (høyre meny) trukket fra Flickr.
Flickr-API lar deg faktisk gjøre mye mer enn å ta bilder fra din egen konto. Det gir deg muligheten til å lage komplekse søk på metadataene, tegne bilder fra alle Flickr-brukere. Dette gir deg et ekstremt kraftig verktøy som du kan legge til alle slags interessante og kreative bruksområder. Ulempen er imidlertid at den omfattende muligheten til API-en kan gjøre det litt skremmende om du ikke har brukt det før, og det kan være vanskelig å vite hvor du skal begynne. Med dette i tankene fokuserer denne opplæringen på eksempelet på å tegne bilder fra din egen Flickr-konto, og gir en komplett gjennomgang av prosessen. Når du har henger av dette, bør du kunne gjøre god bruk av resten av APIen.
Denne opplæringen bygger på tidligere opplæringsprogrammer, som dekket å bli kreative med Google Maps API og opprette egendefinerte overlegg, ved å forklare hvordan du kan koble Flickr API med Google Maps API.
Et API, eller Application Programming Interface, er en fin måte å definere et sett med kommandoer, publisert av et selskap (for eksempel Facebook, Twitter, You Tube, Flickr), som gjør at noen kan lage en svært tilpasset versjon av innholdet. Når folk snakker om "mash-ups", mener de at de har brukt API for to eller flere selskaper for å kombinere innhold. Det er bokstavelig talt tusenvis av disse APIene rundt; ta en titt på det programmerbare nettstedet for en liste.
Den første opplæringen så på hvordan Google Maps API gir deg muligheten til å gjøre alle slags ting, inkludert å tilpasse fargene, kartmarkørene, popup-boksestilen, detaljnivået, zoomnivået. Flickr API er like stor.
For å komme i gang med Flickr API må du opprette en Flickr-konto, og deretter legge til noen bilder på kontoen din, slik at du har noe å jobbe med. Prøv å bruke noen bilder fra forskjellige steder (dette vil være viktig senere). Bildene som brukes i denne opplæringen er tilgjengelige i kildefilene øverst på denne siden.
Merk: Hvis du bruker disse bildene, vennligst kreditt deres opprinnelige skapere, oppført ved foten av denne siden.
Når du har noe innhold å leke med, er det på tide å komme i gang med API. Dette er noen viktige nettsteder.
Før du kan komme i gang, er det første du må gjøre, å få din egen API-nøkkel. Legg merke til disse detaljene; du trenger dem senere!
Ta en titt på dette enkle eksempelet; det bruker Flickr API for å ta bilder fra Flickr-kontoen jeg opprettet for denne opplæringen. I stedet for å oppgi isolerte kodestykker her, er det mer nyttig hvis du ser på koden for hele nettstedet for å se hvordan ting fungerer sammen. Gå til det enkle eksempelet, høyreklikk på siden og velg se kilde. Eller last ned kilden fra toppen av denne siden og trekk den fra hverandre.
Kommentarene i kildekoden gir en detaljert forklaring, men det er verdt å gi en gjennomgang av noen få viktige områder.
Det viktigste å få hodet rundt er hvordan du får tilgang til Flickr API ved hjelp av en spesiell nettadresse. Du konstruerer denne nettadressen for å "spørre" for dataene du er ute etter. Den første delen av denne nettadressen er -
http://api.flickr.com/services/rest/
Du legger til ting for å angi hva du er ute etter. Det første du legger til er metoden -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos
Deretter legger du til argumentene og formatet du trenger, som har et & tegn mellom hver enkelt -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&format=json&jsoncallback=?
Accentsconagua
bruker-ID argument er kontoen du vil tegne bildene fra. Bruk idGettr til å jobbe dette ut.api_key er koden du oppnådde i forrige trinn. Du kan konstruere denne nettadressen manuelt ved å se på dokumentasjonen for den valgte metoden, f.eks. flickr.people.getPublicPhoto, men dette er litt fiddly.Heldigvis tilbyr Flickr en lenke til en praktisk veiviser (kalt API Explorer) nederst på hver "metode" side. En liten advarsel om; Nettadressen generert av veiviseren har som standard "nojsoncallback = 1" på slutten. Som vi må trykke resultatene inn i en funksjon, i vårt tilfelle skal slutten være 'nojsoncallback =?' (Se JSON svarformat for flere detaljer).
Så, for å konstruere nettadressen din som kaller Flickr API, må du:-
api_key argument med din egen nøkkel.$ .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); Når du har opprettet nettadressen din som kaller Flickr API, trenger vi en måte å fange opp resultatene på. Vi gjør dette ved hjelp av $ .getJSON jQuery-metoden. $ .GetJSON-metoden leser i data som er i JSON-formatet (for eksempel nedenfor) og kaller en funksjon (i dette tilfellet displayImages1), som behandler dataene på en eller annen måte (i dette tilfellet viser bildene på en nettside).
Mens vi er på temaet JSON, er det verdt å påpeke at JSON bare er en måte å formatere eller strukturere informasjon på, slik at en datamaskin kan lese den. Hvis du ser på JSON-utgangen (over), kan du begynne å se hvordan koden går til hver bit av dataene. Så, for eksempel, data.photos.photo (se i displayImages1 funksjon i kildekoden til det enkle eksempelet) styrer javaScript i bilde array i JSON der det meste av informasjonen er lagret. Så, for eksempel, var photoID = item.id; Tilgang til id-elementet for hvert bilde.
Før du går videre, er det verdt å ta en rask titt på et annet eksempel. La oss omfavne internettets primære formål (dvs. å dele kattbilder) og finne bilder merket med ordet "kattunge".
For å maksimere våre kattungefunnskapskaper, denne gangen vil vi søke gjennom bilder lastet opp av alle. Så det første trinnet er å konstruere Flickr API-spørringen, som ser slik ut -
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=?
Denne API-anropet bruker flickr.photos.search-metoden. Denne nettadressen blir så matet inn i $ .getJSON metode og behandlet på samme måte som det første eksemplet. Ta en titt på liveeksemplet for å se resultatet. Kildekoden er tilgjengelig fra lenken øverst på denne siden.
Når du har tatt en titt på begge eksemplene, kan du gå på å bruke API-en for å hente dine egne bilder fra Flickr-kontoen din og vise dem på en nettside.
Din første børste med Flickr API bør ha utstyrt deg med hovedprinsippene for hvordan det fungerer. Det er imidlertid også sannsynlig at du har begynt å legge merke til hvor stor den er!
Dette er ikke dårlig, da det gir deg en rekke muligheter. Bruk API-dokumentasjonen som en slags «handleliste». Ta deg tid til å se gjennom metodene (oppført til høyre på API-dokumentasjonens hjemmeside) for å se hva som tilbys.
Du har kanskje også lagt merke til de forskjellige forespørselsformatene (f.eks. Vi bruker "hvile" - som angitt av ordet i nettadressen som kalles API - ovenfor), responsformater (f.eks. Vi bruker JSON) og programmeringsspråk du kan bruke med API (f.eks. bruker vi JavaScript). Igjen, dette er en styrke i API-en, da det betyr at innhold fra Flickr kan sendes inn i mange forskjellige applikasjoner.
Kombinasjonen som ble brukt i denne opplæringen ble valgt fordi det er en god kombinasjon for å komme i gang med mens du lærer om Flickr API, og fordi det er den logiske kombinasjonen når du kobler denne API-en til JavaScript-basert Google Maps API. Det er fortsatt verdt å ta en titt på de andre tilgjengelige alternativene på venstre side av API-dokumentasjonens hjemmeside.
Flickrs skjønnhet er at du kan redigere alle slags metadata for hvert bilde.
Bittet vi er interessert i er den geografiske plasseringen til hvert bilde, og det er enkelt å angi dette for hvert bilde:
Du må gjenta denne prosessen for hvert av bildene dine.
Når du har geotagged bildene dine i Flickr, kan du vise dem på et Google-kart. Klikk her for å se en live demo og høyreklikk for å se kildekoden.
På samme måte som forrige eksempel gir kommentarene i kildekoden en detaljert forklaring. Det er imidlertid verdt å fremheve noen få viktige punkter. For det første, for å konstruere nettadressen som kaller Flickr API, bruker vi flickr.photos.search igjen. Denne gangen inkluderte vi argumentene has_geo = 1 og statister = geo for å sikre at breddegraden og lengdegraden for hvert bilde også er inkludert i resultatene. For å se resultatene av nettadressen som kaller Flickr API, kopier den (nedenfor) til nettleseren din og bruk deretter JSON Formatter for å se produksjonen tydeligere..
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=?
Det er også verdt å påpeke at når JavaScript-koden løper gjennom bildene, bruker den også Google Maps API til å lage kartmarkører ved hjelp av bredde- og breddeverdiene fra Flickr API. Så, innenfor kropp Tagger, Google Maps API brukes til å lage selve kartet.
Du bør kunne gjenskape noe lignende med dine egne bilder du lastet inn i Flickr. ITouchMap-nettstedet er nyttig for å finne ut hva midtpunktet på kartet ditt skal være.
Alt som gjenstår å gjøre nå, er å ta alt som er dekket i denne opplæringen og bruke den til den britiske festivalkartet som vi har bygget over første og andre opplæringsprogrammer i denne serien.
Dette er den typen ting vi satser på. Hvis du klikker på knappen 'Mindre hendelser', ser du bildene som er trukket fra Flickr.
For fullstendighet har jeg også lagt til bilder, som ikke kommer fra Flickr, til ikonene for «hovedfestivalen». Også, slik at du kan se de forskjellige alternativene når det gjelder popup-bokser, har jeg brukt både 'info-boksene' (for 'hovedfestivaler') og standard 'info-vinduer' for bildene fra Flickr.
Dette kartet ble opprettet ved å gjøre noen tilpasninger til koden fra forrige veiledning, og legge til koden fra Google Maps og Flickr mashup (over). Vi lager først en variabel (smallEventsToggle) for å holde om markørene for "små hendelser" vises for øyeblikket eller ikke. Og så opprett et nytt alternativ i handelRequests funksjon for å håndtere situasjonen når knappen "små hendelser" (smallEvents) er klikket. Endelig er koden fra forrige trinn lagt til og noen få finjusteringer gjort, for eksempel endring av standard kartmarkør.
Som vanlig, for å spare deg for store utdrag i opplæringen, gir kommentarene i den nedlastbare kildekoden en detaljert forklaring.
Den neste opplæringen vil se på optimalisering, responsiv design, feilsøking og testing.
Kredittene for bildene på kartmarkørene selv finnes i slutten av første veiledning.
