Webdesigntuts+ |
Linking Up the Google Maps and Flickr APIs Posted: 08 Aug 2013 03:01 AM PDT Imagine you’ve made the beautiful map a client requested; adding all sorts of interesting markers, pop-ups, custom overlays and photos. But then the client mentions they want to be able to add their own photos without either troubling you, or doing any coding themselves. This is where the Flickr API comes in very handy. The Flickr API allows you to essentially use the Flickr website as your database or storage area for your photos. Using the Flickr API, you can grab your photos from Flickr and display them, among other places, on your Google map. Every time you or your client adds photos to your account on the Flickr website, your Google map is automatically updated. If you take a look at the demo, the photos that appear when you click the 'Smaller events' button are being pulled from a Flickr account which I set up for this tutorial. Or, if you look at my Portsmouth History map, the photos that appear when you click on the Old Photographs button (right-hand menu) are all being drawn from Flickr. The Flickr API actually lets you do much more than grab photos from your own account. It gives you the ability to create complex queries on the metadata, drawing photos from all Flickr users. This gives you an extremely powerful tool which you can put to all sorts of interesting and creative uses. The downside, however, is that the extensive capability of the API can make it a bit daunting if you’ve not used it before, and it can be difficult to know where to start. With this in mind, this tutorial focuses on the example of drawing photos from your own Flickr account, giving a complete walk-through of the process. Once you have the hang of this, you should be able to make good use of the rest of the API. This tutorial builds on the previous tutorials, which covered getting creative with the Google Maps API and creating custom overlays, by explaining how you can link the Flickr API with the Google Maps API. Quick Reminder About APIsAn API, or Application Programming Interface, is a fancy way of defining a set of commands, published by a company (e.g. Facebook, Twitter, You Tube, Flickr), which allow anyone to create a highly customized version of their content. When people talk about 'mash-ups' they mean they’ve used the API of two or more companies to combine content. There are literally thousands of these APIs around; take a look at the Programmable Web site for a list. The first tutorial looked at how the Google Maps API will enable you to do all sorts of things, including customizing the colors, map markers, pop-up box style, level of detail, zoom level. The Flickr API is just as extensive. Getting Started With the Flickr APITo get started with the Flickr API you need to create a Flickr account, then add a few photos to your account so you have something to work with. Try to use some pictures from different locations (this will be important later). The images used in this tutorial are available in the source files at the top of this page. Note: If you use these images, please credit their original creators, listed at the foot of this page. Once you have some content to play with, it's time to get started with the API. These are a few key websites.
Before you can get started, the first thing you need to do is to get your own API key. Make a note of these details; you’ll need them later! The 'Hello World' of the Flickr APITake a look at this simple example; it uses the Flickr API to grab photos from the Flickr account I created for this tutorial. Instead of listing isolated code snippets here, it’s more useful if you take a look at the code for the whole website to see how things work together. Go to the simple example, right-click on the page and select view source. Or download the source from the top of this page and pull it apart. The comments within the source code provide a detailed explanation, but it's worth giving a walk-through of a few key areas. The URLThe most important thing to get your head around is how you access the Flickr API using a special URL. You construct this URL to ‘ask’ for the data you are after. The first part of this URL is – http://api.flickr.com/services/rest/ You then add things to specify what you are after. The first thing you add is the method – http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos You then add the arguments and the format you need, which have an & sign between each one - http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&format=json&jsoncallback=?
URL WizardFortunately, Flickr offers a link to a handy wizard (called API Explorer) at the bottom of each 'method' page. A word of warning though; by default the URL generated by the wizard has 'nojsoncallback=1' at the end. As we need to push the results into a function, in our case the end should be 'nojsoncallback=?' (See JSON response format for more details). So, to construct your URL that calls the Flickr API, you need to:-
$.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); Capture the ResultsOnce you’ve constructed your URL that calls the Flickr API we need a way of capturing the results. We do this using the $.getJSON jQuery method. The $.getJSON method reads in data that’s in the JSON format (e.g. below) and calls a function (in this case Wait – What Exactly is JSON?While we are on the subject of JSON, it's worth pointing out that JSON is just a way of formatting or structuring information so a computer can read it. If you look at the JSON output (above), you can start to see how the code is accessing each bit of the data. So, for example, One Last Example: KittensBefore carrying on, it's worth taking a quick look at another example. Let's embrace the internet's primary purpose (i.e. sharing cat pictures) and find pictures tagged with the word 'kitten'. To maximize our kitten finding abilities, this time we want to search through photos uploaded by everyone. So the first step is to construct the Flickr API query, which looks like this - http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=? This API call is using the flickr.photos.search method. This URL is then fed into the Once you’ve taken a look at both examples, have a go at using the API to grab your own images from your Flickr account and display them on a web page. The Tip of the Iceberg!Your first brush with the Flickr API should have equipped you with the key principles of how it works. However, it's also likely you’ve started to notice how vast it is! This isn’t a bad thing as it provides you with an array of possibilities. Use the API documentation like a kind of 'shopping list'. Take time to look through the methods (listed on the right of the API documentation home page) to see what's on offer. You may have also noticed the different request formats (e.g. we are using 'rest' – as indicated by the word in the URL that calls the API – above), response formats (e.g. we are using JSON), and programming languages you can use with the API (e.g. we are using JavaScript). Again, this is a strength of the API as it means content from Flickr can be ported into many different apps. The combination used in this tutorial was chosen because it's a good combination to get started with while learning about the Flickr API, and because it's the logical combination when linking this API with the JavaScript based Google Maps API. It's still worth taking a look at the other options available on the left-hand side of the API documentation home page. GeotaggingThe beauty of Flickr is that you can edit all sorts of meta data for each photo. The bit we are interested in here is the geographical location of each photo, and it's easy to set this for each image:
You need to repeat this process for each of your photos. Creating a Google and Flickr MashupOnce you've geotagged your photos in Flickr, you can display them on a Google map. Click here to see a live demo and then right-click to view the source code. Similarly to the previous example, the comments within the source code give a detailed explanation. However, it's worth highlighting a few key points. Firstly, to construct the URL that calls the Flickr API, we use the flickr.photos.search again. This time we included the arguments 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=? Also, it's also worth pointing out that as the JavaScript code loops through the images, it also uses the Google Maps API to create map markers using the latitude and longitude values from the Flickr API. Then, within the You should be able to recreate something similar using your own images that you loaded into Flickr. The iTouchMap website is useful for working out what the center point of your map should be. Flickr and Our UK Festivals MapAll that remains to do now, is to take everything covered in this tutorial and apply it to the UK Festival Map that we’ve been building over the first and second tutorials in this series. This is the kind of thing we are aiming for. If you click on the 'Smaller events' button you'll see the images being drawn from Flickr. For completeness I’ve also added images, which are not coming from Flickr, to the 'main festival' icons. Also, so you can see the different options in terms of pop-up boxes, I've used both the 'info boxes' (for the 'main festivals') and the default 'info windows' for the photos from Flickr. This map was created by making a few tweaks to the code from the previous tutorial, and adding the code from the Google Maps and Flickr mashup (above). We first create a variable ( As usual, to spare you large snippets within the tutorial, the comments within the downloadable source code give a detailed explanation. What Next?The next tutorial will look at optimization, responsive design, debugging and testing. Image Credits
The credits for the photos on the map markers themselves can be found at the end of the first tutorial. |
You are subscribed to email updates from Webdesigntuts+ To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
No comments:
Post a Comment