Introducing: Local Birds

Everybody else is doing it, so why not me? …What the hell are you talking about? HTML 5 of course!

HTML5 is everywhere right now so I thought I’d have look at some of the new features as well. Therefore I’ve been playing around with the Geolocation API and the Twitter API. And the result can be found here:

https://peterbodskov.dk/sandbox/localbirds

So what is it?

Local Birds will find tweets in a radius around your current location as defined by the browser and show these in a list that is updated every 10 seconds, hardly groundbreaking stuff, but fun to make.

Show us the code!

Gladly. I’ve uploaded the source to github, so you can find it here: http://github.com/pbodsk/Local-Birds

The project (a rather big word for three files innit!) consists of:

– index.html
– geolocation.js
– style.css

and a few images I’ve created meself (top quality stuff eh!)

Interesting parts

As you might have guessed, most of the magic happens in the geolocation.js file.

Before we start using the Geolocation API, let’s see if it is defined (Firefox, Safari and Chrome only at the moment I’m afraid):

if(navigator.geolocation){
   setupCoordinatesStringAndCallTwitter();
    ...

And if so, we’re in business

setupCoordinatesStringAndCallTwitter = function(){
	navigator.geolocation.getCurrentPosition(function(position){
		setCoordinatesString(position);
	        ...
        });
}

And finally, here’s setCoordinatesString, which takes the position object as given to us by the call to getCurrentPosition:

setCoordinatesString = function(position){
	coordinatesString += position.coords.latitude
        + '%2c' + position.coords.longitude + '%2c';
}

Now the coordinatesString can be used as input when calling the Twitter API, and that’s pretty much all there is to it.

Lessons learned

• It is not possible to style/treat the <section> tag as a block element in Firefox. This is probably due to me misunderstanding the usage of the <section> tag, apparently it has to be wrapped in an <article> tag, which I didn’t do.
• jQuery is fookin’ amazing! (sorry! Just wanted to repeat that)
• The new CSS3 features like gradients and round corners makes things so much easier

I’ll probably continue dabbling with the CSS and design over the next period of time as this is something I’d like to get better at.

Well, that’s about it, go check out the local birds.