The Geolocation API allows you to retrieve the latitude and logitude of the devide hosting the request. The API needs third party sources in order to retrive that information such as the Global Positioning System (GPS) and network signals such as an IP Address, RFID, WiFi or others.

What is Geolocation

Geolocation is the identification of the real-world geographic location of an object, such as a radar, mobile phone or an Internet-connected computer terminal. Geolocation may refer to the practice of assessing the location, or to the actual assessed location.
via Wikipedia

All up to date browsers (IE9, Chrome, Firefox, Safari, and others) have the GeoLocation functionality implemented, if for some reason your browser doesn’t seem to retrieve your GeoLocation, please update your browser.

Note: You’ll need a running web server in order for this to work correctly. You may try XAMPP (multi-platform), WAMP (Windows) or MAMP (Macintosh).

CHECK BROWSER FOR COMPATIBILITY

Checking if your browser supports the Geolocation API is pretty simple.

function checkCompatibility() {
    if(navigator.geolocation) {
      alert("Your browser supports Geolocation");
    } else {
      alert("Your browser doesn't support Geolocation");
    }
}

Just insert this code on your HTML and your browser should request your authorization to share your location.

GET USER CURRENT LOCATION

OK, now that your browser accepted the GEOLOCATION API request you want to retrieve it’s information. The Geolocation API provides you with 2 attributes: Latitude and Longitude.

The way to retrieve that information is using a method called getCurrentPosition. The navigator.geolocation has 3 methods available, the getCurrentPosition, watchPosition and clearWatch. For this tutorial i’ll only be using getCurrentPosition method. The watchPosition method is useful when you are building Geolocation applications for mobile devices as it allows you to watch the position of that device.

The getCurrentPosition() method callsback 2 functions, success and error handling functions. So using the code I wrote before you need to add a navigator.geolocation.getCurrentPosition() method to it:

function checkCompatibility() {
if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition,showError);
} else {
      alert("Your browser doesn't support Geolocation");
}
}

So what’s going to happen is that if your browser supports the Geolocation API will call the showPosition() function, if this fails, it will call the showError function.

Retrieving Latitude and Longitude data

As mentioned before you’ll need to write the showPosition() function. This function will receive the position passed to it by the getCurrentPosition() method.

function showPosition(position) {
alert("Latitude: " + position.coords.latitude + " Longitude:" + position.coords.longitude);
}

Now you can see both latitude and longitude coordinates on your browser. Let’s take care of the showError() function.

ERROR HANDLING

There are 4 possible errors that may happend when you call the getCurrentLocation() method:

• TIMEOUT
• POSITION UNAVAILABLE
• PERMITION DENIED
• UNKNOWN ERROR

I won’t bother too much with error handling on this tutorial, but when writing an App you should properly handle errors. Here is a simple walkthrough:

function showError(error) {
			switch(error.code)
			{
				case error.TIMEOUT:
					alert('Timeout');
					break;
				case error.POSITION_UNAVAILABLE:
					alert('Position unavailable');
					break;
				case error.PERMISSION_DENIED:
					alert('Permission denied');
					break;
				case error.UNKNOWN_ERROR:
					alert('Unknown error');
					break;
			}
	}

At this point you have reached a point where there’s not much more to add for retrieving the Geolocation coordinates of a device. However since Google has a free Google Maps API I wanted to take a look into it.

BROWSER GEOLOCATION AND GOOGLE MAPS

The Google Maps javascript API is a very powerful API. For this section of the tutorial i’ll be using the Geolocation latitude and longitude coordinates to pin Google Maps and retrieve the human location address with a technique known as reverse geocoding. Please take note that the results may not be 100% accurate.

You need to add the following to your HTML head section:

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Now that you connected to the Google Maps API let’s create a function. The Google Maps Javascript API has useful documentation about the Geolocation service. On that page if you search the Geocoding Responses, under status codes, you’ll find a very useful piece of code that allows you to copy/paste it and test it.

So here’s our code so far:

<script type="text/javascript">
function checkCompatibility() {
if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition,showError);
} else {
      alert("Your browser doesn't support Geolocation");
}
}

function showPosition(position) {
alert("Latitude: " + position.coords.latitude + " Longitude:" + position.coords.longitude);
}

function showError(error) {
			switch(error.code)
			{
				case error.TIMEOUT:
					alert('Timeout');
					break;
				case error.POSITION_UNAVAILABLE:
					alert('Position unavailable');
					break;
				case error.PERMISSION_DENIED:
					alert('Permission denied');
					break;
				case error.UNKNOWN_ERROR:
					alert('Unknown error');
					break;
			}
	}

</script>

Now we’ll need to add a function to retrieve the map from Google Maps with the current location:

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;

function getMap(latitude,longitude) {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(latitude,longitude);
    var myOptions = {
      zoom: 18,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
reverseGeocoding(latitude,longitude);
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

Notice that the getMap() function receives 2 variables: Latitude and Longitude. You need to edit your showPosition() functionin order to pass the latitude and longitude coords to the getMap() function, here’s what the function will look like:

function showPosition(position) {
getMap(position.coords.latitude,position.coords.longitude);
}

The getMap function will retrieve the coordinates and show the position on Google Maps. The Google Map created by the getMap() function will be shown inside a div element with the ID of map_canvas. Let’s create the HTML Stucture.

HTML5 GEOLOCATION DEMO / EXAMPLE

Get geolocation

Remember to set a width and a height to your map_canvas div, otherwise you won’t be able to see the map. Turn on your web server and test your code. After you click the link Google Maps should show up just like in the demo bellow.

DEMO 1

REVERSE GEOCODING

Reverse geocoding is the process of back (reverse) coding of a point location (latitude, longitude) to a readable address or place name. This permits the identification of nearby street addresses, places, and/or areal subdivisions such as neighbourhoods, county, state, or country.
via wikipedia

If you are following the tutorial you’ll probably noticed that although Google Maps focused on your location it did not insert a PIN nor showed an infowindow with information like it does when you visit the official Google Maps page.
Let’s Pin the location and show information about the location inside a Google Maps Infowindow. For this we will create a function that will read the coordinates (latitude and longitude) and turn them to a readable address.

function reverseGeocoding(latitude,longitude) {
    var latlng = new google.maps.LatLng(latitude, longitude);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          map.setZoom(18);
          marker = new google.maps.Marker({
              position: latlng,
              map: map
          });
          infowindow.setContent(results[1].formatted_address);
          infowindow.open(map, marker);
        }
      } else {
        alert("Geocoder failed due to: " + status);
      }
    });
}

Let’s give this a test:

Final demo

I was thinking in incorporating a quick tutorial on watchPosition() in order to get the currentPosition if the device moved and also be able to track the distance between point A to Point B and incorporate it in Google Maps. I’ll probably do that latter on another tutorial. For now I recomend you read the article A Simple trip meter using the Geolocation API over HTML5Rocks.com

Usefull links

• http://en.wikipedia.org/wiki/Geolocation
• http://en.wikipedia.org/wiki/Reverse_geocoding
• http://dev.w3.org/geo/api/spec-source.html
• http://www.movable-type.co.uk/scripts/latlong.html

• Video & Audio edit: Mário Andrade
• Music: “Robotic Fantasy” – Drone
• Motion Graphics Design Master class, 2011-2012, EDIT. – Escola de Design Interativo e Tecnologia

Special thanks to:
- GAU – Galeria de Arte Urbana
- Camâra Municipal de Lisboa

My home office setup

In the picture you can see my 19″ Samsung SyncMaster B1930, a Toshiba Satellite L755 with 6Gb Ram and 360 Gb of disk space, my 500Gb Iomega external disk, a NGS wireless mouse and keyboard and my London User Research Center sketching notepad. And this covers for me as far as hardware goes.

Working at home can be tricky, there are an almost infinite amount of things that can distract you but the comfort and relaxing environment is something that I’m sure anyone can appreciate.

Music

It’s crucial for me to have an endless stream of beats going on. I don’t pay much attention to it but I need a beat to set pace for me. Usually I use Grooveshark, Stereo Mood or The Hype Machine.

Organization

Google Calendar is a great help to get me organized. I’ve tried Action Method and Podio for project management but it’s just too much for what I need. Other than Google Calendar I keep a sheet of paper next to me where I write down all the daily tasks.

Communication

Personally I like using IMs to communicate. It allows me to talk when I am available and not when someone decides that I should be available for them. The result is increased productivity and less procrastination.

In this video Jason Fried talks about how 37 signals started, and how it growth to their current business model, how 37 signals offices work. It’s interesting understanding how 37 signals works in a very silent way in order to prevent distractions and prioritize work.

Probably the best mentality in 37 signals is their “horizontal growth” philosophy where their workers grow themself doing what they are really good at instead of being promoted and taken away from what they are really good at.

All information was provided by onlineschools.org.