Search for Flickr photos and show them on Google Maps
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Flick Map

A simple Backbone.js web app that allows you to search for geotagged photos from Flickr and shows them on Google Maps.

Why Backbone and not React?

Well, some of the google map features that accept custom html allow you to pass them a string or javascript dom element, this doesn't play well with React. You could get React to render your components to a string but then you lose the nice features that React provides and that's no fun. I did find a few awesome google map React component libraries, react-google-maps and react-googlemaps to name a couple, but they currently don't support the features I required for this app.

So backbone... Who knew that you could assign a javascript dom element to the el property of a backbone view?! This plays really nicely with google maps as you can use all the features of google maps and still have the ability to re-render your view on changes to your data!


This setup process assumes you have Node.js (v0.10.* or higher) installed on your machine.


git clone
cd flick-map
npm install # it may look like the process has locked up on node v0.12, just wait, it'll come around

Runing the app

  • Generate an API key for Flickr and Google Maps.
  • Replace '<YOUR API KEY>' in src/app/config.js with your Flickr API key
  • Replace '<YOUR API KEY>' in src/index.html with your Google Maps API key
npm start

Running the tests

npm test


Testing related

  • Add support for jsdom or phantomjs to allow running tests via terminal
  • Find a better way to stub the Google Maps API
  • Add selenium tests
  • Add travis to run tests on commit/pr/merge

Tech debt

  • Move configuration into config file (api keys, base urls, etc.)

UXUI improvements

  • Allow users to customise various aspects of searching Flickr (e.g. search accuracy, search context)
  • Request image when user hovers over marker
  • Improve the UI by making the search box more obvious
  • Stop map from zooming out too far
  • Better mobile support (e.g. info windows don't look too nice when on mobile, certain google map controls could be disabled/moved, search input looks a bit odd)
  • Add support for more image services