Daniel Hindrikes
Developer and architect with focus on mobile- and cloud solutions!
Developer and architect with focus on mobile- and cloud solutions!
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);
}