finding-the-closest-bar-in-seattle-using-ie9-geolocation.md

title	authors	intro	types	categories	published	updated	status
Finding the closest Bar in Seattle using IE9 GeoLocation	thebeebs	A little look into Geolocation	shorts	geolocation ie9	2011/02/11 12:00:00	2011/02/11 13:00:00	archived

I just wrote a little sample application in jQuery using the new GeoLocation feature in IE9 RC.

It takes your current location and then sorts a list of bars with the closet one appearing on top. I wrote it after asking Andy Robb for a list of his favourite Bars in Seattle in preparation for my trip next week.

**You can see the **Demo Here

You can see how it works in the video below. I've also put the code below for the people that don't like videos.

<iframe title="YouTube video player" height="390" src="images/vwr2-v9v2UA?rel=0" frameborder="0" width="640" allowfullscreen="allowfullscreen"></iframe>

 

Firstly I took all the bar locations and used Bing to Geo Locate them. I then added them to the following template:

To get the longitude and Latitude for each location I used Bing Maps. I found the place I was looking for and then used the console in IE9 developer tools (Press F12) to execute the following JavaScript Snippet:
 

I ended up with a list of all the bar in a 
 like this.:


 
At the top I added a link with an onClick event of findme()
I added a reference to the jQuery Library


 
The function onFound captures the** coords.latitude** and coords.longitude and saves them into variables. We then use the jQuery library to loop through each 
 for each element I calculate the distance between the browsers current location and the bars location. I then save this distance Information into a data attribute called distance that's attached to the <LI> element.


The getDistance function is really basic way to determine the distance between two locations:

 
Finally we call the reOrder() function.
ReOrder Loops through each 
 and sorts them putting the closest bar to the top of the list:


That's it. We now have a simple list that sorts based upon your current browsers location.