Hipocraphies or Hipster Geographies

Posted on Dec 8, 2013 in Web
Hipocraphies or Hipster Geographies

Project Premise:

Play on the Exhibitionist Impulses of Hipsters and make some Voyeuristic Geographies using their own Photos

Project Programming:

Php is going to play nice and tap:

  1. flickr api to do geographically bounded photo-searches and layer that with another retrieval of their geocoded information,
  2. open/establish a mySQL database to store those search terms, their key info for both a) <div>-based graphs in html/css and,
  3. b) write json formated inquiries to the server based on the original flicker info  (quicker recall and reload reading),
  4. use some very simple javascript customizations of mapbox/leaflet to then show geographic points and polaroid-esque popups,
  5. use _$Post in php to create dynamic forms and graphics based on user requests.

If you’re really curious here is the base code for download.

It’s not perfect. Hiccups include a awol array_merge between page 1 and 2 of api responses, some fighting between css style definitions, and a couple of different places where clearly I should clean it up by condensing things into functions.

So, go test it: http://www.specious-space.org/WEB/Hipocraphies.php

This the basic layout (yeh, a little long and slow from an UI/attention span perspective), but it works, see?!

hipocraphies-top

 

hipocraphies-mid-3

some live screen grabs a la quicktime (run at full-screen):

 

hipocraphies-bottom1

and so on . . .

Process and Testing

Although this project slipped from one consumptive geography to another (‘food’ to ‘cultural’ and ‘lifestyle’ consumption), it’s been great as a demonstration of:

  • how much can be done with the fairly simple mySQl and api access techniques we’ve gleaned in class,
  • how far a touch of css goes,
  • how, well, enjoyable coding is a) after a week of solid soldering and b) when you actually have blocks of time suited perfectly to adhd/cereal-for-everymeal/classic ocd coding attention,
  • how, nice and easy it is to start working with code/basic languages that play well with others (don’t get me wrong processing, I love you, but I need to talk in languages that others can understand).

Ultimately, I think this was really the first week where I’ve been able to set aside the require time to play. After all, after a bit of reading up on the flickr api (which rocks, they are great with those demonstration queries) and an evening trying to stuff everything I’d gleaned into a database, I could’ve screamed in frustration. Because, at that point, both flickr and mySQL were getting super, super cranky with my huge amount of info passing… (still food at this point):

hotdog-test-database!

And Saki (my poor beleaguered pcomp partner ) was understanding enough to let me ‘work through’ things while troubleshooting our mutual tangle of wires and arduino c++ communication issues. So, by Thursday, in advance of TNO, I’d been able to figure out direct json writing (I’d like to thank the academy and stackoverflow for that) in addition to just doing direct looping/json_encode to pass along as geoJson formatted files for mapbox. Just storing minimum search information through database mapper and mySQL kept my database from being totally f-ed. Plus this let me more or less add features incrementally without interfering with decent graphic output. (In fact, if I’d set the  #map division to an absolute position, I could ‘hide’ php errors behind it… great for presentation, merde for debugging.) Hence by TNO, I was getting:

beer-test-popup

Adrian, who was working on things ‘in the closet’ from the V&A api in London, suggested I play up the spectacle of it all. And, drumroll, the rest is history. It took a bit of time ‘command+f-ing’ my way through the leaflet.js documentation and mapbox examples (not as well documented as twitter, btw, but way clear than socrates). But, with trial and error, I figured out the tooltip polaroids effect and dynamic looping of mySQL results/$_Post options Friday. Leaving a bit of time for documentation and css stylin’.

As the page says (on mySQL database connection) “This is (on successful table save) Happening. . .”

Granted it’s fluff, but it’s half a step away from more complex crunching of the found data. A nice proof of concept exercise.  So go search out grrls with fringe, nyc urbanites with axes, and see what you get!