Flex Tutorial: Fire Eagle and Google Maps

• See Working Component (Requires Yahoo Account)
  
• Download MXML Source + FireEagle PHP Scripts (16 KB)

Download Note: The reason I don't let you download the component is because my API key will be compiled within the component and will only work within my domain! So you will need to download the source and enter the keys in the following files:

1. index.php - FireEagle Consumer Key and Secret

2. callback.php - FireEagle Consumer Key and Secret

3. getloc.php - FireEagle Consumer Key and Secret

4. FireEagle_GoogleMaps.mxml - Google Maps API Key

All the keys mentioned above can be obtained by logging into FireEagle and / or Google Maps API website. If you don't alredy have those keys, links to obtain them are provided below.

---

This tutorial will show you how to develop web applications using Yahoo's Fire Eagle platform. Fire Eagle is basically a platform that allows users to securely update and share their locations with registered applications. Learn more about Fire Eagle here.

So, we're going to prepare a basic application where users tell us where they are located using Fire Eagle and we display that location on a Google Map embedded in our application.

Before we begin, you will need to register your application at the Fire Eagle Developer Center and apply for the Google Maps API Key. Both Yahoo and Google will give you a key that will allow you to use their services (Fire Eagle / Google Maps) on your domain.

Apply for the Fire Eagle Key here.

Apply for the Google Maps API Key here.

Note: you will need to create Yahoo and Google accounts if you don't already have one.

Also, Fire Eagle will ask you to provide a callback url. More on that below. For now, you can use http://www.yourdomainname.com/callback.php.

All done?... Ok, this is how it will work. We have a landing page that will simply display the link "Click here to authenticate with FireEagle!". The user clicks on the link and gets redirected to Fire Eagle. After logging in, the user is asked whether or not to submit their location information to our application. Upon accepting to submit their location to us, the user is directed back to our website where we display their location on the Google Map embedded within our application.

This is, by far, a minimalistic application with really no practical use. It is just to show you how to interact with Fire Eagle and Google Maps using Flex. Squeeze out those creative juices and you will find plenty of applications.

Now, in order to use Google Maps with Flex, you will need to download the Google Maps Flash component. Get it here.

Add the Google Maps Component to your project following the steps in the Screenshot.

Some information:

1. index.php is the landing page. This is where users are shown the link to authenticate their Fire Eagle account. When the link is clicked on, the user will be directed to Fire Eagle and a token will be passed to Fire Eagle that will help identify the current session.
   
2. callback.php is the Callback URL. Fire Eagle needs to know the location of this file in the Developer Center. All users wanting to share their locations with your application will be directed to this url. It gets the location information and the token identifying the user session.
3. getloc.php is the page that basically parses information out of the returned location object. Location objects are stored and retreived between php files using session variables.
4. getlatlng.php is a file that simply returns the latitude and longitude variables from session variables. It is called by the flex application when it needs the location returned by Fire Eagle to be displayed on Google Map.

As with all my tutorials, I will allow you to download the source files and the compiled components along with their corresponding files, then explain in detail when you ask questions in the comments sections.

So go ahead, download the files using the links at the top and start getting creative with Fire Eagle, Google Maps, and of course Flex!