main.js

// Starter code from http://leafletjs.com/
var map = L.map("map");

// An array of objects with properties
// * url
// * bounds
var photos = [];

var presentationMode = true;

// Tile URL from
// http://leaflet-extras.github.io/leaflet-providers/preview/
L.tileLayer("http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png").addTo(map);


// Add the route.
// See http://mpetazzoni.github.io/leaflet-gpx/
// https://github.com/mpetazzoni/leaflet-gpx

// Route file generated by
// http://map.project-osrm.org/
var gpx = "route.gpx"; // URL to your GPX file or the GPX itself
new L.GPX(gpx, {
  async: true,
  marker_options: {
    startIconUrl: "http://github.com/mpetazzoni/leaflet-gpx/raw/master/pin-icon-start.png",
    endIconUrl:   "http://github.com/mpetazzoni/leaflet-gpx/raw/master/pin-icon-end.png",
    shadowUrl:    "http://github.com/mpetazzoni/leaflet-gpx/raw/master/pin-shadow.png"
  }
}).on("loaded", function(e) {
  map.fitBounds(e.target.getBounds());
}).addTo(map);

var photoDimensions = {
      width: 1024,
      height: 768
    },
    scale = 0.1;

// http://leafletjs.com/reference.html#mouse-event
map.on("click", function(e){
  if(!presentationMode){
    var xOffset = photoDimensions.width * scale;
    var yOffset = photoDimensions.height * scale;
    var x1 = e.containerPoint.x - xOffset;
    var y1 = e.containerPoint.y - yOffset;
    var x2 = e.containerPoint.x + xOffset;
    var y2 = e.containerPoint.y + yOffset;

    // http://leafletjs.com/reference.html#bounds
    var p1 = map.containerPointToLatLng(L.point(x1, y1));
    var p2 = map.containerPointToLatLng(L.point(x2, y2));
    var bounds = [[p1.lat, p1.lng],[p2.lat, p2.lng]];
    var url = imageUrl();

    // http://leafletjs.com/reference.html#imageoverlay
    L.imageOverlay(url, bounds).addTo(map);

    photos.push({
      url: url,
      bounds: bounds
    });

    console.log(JSON.stringify(photos));
  }

}); 

// Extracts the image URL.
function imageUrl(){
  // Example value for str:
  // <a href="https://www.flickr.com/photos/10604632@N02/16297267562" title="P1180880 by Curran Kelleher, on Flickr"><img src="https://farm9.staticflickr.com/8608/16297267562_54252c634d_b.jpg" width="1024" height="768" alt="P1180880"></a>

  // Example return value:
  // https://farm9.staticflickr.com/8608/16297267562_54252c634d_b.jpg
  var str = document.getElementById("url").value,
      begin = str.indexOf("src=") + 5;
  return str.substr(begin, str.indexOf("width=") - begin - 2);
}

$.getJSON("photos.json", function(data){

  // Store the data structure so it can be appended to via clicking interactions.
  photos = data;

  // Load photos
  loadPhoto(0);

  //photos.forEach(function(photo){
  //  L.imageOverlay(photo.url, photo.bounds).addTo(map);
  //});
});

// Loads a photo, waits, then loads the next photo.
function loadPhoto(i){
  if(i < photos.length){
    var photo = photos[i];
    L.imageOverlay(photo.url, photo.bounds).addTo(map);
    setTimeout(function(){
      loadPhoto(i + 1);
    }, 2000);
  }
}

// Display video from the camera on the video element.
// Example code from http://www.html5rocks.com/en/tutorials/getusermedia/intro/
/*navigator.getUserMedia  = navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia;
navigator.getUserMedia({ video: true }, function (localMediaStream) {
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(localMediaStream);
}, function (e) {
  console.log("Error " + e);
});
*/