Mon Nov 21 2016

I am currently considering the merits of native and web applications for an upcoming project. It looks like browser support for access to hardware features like microphone, GPS, and camera is better than I expected, so I've made a quick demo of a feature that records the geographic coordinates at which a photo was uploaded, using the Camera and Geolocation web APIs.

Please try it out on your mobile device. I will not save any uploaded photos or coordinates, I will only log whether the demo succeeded or failed.

If you're interested in the code and don't feel like opening your dev tools, here's the gist of it:

<input type="file" id="input" accept="image/*">
<img style="width: 250px" id="photo">
<img id="map" height="300" width="300" />
var fileReader = new FileReader(),
  input = document.querySelector('#input'),
  photo = document.querySelector('#photo'),
  map = document.querySelector('#map');
input.onchange = function(e) {
  if ( > 0) {
    fileReader.onload = function(e) {
      photo.src =;
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude,
      lon = position.coords.longitude;
    // use coordinates as you please here...