Google | Velu's Blog

Introduction

The pictures we take every day with our mobile or any camera that supports location tagging, contain information on location where the picture was taken. This can be extracted using wide variety of languages like php, javascript, java, etc but today we will be seeing a working model with php.

Prerequisites

The article assumes that the user knows PHP and basic Javascript as well. I will be using jQuery to perform asynchronous file uploads and in case if you don’t know, please read it all here on jQuery.

EXIF Metadata

DEMO: link provided at the end of this article.
EXIF (exchangeable image file) data is a record, showing settings used to take a photograph. This data is recorded into the actual image file. Therefore each photograph has its own unique data. EXIF data stores information like camera model, exposure, aperture, ISO, what camera mode was used and whether or not a flash fired and location information as well.

The image below is an example of what EXIF data looks like. This information differs depending on what EXIF reader is used to see the metadata. The following sample picture is taken with my iPhone 4S and hence you can see all that information here.

Reading EXIF Metadata from PHP

Reading EXIF metadata from PHP is quite easy and straightforward. However, in our case, we give the option for the user to upload the image or use the sample we have in our server. The HTML page bearing the google maps waits for the response from PHP on the exif metadata. Once the data is received, we try to plot the same on the map.

The following code tries to upload the file asynchronously to server to read the image file.

var formData = new FormData($('form')[0]);
$.ajax({
    url: 'upload.php',  //server script to process data
    type: 'POST',
    success: function(data, textStatus, jqXHR) {
        ...
    },
    error: function(jqXHR, textStatus, errorThrown) {
        ...
    },
    // Form data
    data: formData,
    //Options to tell JQuery not to process data or worry about content-type
    cache: false,
    contentType: false,
    processData: false
});

Now, on the server side, process the image and sends back the response in JSON format – which is quite easy to display data at different places.

$currFileLocation = $_FILES["file"]["tmp_name"];
$imagedata = file_get_contents($currFileLocation);
$base64image = base64_encode($imagedata);
$exif = exif_read_data($currFileLocation);
if(array_key_exists('GPSLongitude', $exif) && array_key_exists('GPSLatitude', $exif)) {
    $lng = getGps($exif["GPSLongitude"], $exif['GPSLongitudeRef']);
    $lat = getGps($exif["GPSLatitude"], $exif['GPSLatitudeRef']);
    $response = array(
        "status" => "success",
        "reason" => "",
        "gps" => array(
            "lat" => $lat,
            "lng" => $lng
        ),
        "img" => urlencode($base64image)
    );
}
else {
    $response = array(
        "status" => "fail",
        "reason" => "The uploaded picture does not have GPS information.",
        "exif" => $exif
    );
}

getGps is a utility method written by a developer and was posted at Stack Overflow. The code is below:

function getGps($exifCoord, $hemi) {
    $degrees = count($exifCoord) > 0 ? gps2Num($exifCoord[0]) : 0;
    $minutes = count($exifCoord) > 1 ? gps2Num($exifCoord[1]) : 0;
    $seconds = count($exifCoord) > 2 ? gps2Num($exifCoord[2]) : 0;
    $flip = ($hemi == 'W' or $hemi == 'S') ? -1 : 1;
    return $flip * ($degrees + $minutes / 60 + $seconds / 3600);
}
 
function gps2Num($coordPart) {
    $parts = explode('/', $coordPart);
    if (count($parts) <= 0)
        return 0;
    if (count($parts) == 1)
        return $parts[0];
    return floatval($parts[0]) / floatval($parts[1]);
}

Getting the response and plotting to map is quite easy. The map is already loaded on the page and points to a default location. We are going to alter our center point as well as add marker with Info Window.

moveCenterAndPlaceMarker : function(data) {
    var geo = data.gps;
    console.log("moving marker: " + JSON.stringify(geo));
    var latLng = new google.maps.LatLng(geo.lat, geo.lng);
    map.setCenter(latLng);
    map.setZoom(14);
    var contentString = '<div style="width: 200px; height: 150px;">The picture you took at this place is:<img width="120" height="120" src="data:image/jpeg;base64,'+data.img+'"></div>';
 
    var marker = new google.maps.Marker({
        map: map,
        position: latLng,
        title: 'The picture was taken right here! (I guess...)'
    });
 
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });
}

One thing you might not have noticed is the conversion of image we uploaded to base64 format. That format is returned and is loaded inside the google info window showing the image inside the google’s popup.
As you can see, the following picture is taken by me at the airport and the picture’s GPS co-ordinates is bang on the target.

DEMO: link here.

Conclusion

What did we just see: We saw the basics of EXIF metadata, how to do that in PHP, how to upload a file asynchronously in jQuery and parse EXIF data and get back. Also, we saw loading non-url images inside google info window.

Introduction

This tutorial will help you learn many things – how to use MongoLab API for CRUD operations, how to get browser info and version and how to use google charts. What we are going to achieve is, to create a real-time page which keeps updating the hits with browser info and also renders the page with the stats.

googlechart

Pre-requisite

You should at least know what MongoDB is and the flexibility it offers. You can read it right here. MongoLab is the cloud API provider for MongoDB. It also provides a REST interface for the same. Opening a account is free and so I would advise you to get one in case if you wanted to try MongoLab in your small projects. Do NOT try and use the key I used in my JavaScript. It’s not going to cost me anything because its a free account but again, I would have to manually login and clear those items if you use my ID for your demo apps :).

Storing browser info

The idea is to figure out the browser name and version and if it is already in DB, just increment the hit number else insert a new row.

/*
    Util method to get browserName and browserVersion from navigator. Source: stackoverflow.com.
 */
navigator.sayswho = (function () {
    var N = navigator.appName,
        ua = navigator.userAgent,
        tem;
    var M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if (M &amp;&amp; (tem = ua.match(/version\/([\.\d]+)/i)) != null) M[2] = tem[1];
    M = M ? [M[1], M[2]] : [N, navigator.appVersion, '-?'];
    return M;
})();
if (navigator.sayswho.length &gt; 1) {
    navigator.cBrowserName = navigator.sayswho[0];
    navigator.cBrowserVersion = navigator.sayswho[1];
}

Now you do have browser name and version after the above steps. The task is to figure out whether the row is already present in DB or not. Querying the DB is easy with JavaScript but it is a shame that you can’t do that for commercial website because people will use the key to query your DB directly.

$.ajax( { url: "https://api.mongolab.com/api/1/databases/webdev/collections/hits?apiKey=<YOUR_KEY>&q=" + queryStr,
        type: "GET",
        contentType: "application/json",
        async: true,
        timeout: 5000,
        success: function (data) {
            ..
        },
        error: function (xhr, status, err) {}
    });

The insert and update code is pretty straightforward.

function updateDB(browser, version, hits) {
    var queryObj = {"browser": browser, "version": version};
    var queryStr = JSON.stringify(queryObj);
    // API Key needs to be changed to yours. This key is, however, a free limited space key and you can get one for yourself.
    // https://mongolab.com/welcome/ : Sign up and get 500MB free.
    $.ajax( { url: 'https://api.mongolab.com/api/1/databases/webdev/collections/hits?apiKey=<YOUR_KEY>&q=' + queryStr,
        data: JSON.stringify( { "$set" : { "hits" : hits } } ),
        type: "PUT",
        contentType: "application/json"
    });
}
 
/*
    Insert the new browser info here.
 */
function insertToDB(browser, version) {
    // API Key needs to be changed to yours. This key is, however, a free limited space key and you can get one for yourself.
    // https://mongolab.com/welcome/ : Sign up and get 500MB free.
    $.ajax( { url: "https://api.mongolab.com/api/1/databases/webdev/collections/hits?apiKey=<YOUR_KEY>",
        data: JSON.stringify( { "browser" : browser, "version" : version, "hits" : 1} ),
        type: "POST",
        contentType: "application/json"
    });
}

The posting part is now over.

Get browser stats

Let’s query the DB with browser name as sort order.

$.ajax( { url: "https://api.mongolab.com/api/1/databases/webdev/collections/hits?apiKey=<YOUR_KEY>&s="+queryStr,
    type: "GET",
    contentType: "application/json",
    async: true,
    timeout: 5000,
    success: function (data) {
        ..
    },
    error: function (xhr, status, err) { }
});

Google charts is a fantastic API to display charts. It is the easiest way and also the best I’ve seen.

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(&lt;callbackmethod_to_query_DB&gt;);
.......
// after query
var data = google.visualization.arrayToDataTable(browserData);
var options = {title: 'Browser Stats'};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);

That’s it folks! Take a look at demo here.

Velu's Blog

Problems & Solutions. or just how-to.

Tag Archives: google

Use EXIF Metadata to extract GPS Info

Introduction

Prerequisites

EXIF Metadata

Reading EXIF Metadata from PHP

Conclusion

Browser Stats with MongoLab & Google Charts

Introduction

Pre-requisite

Storing browser info

Get browser stats