App Tutorial

A great part of our presence at MACRO Museum in Rome was focused on the creation of Come in Cielo Così in Terra, a software-enabled participatory performance through which people can collaborate in drawing constellations onto their cities using their bodies:

  1. you form groups,
  2. you choose a constellation,
  3. each member of the group heads off towards a star (or, more precisely, to the city-location where the star is placed)
  4. when each star is covered on the map by at least one member of the group: YOU WIN!
  5. You have actually just collaboratively drawn a constellation onto your city, showing up on the global map.

The application used to perform the workshop is designed completely using HTML, CSS, JavaScript and PHP on the back end: just unzip onto your server online, create a database, update the parameters found in the “db.php” file to reflect your DB configuration and you’re done! You have Come in Cielo Così in Terra on your server.

The application is designed for access through smartphones: just open up the URL using your iPhone or Android and you will be able to start right away.

A couple of things:

So: just download and install its, or use it FROM HERE and check for updates on Art is Open Source for new releases.

And, as a follow up to the workshop: here are is a basic tutorial on how to make an HTML application which can track users’ positions using only standard features of W3C compliant browsers.


What we want to achieve is an application which runs on a user’s web browser (for example Firefox, Chrome or Safari) and:

  1. asks the uses if he/she would like to have their geographic location taken
  2. if the user decides to do so, it grabs its geo position
  3. sends it to a database
  4. generates a map and shows the user’s position on it

Let’s start.

First step: localize the user

The geolocation API specified by the W3C consortium allows us to do just what we require.

First let’s create a standard, almost empty HTML page.

Then, in the HEAD section, let’s add these lines, to create some javaScript:

If you wrote everything correctly, you can upload this file (save it as an HTML file) to your webserver (if you don’t have a web server anywhere, you can download and install on your computer one of the Bitnami Stacks from here: choose WAMPStack for Windows, LAMPStack for Linux or MAMPStack for OSX).

You can now access your file using your browser (for example, if you installed a Bitnami Stack you can point your browser to http://localhost/the_name_of_your_file.html).

The browser should ask you if you want to be geo-located: if you answer “no” it will pop up an error message, if you answer “yes” it will pop up your geographical coordinates.

This should work consistently on both your computer web browsers and on the web browsers found on your smartphones.


Now we want to store our coordinates somewhere.

So we need to create a database and, inside it, a table to hold them.

Use the tools you have to manipulate your databases (for example, if you installed the Bitnami stack, you will have the PhpMyAdmin application which you can use through your browser) to create a table (let’s call it “coordinates“) with two FLOAT columns named lat and lon, to hold the coordinates.

Here is what my PhpMyAdmin schema looks like:

the table created for the coordinates

now, let’s create a PHP file (a regular text file, saved with extension “.php”), and let’s save it as “storeCoordinates.php“.

Inside it, let’s write this code:

Put this file on your webserver, as right next to the one we created before.

This file:

  1. checks that two parameters have been passed in the HTTP request (using the isset command, and the $_REQUEST variable, which contains all parameters which have been passed on by whoever invoked the script)
  2. if they are present: opens up a database connection (“DB_*” parameters, which you have to configure to reflect your DB’s configuration, and the mysql_connect command)
  3. prepares an INSERT query in SQL language, concatenating the values for latitude and longitude which we will see in a bit being passed on by our HTML page
  4. executes using the mysql_query command

THIRD STEP: store coordinates

 Now we will modify our HTML file to invoke the functionality we just implemented using PHP.

Download the jQuery library from HERE.

This is a JavaScript library which offers many useful functionalities. We will use some of these.

Save the javascript library file naming it “jquery.js” and upload it to your web server right next to the other files you just created.

Add the following line right after the <head> tag in the HTML file we created in the first step:

This tells the browser to load the jQuery library.

Then modify the updatePosition function we have created in the first step, so that it looks like this:

function updatePosition(currentPosition){
lat: currentPosition.coords.latitude,
lon: currentPosition.coords.longitude

What we are doing with the getJSON command is to call the storeCoordinates PHP file we created earlier on and pass to it the coordinates we just captured.


Just update the file you just modified on your web server (so, in the same folder used by the web server there should be the HTML file together with the jquery.js file and the storeCoordinates.php file.

If you navigate to the HTML file using your browser and you answer “yes” when it asks you to be geo-localized, you should see a row being automatically added to your DB, containing your coordinates.

(about accuracy: if you are using this through a web browser, accuracy could not be perfect, as localization will be performed using your network information; this, according to the setup of your provider, will yield results of different degrees of accuracy; the same can be said when using GPS enabled devices: according to where you are, the GPS could provide more or less accurate results)

Here’s my first coordinates automatically captured in this way:

my geo position, finally on the DB


To show these coordinates on a map, let’s prepare another PHP file to get them from the database and add them to a Google Map. To use Google Maps you have to register and obtain a KEY. Click here to know how to obtain your key (read under the “Obtaining API Key).

Create another PHP file, and call it “map.php“.

Inside it write the following code:

Phew! that’s quite a lot of code!

let’s browse through it to see the new things which we introduced here. Starting from the top, here are the interesting lines:

And that’s it!

If you upload this PHP file to your web server and open up these two web pages we created (this last file and the initial HTML file with the request for geo location) on two different tabs of your browser (even on your smartphone) and you refresh first one and then the other (maybe moving a block or two between each refresh, so that you will record  different coordinates) you will see the map populate with the markers describing your movements.