Free Trial
10 days, no credit_card

<< More Tutorials

How to read GPS coordinates from an image in Javascript using rethumb?

To read GPS coordinates from an image in Javascript use the following code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> 
        <script language = "JavaScript">
        window.onload = function()
        {
            function parseGPSCoordinates(data)
            {
                if (data['GPS'] === undefined)
                    return 'GPS Coordinates not found';

                var values = {};

                values['LAT'] = data['GPS']['GPSLatitudeRef'];    
                values['LONG'] = data['GPS']['GPSLongitudeRef'];
                values['LAT_DEG'] = applyDivision(data['GPS']['GPSLatitude'][0]);
                values['LAT_MIN'] = applyDivision(data['GPS']['GPSLatitude'][1]);
                values['LAT_SEC'] = applyDivision(data['GPS']['GPSLatitude'][2]);
                values['LONG_DEG'] = applyDivision(data['GPS']['GPSLongitude'][0]);
                values['LONG_MIN'] = applyDivision(data['GPS']['GPSLongitude'][1]);
                values['LONG_SEC'] = applyDivision(data['GPS']['GPSLongitude'][2]);

                return format("{LAT} {LAT_DEG}° {LAT_MIN}' {LAT_SEC}'' {LONG} {LONG_DEG}° {LONG_MIN}' {LONG_SEC}''", values);
            }

            function applyDivision(value)
            {
                var tokens = value.split('/');
                return parseInt(tokens[0], 10) / parseInt(tokens[1], 10);
            }

            function format(str, values)
            {
                Object.keys(values).forEach(function(key) {
                    str = str.replace('{' + key + '}', values[key]);
                });

                return str;
            }

            function createCORSRequest(method, url)
            {
                var xhr = new XMLHttpRequest();

                if ("withCredentials" in xhr)
                {
                    xhr.open(method, url, true);
                }
                else if (typeof XDomainRequest !== "undefined")
                {
                    xhr = new XDomainRequest();
                    xhr.open(method, url);
                }
                else
                {
                    xhr = null;
                }

                return xhr;
            }

            var xhr = createCORSRequest('GET', "http://api.rethumb.com/v1/exif/all/http://images.rethumb.com/image_exif_1.jpg");
            
            if (xhr)
            {
                xhr.send();

                xhr.onload = function()
                {
                    document.getElementById('pre1').innerHTML = parseGPSCoordinates(JSON.parse(xhr.responseText));
                };

                xhr.onerror = function()
                {
                    document.getElementById('pre1').innerHTML = 'There was an error!';
                };
            }
            else
            {
                document.getElementById('pre1').innerHTML = 'CORS not supported';
            }
        }
        </script>
    </head>

    <body>
        <pre id="pre1"></pre>
    </body>
</html>

Start using this example now

Use the following commands to get started:

$ git clone https://github.com/rethumb/rethumb-javascript-examples.git
$ cd rethumb-javascript-examples
$ open read-gps-coordinates.html

More examples using Javascript