Shortly after I first integrated my Flickr photos into jeffcroft.com (using Flickr’s awesome API), the photo sharing site added geocoding features, letting members tag photos with latitude and longitude information. Being someone who is obsessed with metadata, taxonomy, and the like, I quickly and meticulously geocoded my photos.
I wanted to incorporate that geo data in some interesting way here at jeffcroft.com, but the fact that I was (at the time) using dead-end code for this site (I planned to re-write it all) made me hold off until I’d finished the new version.
So, I spent about four hours today properly integrating my photo’s geo data into this site. In my locations section you’ll find a list of all cities (organized by country and state) from which I have posted photos and/or blog entries. In some cities (such as my home town of Lawrence), you’ll find a list of specific places — bars, clubs, parks, coffeehouses, schools, residences, whatever — where I’ve added content from (for an example, check out The News Center, my workplace).
Individual photo pages, of course, have maps and links back to the city they were taken in.
The city, state, and country level part of this is completely automated. When photos are imported from Flickr (my cron job checks for new photos every 10 minutes), the latitude and longitude data is pulled down.
Based on that data, I use Geocoder.us’ reverse geocoder to get city, state, country, and zip code information for each photo. Each city is then added to my database.
For individual places, a bit of manual intervention is involved. In my Django admin interface, I add places where I commonly post entries or take photos from by entering their name and physical address (photos and descriptions can be added as well, if I like). Optionally, I can enter a radius in miles from which photos will be pulled. If I don’t choose a radius, I default it to five miles. The radius was necessary to account for different types of places. For example, if the place was a large lake or national park, I may want a large radius of many miles. If the place is a bar or club, I may want a tiny radius, like one-tenth of a mile. If the place is a region, like Downtown Lawrence, I might want something in between, like half-a-mile.
What I love about this setup is that the basics work with no intervention from me, but I can go in and add more specific places and details if I wish.
You’re probably wondering why I’d take the time to do this. I mean, let’s face it — it’s completely self-absored and not particularly useful to anyone other than me. Well, I do this sort of thing on jeffcroft.com simply to learn how, to satisfy my own curiosity, and as a proof-of-concept that a particular thing can be done.
It might not be all that useful — but dammit, it’s fun. :)
Sorry, the time to post comments to this entry has expired.
001 // Scott McCracken // 01.14.2007 // 10:52 PM
It’s also a whole lot of fun to read about. Honestly, by continuing to raise the bar and sharing your ideas it opens up new horizons in the world of blogs (personal and, hopefully, otherwise). I hope 2007 sees a lot more API data blog integration like this, well done!
002 // Nathan Borror // 01.14.2007 // 11:46 PM
I really need to get my crap together. Nice work.
003 // Jeff Wheeler // 01.15.2007 // 2:16 AM
Haha, that’s beautiful. I love it… great job!
004 // David Airey // 01.15.2007 // 3:25 AM
It’s a nice feature.
I loved playing with Google Earth when it was released and this is a nice spin-off.
All the best Jeff.
005 // Ville Säävuori // 01.15.2007 // 6:56 AM
This is great, but maybe you should limit the number of images in the locations pages. For example the Lawrence page ( http://www2.jeffcroft.com/locations/lawrence-ks/ ) has over 500 flickr images =)
006 // Nate K // 01.15.2007 // 8:51 AM
A continued great use of the Flickr API on your site, that is very cool. I was just playing with the Flickr API the other day and love it. I don’t use Flickr that much, but if I did I would definitely be looking to utilize the API much more.
Now, Amazon, on the other hand, is an API I am really loving right now and will be integrating into the next release of my website.
As others have said, I hope to see a continued use of API’s for different services (in unique ways) over the next year.
007 // Jeff Croft // 01.15.2007 // 10:53 AM
@Ville: You’re right, some sort of pagination is probably in order. I’ll get to it. :)
008 // Tim Tyson // 01.15.2007 // 2:37 PM
I love this. You’re blowing my mind. I’ve avoided flikr as I have so many pictures, but I’m going to have join in the fun.
One question: where do you initially grab the geo info for the pictures you shoot? (Wish my camera had a GPS and tagged each photo as I shot it!)
009 // Devon // 01.18.2007 // 10:28 AM
I used to live on Tennessee St, just around the corner from Wheels Pizza. I miss that place.
010 // Dan Jallits // 01.21.2007 // 1:09 PM
Don’t let that fire burn out. It is people like you Jeff, who “do this sort of thing (…) simply to learn how, to satisfy (their) own curiosity” that generate what in my opinion is some of the coolest and innovative pieces of code.
011 // Tobias Schwarz // 01.22.2007 // 11:25 AM
Hi, did you create those columns by hand? If not, could you share a few thoughts/infos/links about how to get that done automatically?
Thanks!
012 // Jeff Croft // 01.22.2007 // 11:36 AM
@Tobias: It’s just one of the possible layouts I’ve created for my Django-based CMS. So, I didn’t really create them “by hand,” but there’s no real magic in it, either. I just used basic XHTML and CSS to do it in the template.
013 // Grant Blakeman // 01.24.2007 // 2:27 PM
…and to think, I’m not even on flickr yet… Very cool!
014 // Marcus // 01.28.2007 // 7:24 PM
Your site is amazing. Seriously! I don’t remember ever seeing a blog this nice before. Nice work with Django, Flickr, etc. Keep it up!
015 // Maleika // 02.01.2007 // 9:21 PM
I know absolutely nothing about the state. However, the concept is very fascinating. Now, if I could hammer just a bit of programming knowledge and logic into my brain, I’d get to experimenting. It sounds so easy but I doubt it is anything remotely simple.
016 // Jeff Croft // 02.01.2007 // 10:10 PM
I definitely won’t go so far as to call this stuff “simple,” but I will say this: the tools that have become available to us web designers and developers over the past couple of years have made it a helluva lot simpler than ever before. I never could have done anything of this in the state I was in a year ago. But, with the addition of Django, Python, and a little understanding of how REST APIs work to my bag of tricks, it’s actually not that hard.
We should all be thankful for the tools we’ve been handed in recent times, man. They make live sooo much easier.
017 // Maleika // 02.01.2007 // 10:26 PM
I am indeed very thankful. However, I’m going to be even more thankful once I understand at least one programming language. I have been thinking of getting into Ruby or Python for a bit now. I’m still not sure which to start with first, but all these discussions surrounding Python lately as well as some amazing demonstrations of Django (your site is a good example) does lead me to lean towards Python to start with.
With that said, I think what makes those applications look like a cryptic monstrous jungle of hyper intelligent beasts to me is that I’m more the visual type of designer, less so the hardcore logic junkie. I have a huge respect for these kind of things and maybe it’s time to get into it and stop fearing. Like you said, life has been made easier with these tools and perhaps even a good introduction to my barely existing left brain. :)
018 // David Comdico // 02.06.2007 // 8:32 AM
Re: the columns, you said:
“I didn’t really create them “by hand,” but there’s no real magic in it, either. I just used basic XHTML and CSS to do it in the template.”
I’m curious if the break in the text to create the second column is being done “by hand” or if something is processing the text and splitting it up into columns, and, if so, how?
Thanks!
019 // Jeff Croft // 02.06.2007 // 9:19 AM
I guess I didn’t understand what you mean by “by hand.” Yes, I am manually choosing where to break the column at. And frankly, I wouldn’t want it any other way.
020 // David Comdicio // 02.22.2007 // 9:18 AM
I’d rather have columns that behaved like columns in Quark, myself. I though you had some miraculous script that did a word count and from that extracted the column height.
Anyway, thanks for the response.
021 // Jeff Croft // 02.22.2007 // 9:46 AM
Actually, Django already has a filter built-in
truncate_words) that would only take a very minor change to make it work like that (instead of hard-coding the argument that you pass in, you would instead use half the total number of words).However, that’s bound to be problematic. Columns would get broken in the middle of paragraphs, some columns would be longer than others because they would have longer words, and so. And that’s all assuming you want the two columns to be equal length. Many times, equal-length column isn’t the desired visual effect (for example, I might want column two to be half-as-long as column one.
I think this is something that has to be done editorially. A program can simply never accommodate for all the variables at hand.
022 // Lawrence Sinclair // 03.26.2007 // 3:03 AM
I recommend, to people in general, robogeo for getting geocodes into your photo EXIF tags, and hence into flickr. I’ve been geocoding for the last year, since I went on a trip to Shanghai.
023 // Jack // 06.24.2007 // 6:50 PM
Fantastic. This is amazing. You have done a good job.