UX Design and Development course

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. Geolocation is closely related to the use of positioning systems but can be distinguished from it by a greater emphasis on determining a meaningful location (e.g. a street address) rather than just a set of geographic coordinates.

Keep reading ...

You are here (and is everybody else)

Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky.

The Geolocation API

The geolocation API lets you share your location with trusted web sites. The latitude and longitude are available to JavaScript on the page, which in turn can send it back to the remote web server and do fancy location-aware things like finding local businesses or showing your location on a map.

As you can see from the following table, the geolocation API is supported by most browsers on the desktop and mobile devices. Additionally, some older browsers and devices can be supported by wrapper libraries, as we’ll see later in this chapter.

Keep reading ...

Geolocation demo

Creating a simple geolocation app using Google Maps API is pretty simple to set up.

For this example, it may be useful to fake your location. To start out, we just need some markup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset='utf-8'>
    <title>HTML5 Geo Location</title>
  </head>
  <body>
    <main>
      <header>
        <h1>Geolocation</h1>
      </header>
      <article class="map">
        <p>Searching the Internet to find you: <span id="geostatus">checking...</span></p>
      </article>
    </main>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="geo.js"></script>
  </body>
</html>

There are two things to notice. To get this working we need to add in the Google Maps API scrips:

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

Then we are also adding a custom script that will add the map to the view.

<script type="text/javascript" src="geo.js"></script>

Another thing to pay attention to is the line with the <apan>, we are using this to convey messages to the user:

<span id="status">checking...</span>

Add in some JavaScript

Now for the fun part! By putting the following code into the geo.js file, you should get a working map!

// Primary function for the Geo location app
function success(position) {
  // create a simple variable for the ID
  var s = document.querySelector('#geostatus');

  if (s.className == 'success') {
    return;
  }

  // Replaces text with new message
  s.innerHTML = "Found you!";
  // Adds new class to the ID status block
  s.className = 'success';


  // creates the block element at sets the width and height
  var mapcanvas = document.createElement('div');
  // Adds ID to the new div
  mapcanvas.id = 'mapcanvas';
  // sets width and height
  mapcanvas.style.height = '600px';
  mapcanvas.style.width = '1000px';


  // Adds the new block element as the last thing within the article block
  document.querySelector('.map').appendChild(mapcanvas);

  // creates a new variable 'latlng' off of the google maps object
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  // create new variable that contains options in key:value pairs
  var myOptions = {
    zoom: 15,
    center: latlng,
    // ROADMAP is set by default, other options are HYBRID, SATELLITE and TERRAIN
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // creates the new 'map' variable using the google object
  // then using the 'mapcanvas' ID appending the options
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

  // creates new 'marker' variable
  var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
  });
}

// Function that displays the error message
function error(msg) {

  // sets simple variable to the status ID
  var s = document.querySelector('#geostatus');
  // designates typ eof message and passes in value
  s.innerHTML = typeof msg == 'string' ? msg : "Sorry, but I can't locate you?";
  s.className = 'fail';
}


// statement that tests for device functionality
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}