Thursday, April 8th, 2010

POC Photo App Using YUI 3 & Geolocation APIs

Category: Geo, YUI

Geolocation functionality is hot. Every app you see now wants to ID where you’re at and help you find cool things around you. The great thing is that building this functionality into your applications is getting easier and easier. For example, Eric Ferraiuolo wanted to create an app that showed off the features in YUI 3.1 and with a little help from the JSONIP Google App Engine app, YQL, the W3C Geolocation API, Flickr Photos Search API , & CSS3, he built a Photos Around You, an app which finds geo-tagged photos based on your estimated location.


The post does a great job of breaking down the YUI modules used for building out the app and showing plenty of code samples for leveraging the various APIs. Here’s the code that handles the IP-based lookup via YQL or the browser’s geolocation capabilities:


  1. locFromIP = function (ip, callback) {
  2.     var query = 'select * from geo.places where woeid in ' +
  3.                 '(select place.woeid from flickr.places where (lat, lon) in ' +
  4.                 '(select Latitude, Longitude from ip.location where ip="{ip}"));';
  6.     new Y.yql(Y.substitute(query, { ip: ip }), function(r){
  7.         callback(r.query && r.query.results ? : null);
  8.     });
  9. };
  11. locFromPos = function (pos, callback) {
  12.     var pos = { lat: pos.coords.latitude, lon: pos.coords.longitude },
  13.         query = 'select * from geo.places where woeid in ' +
  14.                 '(select place.woeid from flickr.places where lat={lat} and lon={lon});';
  16.     new Y.yql(Y.substitute(query, pos), function(r){
  17.         callback(r.query && r.query.results ? : null);
  18.     });
  19. };
  21. if (navigator.geolocation) {
  22.     navigator.geolocation.getCurrentPosition(
  23.         Y.rbind(locFromPos, this, callback),
  24.         Y.bind(getIP, this, Y.rbind(locFromIP, this, callback))
  25.     );
  26. } else {
  27.     getIP(Y.rbind(locFromIP, this, callback));
  28. }

What I really like about Eric’s code is his decision to leverage Christian Heilmann’s YQL Geo Library as a failover for those browsers that currently don’t support the W3C Geolocation API for IP-based location identification. I wasn’t quite able to get the YQL version to function for me. It did find my location but wouldn’t correctly display any geo-tagged pictures. Firefox’s geolocation implementation, which uses Google Location Services as its service provider, worked great though and that in itself is a big win. When Firefox first debuted the feature, the results seemed frequently off but it looks like the data is becoming more consistent.

Coming in at about ~180 lines of code, it’s a great tutorial app that demonstrates some nice power features of YUI 3.1 and the referenced APIs. Check it out.

Posted by Rey Bango at 9:00 am

4.8 rating from 11 votes


Comments feed TrackBack URI

Great post, Rey. I was thinking of discussing the W3C Geolocation API in my new book but the idea of having a solid failover in this demo (Christian’s fanastic YQL Library) sounds quite practical. Have you checked how well browsers other than FF perform with this in terms of accuracy?

Comment by legacye — April 8, 2010

Yep. I checked out Chrome & IE8 and using the YQL failover both found my location correctly. I was pretty excited about that! :)

I know geo solutions are really maturing so seeing something this simple work is awesome.

Comment by Rey Bango — April 8, 2010

Great find Rey! Thanks for sharing this. It’ll be fun to go through his code and dissect it all. Being ~180 lines will definitely go good with my short attention span. How do you test the failover?

Comment by ddelrio1986 — April 8, 2010

I love the fact that you can accomplish so much with so little code. This is what re-use and services is all about. I think it’s going to massively change the kinds of people developing apps though – there’s less and less need for bit-twiddling C-style programmers. I think that’s kind of sad.

Comment by Skilldrick — April 9, 2010

Leave a comment

You must be logged in to post a comment.