js mode updated geolocation example

javascript/examples/HTML5/GeoLocation/hiToYouToo/geoloc.js

@@ -1,4 +1,8 @@
 
+// lazy load the google geocoding api
+document.write( "<script src=\"http://maps.google.com/maps/api/js?sensor=false\" "+
+                "type=\"text/javascript\"></script>");
+
 window.onload = function () {
     tryFindSketch();
 }
@@ -11,7 +15,8 @@ function tryFindSketch () {
     if ( navigator.geolocation ) {
         navigator.geolocation.getCurrentPosition( function(position) {
             /*success*/
-            sketch.setGeoLocation(position);
+            sketch.setGeoLocation(position.coords.latitude, position.coords.longitude);
+            tryReverseGeocoding( sketch, position.coords );
         }, function( position_error ) {
             /*error*/
             sketch.geoLocationError(position_error.message);
@@ -20,3 +25,27 @@ function tryFindSketch () {
         sketch.geoLocationError( "Your browser does not support location services." );
     }
 }
+
+function tryReverseGeocoding ( sketch, latlng ) {
+    var geocoder = new google.maps.Geocoder();
+    geocoder.geocode({ 
+        'latLng': new google.maps.LatLng(latlng.latitude,latlng.longitude) 
+    },
+    function (data, status) {
+        if (status == google.maps.GeocoderStatus.OK) {
+            if ( data.length > 0 ) {
+                for ( var d in data ) {
+                    for ( var t in data[d].types ) {
+                        if ( data[d].types[t] == 'political' ) {
+                            sketch.setAddressString( data[d].formatted_address );
+                            return; // done
+                        }
+                    }
+                }
+                sketch.setAddressString( data[0].formatted_address ); // fallback
+            }
+        } else {
+            // ignore ..
+        }
+    });
+}

javascript/examples/HTML5/GeoLocation/hiToYouToo/hiToYouToo.pde

@@ -1,35 +1,44 @@
+/* @pjs preload="map.png"; */
+
 /**
- *    This example shows you how to find and use the browsers geo
+ *    This example shows you how to use the browsers geo
  *    location services.<br />
  *    <br />
- *    A message should pop up asking for permission to access your 
- *    location data.
+ *    Normally the browser should ask you to permit access to
+ *    your location data (if you haven't already earlier).
+ */
+ 
+/**
+ *    Note that the map alignment is not very accurate. If you find
+ *    yourself positioned off the map don't worry, you probably are safe.
  */
  
-GeoLocation loc = null;
 float pos_x, pos_y;
 
-boolean glNotAvail = false;
-String errorMessage = "";
+boolean locationFound = false;
+boolean locationServiceNotAvailable = false;
+String errorMessage = "", addressString = "";
+PImage worldMap;
 
 void setup ()
 {
-    size(300, 200);
+    size(454, 200);
     textFont(createFont("Arial", 12));
+    worldMap = loadImage("map.png");
 }
 
 void draw ()
 {
-    background(255);
+    background(worldMap);
     
-    if ( glNotAvail ) // failed
+    if ( locationServiceNotAvailable ) // failed
     {
         textAlign(CENTER);
         fill( 255, 0, 0 );
         text( "Something went wrong:\n" + errorMessage, 
               width/4, height/4, width/2, height/2 );
     }
-    else if ( loc == null ) // waiting for location to come in ..
+    else if ( !locationFound ) // waiting for location to come in ..
     {
         float w = 5 + (sin(frameCount/60.0) + 1) * (height / 3);
         ellipse( width/2, height/2, w, w );
@@ -41,39 +50,31 @@ void draw ()
         ellipse(pos_x, pos_y, 7, 7);
         boolean onRightHalf = pos_x > width/2;
         textAlign( onRightHalf ? RIGHT : LEFT );
-        text( "HI! You are here!", 
+        text( "HI! You are (about) here ..\n"+addressString, 
               pos_x + (onRightHalf ? -10 : 10), 
               pos_y + 3 );
     }
 }
 
-/* these two functions are called from plain javascript, see .js tab */
+/* the following functions are called from plain javascript, see .js tab */
 
-void setGeoLocation ( GeoLocation position )
+void setGeoLocation ( float latitude, float longitude )
 {
-    loc = position;
-    
     // this is a really simplistic (course) "projection",
     // see: http://en.wikipedia.org/wiki/Map_projection
-    pos_x = (180.0 + loc.coords.longitude) * (width  / 360.0);
-    pos_y = ( 90.0 - loc.coords.latitude ) * (height / 180.0);
+    pos_x = (180.0 + longitude) * (width  / 360.0);
+    pos_y = ( 90.0 - latitude ) * (height / 180.0);
+    
+    locationFound = true;
 }
 
 void geoLocationError ( String message )
 {
-    glNotAvail = true; // bummer!
+    locationServiceNotAvailable = true; // bummer!
     errorMessage = message;
 }
 
-/* these classes define how to access the data coming in from the browser */
-
-class Coordinates
+void setAddressString ( String address )
 {
-    float latitude;
-    float longitude;
-}
-
-class GeoLocation
-{
-    Coordinates coords;
+    addressString = "(" + address + ")";
 }