First version

iFrameGPX/leaflet-photo/Leaflet.Photo.css

@@ -0,0 +1,27 @@
+.leaflet-marker-photo { 
+	border: 2px solid #fff; 
+	box-shadow: 3px 3px 10px #888; 
+}	
+
+.leaflet-marker-photo div { 
+    width: 100%;  
+    height: 100%;
+    background-size: cover;    
+    background-position: center center;
+    background-repeat: no-repeat;
+}	
+
+.leaflet-marker-photo b {
+	position: absolute;
+	top: -7px;
+	right: -11px;
+	color: #555;
+	background-color: #fff;
+	border-radius: 6px;
+	min-height: 12px;
+	min-width: 12px;
+	line-height: 12px;
+	text-align: center;
+	padding: 3px;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+}

iFrameGPX/leaflet-photo/Leaflet.Photo.js

@@ -0,0 +1,83 @@
+L.Photo = L.FeatureGroup.extend({
+	options: {
+		icon: {						
+			iconSize: [40, 40]
+		}
+	},
+
+	initialize: function (photos, options) {
+		L.setOptions(this, options);
+		L.FeatureGroup.prototype.initialize.call(this, photos);
+	},
+
+	addLayers: function (photos) {
+		if (photos) {
+			for (var i = 0, len = photos.length; i < len; i++) {
+				this.addLayer(photos[i]);
+			}
+		}
+		return this;
+	},
+
+	addLayer: function (photo) {	
+		L.FeatureGroup.prototype.addLayer.call(this, this.createMarker(photo));
+	},
+
+	createMarker: function (photo) {
+		var marker = L.marker(photo, {
+			icon: L.divIcon(L.extend({
+				html: '<div style="background-image: url(' + photo.thumbnail + ');"></div>​',
+				className: 'leaflet-marker-photo'
+			}, photo, this.options.icon)),
+			title: photo.caption || ''
+		});		
+		marker.photo = photo;
+		return marker;
+	}
+});
+
+L.photo = function (photos, options) {
+	return new L.Photo(photos, options);
+};
+
+if (L.MarkerClusterGroup) {
+
+	L.Photo.Cluster = L.MarkerClusterGroup.extend({
+		options: {
+			featureGroup: L.photo,		
+			maxClusterRadius: 100,		
+			showCoverageOnHover: false,
+			iconCreateFunction: function(cluster) {
+				return new L.DivIcon(L.extend({
+					className: 'leaflet-marker-photo', 
+					html: '<div style="background-image: url(' + cluster.getAllChildMarkers()[0].photo.thumbnail + ');"></div>​<b>' + cluster.getChildCount() + '</b>'
+				}, this.icon));
+		   	},	
+			icon: {						
+				iconSize: [40, 40]
+			}		   		
+		},
+
+		initialize: function (options) {	
+			options = L.Util.setOptions(this, options);
+			L.MarkerClusterGroup.prototype.initialize.call(this);
+			this._photos = options.featureGroup(null, options);
+		},
+
+		add: function (photos) {
+			this.addLayer(this._photos.addLayers(photos));
+			return this;
+		},
+
+		clear: function () {
+			this._photos.clearLayers();
+			this.clearLayers();
+		}
+
+	});
+
+	L.photo.cluster = function (options) {
+		return new L.Photo.Cluster(options);	
+	};
+
+}