Finding the closest Bar in Seattle using IE9 GeoLocation


BeerI 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.

 

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

<ul> <li> <div class="name"> BARNAME HERE</div> <div class="long"> LONGITUDE GOES HERE</div> <div class="lat"> LATITUDE GOES HERE</div> </li> </ul>

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:

 

document.write(map.GetCenter());

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

<body> <div> <a href="#" onclick="findMe()">Find Closest Pub</a> <ul> <li> <div class="name"> Moe Bar</div> <div class="long"> 47.60357999999998</div> <div class="lat"> -122.329454</div> </li> <li> <div class="name"> Frontier Room</div> <div class="long"> 47.61469022047056</div> <div class="lat"> -122.34816509008769</div> </li> <li> <div class="name"> See Sound</div> <div class="long"> 47.6156159656448</div> <div class="lat"> -122.32593494177237</div> </li> <li> <div class="name"> War Room</div> <div class="long"> 47.61370665587537</div> <div class="lat"> -122.34928138554072</div> </li> <li> <div class="name"> Barca</div> <div class="long"> 47.622789935049205</div> <div class="lat"> -122.33597713232413</div> </li> <li> <div class="name"> Havana </div> <div class="long"> 47.61503737683162</div> <div class="lat"> -122.32130008459457</div> </li> <li> <div class="name"> Lava Lounge </div> <div class="long"> 47.61550024839427</div> <div class="lat"> -122.35074001074194</div> </li> <li> <div class="name"> Triple Door </div> <div class="long"> 47.61260723390516</div> <div class="lat"> -122.34181361914046</div> </li> <li> <div class="name"> Linda’s Tavern </div> <div class="long"> 47.615853233734946</div> <div class="lat"> -122.32331040740962</div> </li> <li> <div class="name"> Cowgirls </div> <div class="long"> 47.59846589794225</div> <div class="lat"> -122.33439445495607</div> </li> </ul> </div> </body>

 

At the top I added a link with an onClick event of findme()

I added a reference to the jQuery Library

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js"></script>
function findMe() { if (navigator.geolocation != undefined) { navigator.geolocation.watchPosition(onFound, onError); } }

 

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 <LI> 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.

function onFound(pos) { var userLat = pos.coords.latitude; var userLong = pos.coords.longitude; $('ul li').each(function (index) { var locationLat = $(this).find('.lat').html(); var locationLong = $(this).find('.long').html(); var distance = getDistance(userLat, locationLat, userLong, locationLong); $(this).data("distance", distance); }) reOrder(); }

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

function getDistance(lat1, lat2, lon1, lon2) { var R = 6371; // km var d = Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1)) * R; return d; };

 

Finally we call the reOrder() function.

ReOrder Loops through each <li> and sorts them putting the closest bar to the top of the list:

function reOrder() { $('ul li').sort(sortAlpha).appendTo('ul'); } function sortAlpha(a, b) { return $(a).data('distance') > $(b).data('distance') ? 1 : -1; };

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

Comments (2)

  1. albert says:

    i read this in Chrome, tried demo, didn't work. so i booted up ie9 and it didn't work either…..ie9 throughs an alert that says Oops, Something Wrong.

  2. david says:

    how do you alter the code to only list the pubs within a certain vicinity, such as 20km

Skip to main content