Prajakta Godbole

My original idea for this web application was -

1) on signin, pull all connections
2) for each connection, get twitter id if available and the current location
3) show all the connections on map using locations
4) show last twitter update on hover on the map

Linkedin does not allow us to get twitter ids of our connections. So, I skipped part 2 and 4 in my development.

Here is the link to my application. Here are 2 main  screenshots of my application -

I will document few important steps here -

Get API keys

Get Linkedin API key. Google Maps (use v3, since v2 is deprecated) does not need API key.

Note: I tried Yahoo maps first, but it wasn’t very accurate in plotting locations. I have blogged about it previously.

On login

When the user clicks on the login button, few things happen -

1. Hide the “Login to see” text. The Linkedin button goes away automatically.
2. Open the map in the div. Set the options to center it. Also, set the property minZoom: 2, to avoid the map to become very small (thus avoiding displaying the background image).
3. Call API to obtain self profile information (like first name and last name – to go with the Welcome message) and to obtain all the connections of the logged in user.

Logic and code

1. Get all connections.
2. Find all unique locations from the connections data and put them in array. I used Jquery’s inArray plugin (found online)  to add unique location names to the array.
3. For every location name, send a request to Google Maps api to mark that location. This request is done using $.getJSON, but there is a cross-domain restriction. So,we cannot send the request directly. That’s why, I pass the location name to my proxy php file. In the php code, I use curl to send the http request and I get the markers array from Google maps.
4. Parse the json data ie. markers array and fetch the latitude and longitude for each.
5. Mark the positions on the map and set up event listeners on each marker for the click event.
6. On click, get all the connections belonging to that location and display them in html.

Graphics

I created the logo and the background image to reflect what the application does. In the logo, I have created Linkedin-logo look-alike “IN” and then I have “World” with a little twirl on the “O” representing the equator of the world.

The background image depicts that you will get to see your 1st point contacts from linkedIn.