Daniel Hindrikes

When you take a photo with your mobile phone, photos will be geotagged. This information could be used for to show on a map where the photo is taken. This post will show you how to read this information with HTML5 and JavaScript.

To help me with this I using to external librarys written by Jacob Seidelin, binaryajax and exif-js.

To read the input file I using FileReader API in HTML5.

The coordinates returned from the EXIF data is in WGS84 degrees/minutes/seconds, for to show them on a map they need to be converted to WGS84 decimal.

//Get the photo from the input form
var input = document.getElementById('Files');
var files = input.files;
for(var i = 0; i < files.length; i++)
{
            var file = files[0];
            var reader = new FileReader; // use HTML5 file reader to get the file

            reader.onloadend = function () {
                // get EXIF data
                var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));

                var lat = exif.GPSLatitude;
                var lon = exif.GPSLongitude;

                //Convert coordinates to WGS84 decimal
                var latRef = exif.GPSLatitudeRef || "N";  
                var lonRef = exif.GPSLongitudeRef || "W";  
                lat = (lat[0] + lat[1]/60 + lat[2]/3600) * (latRef == "N" ? 1 : -1);  
                lon = (lon[0] + lon[1]/60 + lon[2]/3600) * (lonRef == "W" ? -1 : 1); 
                
               //Send the coordinates to your map
                Map.AddMarker(lat,lon);
            } 
            reader.readAsBinaryString(file);   
}