Menghubungkan Google Maps dan Flickr API
() translation by (you can also view the original English article)



Bayangkan kamu telah membuat peta indah seperti yang klien minta; menambahkan segala macam tanda yang menarik, pop-up, kustom dan foto. Namun klien menyebutkan bahwa mereka ingin menambah foto mereka tanpa membuatmu repot, atau memprogram dengan sendirinya. Ini adalah dimana Flickr API berguna.
Flickr API menyediakan Flickr website sebagai pusat databasemu atau area penyimpanan fotomu. Menggunakan Flickr API, kamu dapat mengambil fotomu dari Flickr dan memajang mereka, di tempat lain, dan di Google map mu. Setiap kali kamu dan klien mu menambah foto ke akunmu pada website Flickr, Google map mu akan secara otomatis terupdate.
Jika kamu melihat demo-nya, Fotonya akan muncul ketika kamu menekan tombol "Smaller events" yang diambil dari sebuah akun Flickr yang telah aku tujukan untuk tutorial ini. Atau, jika kamu melihat Portsmouth History map ku, fotonya muncul ketika kamu menekan tombol Old Photographs (menu kanan) semua ditarik dari Flickr.
Flickr API sebenarnya membolehkanmu melakukan lebih daripada mengambil fotomu dari akunmu. Itu memberikanmu kemampuan untuk membuat pertanyaan yang kompleks pada metadata, mengambil foto dari semua pengguna Flickr. Ini memberimu alat yang sangat hebat yang dapat kamu gunakan untuk berbagai macam kegunaan menarik dan kreatif. Kelemahannya, adalah kemampuan API yang luas bisa membuatnya sedikit menakutkan jika kamu belum pernah menggunakannya sebelumnya, dan sulit untuk mengetahui darimana memulai. Dengan pemikiran ini, tutorial ini berfokus pada contoh mengambil foto dari akun Flickr mu sendiri, memberikan jalan pintas yang lengkap. Setelah kamu memahaminya, kamu harus bisa memanfaatkan API.
Tutorial ini dibuat berdasarkan tutorial sebelumnya, yang semakin kreatif dengan Google Maps API dan membuat lapisan kustom, dengan menjelaskan bagaimana Anda menghubungkan API Flickr dengan Google Maps API.
Pengingat Cepat Tentang API
API, atau Application Programming Interface, adalah cara yang bagus untuk menentukan sekumpulan perintah, yang diterbitkan oleh perusahaan (misalnya Facebook, Twitter, You Tube, Flickr), yang memungkinkan seseorang membuat versi konten yang dapat di kustom. Ketika orang membicarakan 'mash-up' mereka berarti telah menggunakan API dari dua atau lebih perusahaan untuk menggabungkan konten. Ada ribuan API ; lihatlah situs Programmable Web untuk daftarnya.
Tutorial pertama melihat bagaimana Google Maps API memungkinkan Kamu melakukan berbagai hal, termasuk menyesuaikan warna, tkamu peta, gaya kotak pop-up, tingkat detail, tingkat zoom. API Flickr sama luasnya.
Memulai Dengan API
Untuk memulai API Flickr Kamu perlu membuat akun Flickr, lalu tambahkan beberapa foto ke akun Kamu sehingga Kamu memiliki sesuatu untuk dikerjakan. Cobalah untuk menggunakan beberapa gambar dari lokasi yang berbeda (ini akan menjadi penting nanti). Gambar yang digunakan dalam tutorial ini tersedia di file sumber pada bagian atas halaman ini.
Catatan: Jika Kamu menggunakan gambar ini, hargai pencipta aslinya, cantumkan pada bagian bawah halaman ini.
Setelah Kamu memiliki beberapa konten untuk dikerjakan, saatnya untuk memulai API. Ini adalah beberapa situs utama.
- Panduan pengembang Flickr API. Ini adalah semacam 'panduan awal'.
- Dokumentasi Flickr API. Ini mencantumkan semua metode API (yaitu semua yang dapat Kamu lakukan dengan API), format yang dapat Kamu gunakan untuk meminta data, dan format data dapat dikembalikan. Tandai halaman ini!
- Halaman bantuan API Flickr.



Sebelum Kamu bisa memulai, hal pertama yang perlu Kamu lakukan adalah mendapatkan kunci API mu sendiri. Catat ini; Kamu akan membutuhkannya nanti!
'Hello World' dari Flickr API
Lihatlah contoh sederhana ini; menggunakan Flickr API untuk mengambil foto dari akun Flickr yang saya buat untuk tutorial ini. daripada membuat daftar cuplikan kode yang terisolasi di sini, ini lebih berguna jika Kamu melihat kode untuk keseluruhan situs web untuk melihat bagaimana segalanya bekerja sama. Buka contoh sederhana, klik kanan pada halaman dan pilih view source. Atau download sumber dari atas halaman ini dan pisahkan.
Komentar dalam kode sumber memberikan penjelasan rinci, namun perlu dipandu untuk beberapa area penting.
URL
Yang paling penting untuk dipahami adalah bagaimana Kamu mengakses Flickr API menggunakan URL khusus. Kamu membuat URL ini untuk 'meminta' data yang Kamu cari. Bagian pertama dari URL ini adalah –
1 |
http://api.flickr.com/services/rest/ |
Kamu kemudian menambahkan sesuatu untuk menentukan apa yang Kamu cari. Hal pertama yang Kamu tambahkan adalah metode -
1 |
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos |
Kamu kemudian menambahkan argumen dan format yang Kamu butuhkan, yang memiliki & tkamu di antara masing-masing -
1 |
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&format=json&jsoncallback=? |
- Argumen
user_id
adalah akun yang ingin Kamu ambil dari foto. Gunakan idGettr untuk menyelesaikannya. -
api_key
adalah kode yang Kamu dapatkan pada langkah sebelumnya. Kamu dapat membuat URL ini secara manual dengan melihat dokumentasi untuk metode yang Kamu pilih, misal. flickr.people.getPublicPhoto, tapi ini terkesan datar.
URL Wizard
Untungnya, Flickr menawarkan link ke wizard berguna (disebut API Explorer) di bagian bawah setiap halaman 'metode'. Sebuah kata peringatan sekalipun; Secara default, URL yang dihasilkan oleh wizard memiliki 'nojsoncallback = 1' di bagian akhir. Karena kita perlu mendorong hasilnya kedalam sebuah fungsi, dalam kasus kita akhirnya seharusnya 'nojsoncallback =?' (Lihat format respons JSON untuk lebih jelasnya).



Jadi, untuk membuat URL yang memanggil API Flickr, Kamu harus: -
- Buka homepage Dokumentasi API Flickr dan pilih metodenya (dari daftar di sebelah kanan) yang ingin Kamu gunakan.
- Kemudian pada halaman 'metode' (misalnya flickr.people.getPublicPhoto), perhatikan lebih dekat deskripsi dan detailnya untuk memastikan ini untukmu. Kemudian gulir ke bawah ke bagian bawah halaman dan klik pada link API explorer.
- Pada halaman penjelajah API, isi informasi yang relevan tentang argumen, lalu gulir ke bawah. Pilih output JSON. (Lebih lanjut tentang format output nanti). Dan, pilih Do not sign call?' Karena kami melihat data publik. Kemudian klik tombol Call Method (atas)
- Lihatlah bagian bawah layar sekarang. Kamu seharusnya melihatn itu ditampilkan dengan hasil kueri Kamu. Dan, tepat di akhir, ada URL yang Kamu butuhkan!
- Jika Kamu menyalin URL ini ke browser Kamu, Kamu benar-benar akan melihat hasil kueri. Mereka seringkali agak sulit dibaca, tapi jika Kamu menyalin hasilnya ke JSON Formatter maka semua akan terungkap. Seperti disebutkan di atas, sebelum menggunakan URL ini untuk menghubungi Flickr dari dalam halaman web mu sendiri, ubah akhir ke 'nojsoncallback =?', Dan ingat untuk mengganti argumen
api_key
dengan kuncimu sendiri.
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); |
Tangkap Hasilnya
Setelah Kamu membuat URL yang memanggil API Flickr, kami memerlukan cara untuk menangkap hasilnya. Kami melakukan ini dengan menggunakan metode jQuery $.getJSON. Metode $ .getJSON dibaca dalam data yang ada dalam format JSON (misalnya di bawah) dan memanggil fungsi (dalam kasus ini displayImages1
), yang memproses data dengan cara tertentu (dalam hal ini menampilkan gambar pada halaman web).



Tunggu - Apa sebenarnya JSON itu?
Sementara kita membahas masalah JSON, ada gunanya menunjukkan bahwa JSON hanyalah cara memformat atau menyusun informasi sehingga komputer dapat membacanya. Jika Kamu melihat output JSON (di atas), Kamu dapat melihat bagaimana kode tersebut mengakses setiap bit data. Jadi, misalnya, data.photos.photo
(lihat di displayImages1
fungsi dalam kode sumber dari contoh sederhana) adalah mengarahkan javaScript ke dalam susunan photo
di JSON dimana sebagian besar informasi disimpan. Kemudian, misalnya, var photoID = item.id;
adalah mengakses elemen id untuk setiap foto.
Satu Contoh Terakhir: Anak Kucing
Sebelum melanjutkan, ada baiknya melihat sekilas contoh lain. Mari kita merangkul tujuan utama internet (yaitu berbagi gambar kucing) dan temukan gambar yang ditkamui dengan kata 'kitten'.



Untuk memaksimalkan kemampuan menemukan anak kucing kita, kali ini kita ingin mencari foto yang diunggah oleh semua orang. Jadi langkah pertama adalah membuat kueri API Flickr, yang terlihat seperti ini.
1 |
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=? |
Panggilan API ini menggunakan metode
flickr.photos.search. URL ini kemudian dimasukkan ke dalam metode $.getJSON
dan diproses dengan cara yang mirip dengan contoh pertama. Lihatlah contoh langsung untuk melihat hasilnya. Kode sumber tersedia dari link di bagian atas halaman ini.
Setelah melihat kedua contoh tersebut, Kamu harus menggunakan API untuk mengambil gambar Kamu sendiri dari akun Flickr Kamu dan menampilkannya di halaman web.
Pucuk dari Gunung Es!
Sikat pertama Kamu dengan Flickr API seharusnya melengkapi Kamu dengan prinsip-prinsip kunci tentang cara kerjanya. Namun, kemungkinan besar Kamu sudah mulai memperhatikan seberapa besar itu!
Ini bukan hal yang buruk karena menyediakan beragam kemungkinan. Gunakan dokumentasi API seperti semacam 'daftar belanja'. Luangkan waktu untuk melihat-lihat metode (tercantum di sebelah kanan halaman depan dokumentasi API) untuk melihat yang ditawarkan.
Kamu mungkin juga memperhatikan berbagai format permintaan (misalnya, kita menggunakan 'rest' - seperti yang ditunjukkan oleh kata di URL yang memanggil API - di atas), format tanggapan (misalnya, kita menggunakan JSON), dan bahasa pemrograman yang dapat Kamu gunakan dengan API (misalnya kita menggunakan JavaScript). Sekali lagi, ini adalah kekuatan API karena itu berarti konten dari Flickr dapat dikirim ke banyak aplikasi yang berbeda.
Kombinasi yang digunakan dalam tutorial ini dipilih karena ini adalah kombinasi yang bagus untuk memulai saat mempelajari tentang Flickr API, dan karena ini adalah kombinasi logis saat menghubungkan API ini dengan JavaScript berbasis Google Maps API. Masih layak untuk melihat opsi lain yang ada di sisi kiri halaman home dokumentasi API.
Penanda Geografis
Keindahan Flickr adalah Kamu dapat mengedit semua jenis data meta untuk setiap foto.



Sedikit yang kita minati di sini adalah lokasi geografis masing-masing foto, dan mudah untuk mengaturnya untuk setiap gambar:
- Masuklah ke akun Flickr mu.
- Klik 'You' di kiri atas.
- Klik pada ikon menu (tiga lingkaran kecil berturut-turut) di kanan bawah.
- Klik 'Add to map'. Kemudian ikuti petunjuk di layar. Flickr secara otomatis bekerja dan menyimpan garis lintang dan bujur untuk setiap foto.
Kamu perlu mengulangi proses ini untuk setiap foto Kamu.
Membuat Flickr dan Google maps mashup.
Setelah Kamu memberi tanda geografis foto di Flickr, Kamu dapat menampilkannya di peta Google. Klik di sini untuk melihat live demo lalu klik kanan untuk melihat source code.



Demikian pula dengan contoh sebelumnya, komentar dalam kode
sumber memberikan penjelasan rinci. Namun, perlu disorot beberapa poin kunci. Pertama, untuk membuat URL yang memanggil API
Flickr, kita menggunakan flickr.photos.search lagi. Kali ini kami memasukkan
argumen has_geo=1
dan extras=geo
untuk memastikan garis lintang dan bujur
untuk setiap gambar juga disertakan dalam hasil. Untuk melihat hasil URL yang memanggil API
Flickr, salinlah (di bawah) ke browser Kamu dan kemudian gunakan Formatter JSON
untuk melihat hasilnya dengan lebih jelas.
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=? |
Juga, ini layak ditunjukkan bahwa saat kode JavaScript dilewati melalui gambar, Google Maps juga menggunakan peta untuk membuat tanda peta menggunakan nilai lintang dan bujur dari API Flickr. Kemudian, di dalam tag tubuh, Google Maps API digunakan untuk membuat peta itu sendiri.
Kamu harus bisa menciptakan sesuatu yang serupa dengan menggunakan gambar Kamu sendiri yang Kamu muat ke Flickr. Situs iTouchMap berguna untuk mengetahui titik pusat peta Kamu.
Flickr dan Peta Festival Inggris kami
Semua yang masih harus dilakukan sekarang, adalah dengan mengambil semua yang tercakup dalam tutorial ini dan menerapkannya ke Peta Festival Inggris yang telah kami bangun dari tutorial pertama dan kedua dalam rangkaian ini.



Inilah hal yang kita inginkan. Jika Kamu mengklik tombol “Smaller events”, Kamu akan melihat gambar yang diambil dari Flickr.
Untuk kelengkapan saya juga menambahkan gambar, yang bukan berasal dari Flickr, ke ikon “main festival”. Selain itu, Kamu dapat melihat berbagai opsi dalam bentuk kotak pop-up, saya telah menggunakan 'info boxes' (untuk 'festival utama') dan 'info windows' default untuk foto-foto dari Flickr.
Peta ini dibuat dengan membuat beberapa tweak pada kode dari tutorial sebelumnya, dan menambahkan kode dari mashup Google Maps dan Flickr (atas). Kami pertama kali membuat variabel (smallEventsToggle
) untuk menahan penkamu 'peristiwa kecil' atau tidak. Dan, kemudian buat opsi baru di fungsi handelRequests
untuk mengatasi situasi saat tombol “small events” (smallEvents)
diklik. Akhirnya, kode dari langkah sebelumnya ditambahkan dan beberapa sentuhan akhir dibuat, seperti mengubah penkamu peta default.
Seperti biasa, untuk mengosongkan cuplikan besar Kamu dalam tutorial, komentar dalam kode sumber yang dapat didownload memberikan penjelasan rinci.
Apa Selanjutnya?
Tutorial selanjutnya akan melihat optimasi, desain responsif, debugging dan testing.
Kredit Gambar
- Festival Manusia Hijau- oleh Nicholas Smale
- V-Festival - oleh Liam Swinney
- V-Festival - oleh Dylan J C
- Download – oleh Sezzles
- Bestival - oleh Mike Mantin
- Festival Pertanian Hop - oleh Gerardo Lazzari
- Festival Ladang Strawberry - oleh remixyourface
- Wireless – oleh Surreal Name Given
- Lovebox – oleh Annie Mole
- Panen Global – oleh Oli R
- Hutan Belantara – oleh Andy Carter
- Hari yang Indah – oleh Brian Marks
- Creamfields – oleh Gerardo Lazzari
- Musim Panas Inggris – oleh Andrea Sartorati
- Mundur - oleh Chris Osborne
- Akhir festival jalan - oleh jaswooduk
- Y Bukan Festival - oleh Jo Jakeman
- Isle of Wight – oleh David Jones
- Festival Membaca – oleh David Martyn Hunt
- Lintang - oleh markheybo
- Festival Leeds - oleh Richard Riley
- Pesta Kebun Rahasia - oleh Wonderlane
- Festival Glastonbury – oleh wonker
- Glasgowbury – oleh Mike Mantin
- T di Taman – oleh Ian Oldham
- Rockness - oleh Ian Oldham
- Icon maps hijau
Kredit untuk foto pada tanda peta dapat ditemukan di akhir tutorial pertama.