Clustering and better display of photos

sigal/themes/default/static/leaflet/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: 8px;
+	height: 12px;
+	min-width: 12px;
+	line-height: 12px;
+	text-align: center;
+	padding: 3px;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+}

sigal/themes/default/static/leaflet/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);	
+	};
+
+}

sigal/themes/default/static/leaflet/MarkerCluster.Default.css

@@ -0,0 +1,60 @@
+.marker-cluster-small {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-small div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-medium {
+	background-color: rgba(241, 211, 87, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(253, 156, 115, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(241, 128, 23, 0.6);
+	}
+
+	/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.leaflet-oldie .marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.leaflet-oldie .marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.leaflet-oldie .marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.leaflet-oldie .marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.leaflet-oldie .marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}

sigal/themes/default/static/leaflet/MarkerCluster.css

@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}

sigal/themes/default/static/leaflet/README

@@ -1,3 +1,5 @@
 plugins:
 https://github.com/leaflet-extras/leaflet-providers
 https://github.com/brunob/leaflet.fullscreen
+https://github.com/Leaflet/Leaflet.markercluster (for Leaflet.Photo)
+https://github.com/turban/Leaflet.Photo

sigal/themes/default/templates/default_head.html

@@ -1,7 +1,11 @@
 {% if settings.show_map and album.show_map %}
   <link rel="stylesheet" href="{{ theme.url }}/leaflet/leaflet.css" />
   <link rel="stylesheet" href="{{ theme.url }}/leaflet/Control.FullScreen.css" />
+  <link rel="stylesheet" href="{{ theme.url }}/leaflet/MarkerCluster.css" />
+  <link rel="stylesheet" href="{{ theme.url }}/leaflet/Leaflet.Photo.css" />
   <script src="{{ theme.url }}/leaflet/leaflet.js"></script>
   <script src="{{ theme.url }}/leaflet/leaflet-providers.js"></script>
   <script src="{{ theme.url }}/leaflet/Control.FullScreen.js"></script>
+  <script src="{{ theme.url }}/leaflet/leaflet.markercluster.js"></script>
+  <script src="{{ theme.url }}/leaflet/Leaflet.Photo.js"></script>
 {% endif %}

sigal/themes/default/templates/map.html

@@ -9,23 +9,27 @@
   });
   L.tileLayer.provider('{{ settings.leaflet_provider }}').addTo(map);
 
-  var markers = new Array();
+  var photoLayer = L.photo.cluster({ spiderfyDistanceMultiplier: 1.2 })
+                   .on('click', function (evt) {
+    evt.layer.bindPopup(L.Util.template('<img src="{url}"/></a><p>{caption}</p>', evt.layer.photo), {
+      className: 'leaflet-popup-photo',
+      minWidth: 400
+    }).openPopup();
+  });
 
+  var photos = [];
   {% for media in album.medias %}
     {% if media.exif and media.exif.gps %}
-    var marker = L.marker([{{ media.exif.gps.lat }}, {{ media.exif.gps.lon }}]);
-    marker.bindPopup(
-      '<img src="{{ media.thumbnail }}" title="{{ media.title }}" /></a>',
-      {'minWidth': 200}
-    ).openPopup();
-    markers.push(marker);
-    marker.addTo(map);
+    photos.push({
+      lat: {{ media.exif.gps.lat }},
+      lng: {{ media.exif.gps.lon }},
+      url: "{{ media.thumbnail }}",
+      caption: "{{ media.title }}",
+      thumbnail: "{{ media.thumbnail }}",
+    });
     {% endif %}
   {% endfor %}
-
-  var group = L.featureGroup(markers).addTo(map);
-  setTimeout(function () {
-    map.fitBounds(group.getBounds());
-  }, 1000);
+  photoLayer.add(photos).addTo(map);
+  map.fitBounds(photoLayer.getBounds());
 </script>
 {% endif %}