Finding the closest Bar in Seattle using IE9 GeoLocation

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

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.

2 Comments So Far, what do you think?

Serge February 14th

Had played with geilocation after watching that,

IE9 RC has thrown center on london for me, I live 8 miles(12.8mk) away from it.
While Firefox and Opera has thrown pretty much my exact location.

Did you try putting your coordinates retrieved by IE9 RC back into Bing maps?

Thanks for the article by the way!
Matt February 25th

Serge, you can also get an accuracy value.

In this example you’d have:

var accuracy = pos.coords.accuracy;

Not sure if it’s miles/meters/whatever but it’ll help you build in a fall back if the browser chooses to return a location based on IP

2 Comments So Far, what do you think?

Leave a Reply Cancel reply