How to map the photos of your city like OldNYC does

Some months ago I was looking for a way to render on a map the historical photos of Ravenna collected in this Facebook Page. I stumbled upon the OldNYC project and thought it was perfect for my needs! Therefore I forked the project on Github, worked on it and this is the result : www.oldra.it.

In this tutorial which is intended for programmers, I’ll try to explain which are the main steps for reusing the code of OldNYC (written by @danvdk) , and setup the photo map of your city.

At this moment my system has a backend hosted in a Ubuntu virtual machine on my PC and a frontend (a static site) hosted in the cloud. In order to collect the newer posts of the Facebook Page the backend harvests from Facebook and re-generates once a week all of the static pages of the static site and sends them to the cloud to be served by www.oldra.it.

The system

The developement environment and the backend run on a Ubuntu Server 16.04 virtual machine.

1. First of all I forked the 2 Github repos https://github.com/danvk/oldnyc for the backend and https://github.com/oldnyc/oldnyc.github.io for the static site, then I cloned them on my server with the git clone command (git clone git://github.com/danvk/oldnyc.git git clone git://github.com/danvk/oldnyc.github.io.git). After that my home directory looks like that :

2. I installed python2.7 (do not install python 3) :  apt-get install python2.7

3. I installed virtualenv : apt-get install virtualenv

4. Then I followed the instructions written by @danvdk to setup the environment :
cd oldnyc
virtualenv env
source env/bin/activate
pip install -r requirements.txt

     I did not use Google App Engine therefore did not run ./develop.py

     I installed the numpy package : pip install numpy

5. Created some directories necessary for the backend to work :

   mkdir oldnyc/gecocache

   mkdir oldnyc/images

   mkdir oldnyc/thumbnails

6. Fot testing purposes Installed an Apache web server : apt-get install apache2

   Configured it to listen on localhost and serve the content of the directory oldnyc.github.io ,
which is the static site that will be hosted in the cloud.

Read More

OldRA, una mappa di foto storiche della città

Nel 2015 mi sono imbattuto nella pagina Facebook C'era una volta Ravenna che raccoglie foto storiche della città da inizio secolo ai giorni nostri. Mi è subito sembrato che fosse un modo molto bello per portare ad un pubblico ampio un po' di conoscenza sulla propria città, tanto che ho subito voluto dare un contributo inviando al curatore della pagina alcune foto di famiglia fatte a Marina di Ravenna nel 1977.

La schermata del sito www.oldra.it

Ho navigato in lungo e in largo nelle foto d'epoca pubblicate e ho pensato che sarebbe stato utile avere un modo alternativo per sfogliare questo bell'album di foto che parlano della città, in particolare con una mappa.
Ho quindi cercato progetti che avessero potuto aiutarmi nello scopo e mi sono imbattuto nel progetto OldNYC. Si tratta del progetto di @danvdk, che ha voluto mappare le foto storiche di New York conservate nella Biblioteca Pubblica di New York City.
Il software di Dan oltre a fare il geocoding delle foto estrae pure la descrizione , tramite OCR, dalle foto stesse; prevedendo quindi anche il feedback degli utenti per aiutare a correggere imprecisioni nella raccolta dati. Recentemente è stata rilasciata anche l'applicazione per IOS per navigare la mappa da dispositivi mobili e che propone in modalità push le foto in base al luogo di NY in cui ci si trova, fornendo quindi, per esempio, una nuova esperienza ai turisti.
Mi è sembrato che il software di Dan, condiviso su GitHub, fosse perfetto quindi l'ho adattato ai miei scopi ed ecco il risultato : www.oldra.it.  In particolare il mio sistema fa 3 cose principali :
- Interroga la pagina Facebook C'era una volta Ravenna e ne legge i post attraverso le API di Facebbok.
- Assegna un rating di popolarità alle foto in base al conteggio di condivisioni (sul sito sono nel riquadro Popular Photos)
- Effettua il geocoding attraverso le API di Google (già utilizzate in OldNYC) estraendo l'indirizzo dalla descrizione della foto. In questo è stato molto utile che il Comune di Ravenna abbia pubblicato il dataset in open data dello stradario della città.
- Crea la mappa piazzando le foto in base ai risultati del geocoding. Le foto sono dei link alla pagina C'era una volta Ravenna.

Read More