POC Photo App Using YUI 3 & Geolocation APIs

Ajaxian » Front Page • by Rey Bango

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} »));’;
  5. new Y.yql(Y.substitute(query, { ip: ip }), function(r){
  6. callback(r.query && r.query.results ? r.query.results.place : null);
  7. });
  8. };
  9. locFromPos = function (pos, callback) {
  10. var pos = { lat: pos.coords.latitude, lon: pos.coords.longitude },
  11. query = ‘select * from geo.places where woeid in ‘ +
  12. ‘(select place.woeid from flickr.places where lat={lat} and lon={lon});’;
  13. new Y.yql(Y.substitute(query, pos), function(r){
  14. callback(r.query && r.query.results ? r.query.results.place : null);
  15. });
  16. };
  17. if (navigator.geolocation) {
  18. navigator.geolocation.getCurrentPosition(
  19. Y.rbind(locFromPos, this, callback),
  20. Y.bind(getIP, this, Y.rbind(locFromIP, this, callback))
  21. );
  22. } else {
  23. getIP(Y.rbind(locFromIP, this, callback));
  24. }

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.

Cet article a été publié dans Uncategorized. Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )


Connexion à %s