Showing photos on map

css/style.css

@@ -105,3 +105,47 @@ tr.selected td {
 .leaflet-popup-content-wrapper {
 	border-radius: 3px !important;
 }
+
+.leaflet-marker-photo { 
+	border: 2px solid #fff; 
+	box-shadow: 3px 3px 10px #888;
+}
+
+.leaflet-marker-photo.photo-marker{
+	top: -10px;
+}
+
+.leaflet-marker-photo.photo-marker:after {
+    content:"";
+    position: relative;
+    bottom: 16px;
+    border-width: 10px 10px 0;
+    border-style: solid;
+	border-color: #fff transparent;
+    display: block;
+	width: 0;
+	margin-left: auto;
+    margin-right: auto;
+}
+
+.leaflet-marker-photo .thumbnail { 
+    width: 100%;  
+    height: 100%;
+    background-size: cover;    
+    background-position: center center;
+	background-repeat: no-repeat;	
+}
+
+.leaflet-marker-photo .label {
+	position: absolute;
+	top: -7px;
+	right: -11px;
+	color: #fff;
+	background-color: #333;
+	border-radius: 9px;
+	height: 18px;
+	min-width: 18px;
+	line-height: 12px;
+	text-align: center;
+	padding: 3px;
+}

js/photosController.js

@@ -0,0 +1,99 @@
+function PhotosController () {
+    this.PHOTO_MARKER_VIEW_SIZE = 40;
+}
+
+PhotosController.prototype = {
+
+    appendToMap : function(map) {
+        this.map = map;
+        this.photoLayer = L.markerClusterGroup({
+            iconCreateFunction : this.createClusterView,
+            showCoverageOnHover : false,
+            maxClusterRadius: this.PHOTO_MARKER_VIEW_SIZE + 10,
+            icon: {						
+                iconSize: [this.PHOTO_MARKER_VIEW_SIZE, this.PHOTO_MARKER_VIEW_SIZE]
+			}
+        });
+        this.photoLayer.on('click', this.onPhotoViewClick);
+        this.photoLayer.addTo(this.map);
+    },
+
+    onPhotoViewClick : function(evt) {
+        evt.layer.bindPopup(L.Util.template('<img src="{url}" height="auto" width="100%"/>', evt.layer.data), {
+            className: 'leaflet-popup-photo',
+            minWidth: 400
+        }).openPopup();
+    },
+
+    createClusterView : function(cluster) {
+        var thumbnailUrl = cluster.getAllChildMarkers()[0].data.thumbnail;
+        var label = cluster.getChildCount();
+        console.log(thumbnailUrl);
+        return new L.DivIcon(L.extend({
+            className: 'leaflet-marker-photo cluster-marker', 
+            html: '<div class="thumbnail" style="background-image: url(' + thumbnailUrl + ');"></div>​<span class="label">' + label + '</span>'
+        }, this.icon));
+    },
+
+    createPhotoView: function(photo) {
+        return L.divIcon(L.extend({
+            html: '<div class="thumbnail" style="background-image: url(' + photo.thumbnail + ');"></div>​',
+            className: 'leaflet-marker-photo photo-marker'
+        }, photo, {						
+            iconSize: [this.PHOTO_MARKER_VIEW_SIZE, this.PHOTO_MARKER_VIEW_SIZE],
+            iconAnchor:   [this.PHOTO_MARKER_VIEW_SIZE / 2, this.PHOTO_MARKER_VIEW_SIZE]
+        }));
+    },
+
+    addPhotosToMap : function(photos) {
+        var markers = this.preparePhotoMarkers(photos);
+        this.photoLayer.addLayers(markers);
+    },
+
+    preparePhotoMarkers : function(photos) {
+        var markers = [];
+        for (var i = 0; i < photos.length; i++) {
+            var markerData = {
+                lat: photos[i].lat,
+                lng: photos[i].lng,
+                url: this.generateImageUrl(photos[i].path),
+                thumbnail: this.generateThumbnailUrl(photos[i].path),
+                albumId: photos[i].folderId
+            };
+            var marker = L.marker(markerData, {
+                icon: this.createPhotoView(markerData)
+            });
+            marker.data = markerData;
+            markers.push(marker);
+        }
+        return markers;
+    },
+
+    callForImages: function() {
+        $.ajax({
+            'url' : OC.generateUrl('apps/maps/photos/all'),
+            'type': 'GET',
+            'success': (function(_controller) {
+                return function(response) {
+                    if (response[0].length == 0) {
+                        //showNoPhotosMessage();
+                    } else {
+                        _controller.addPhotosToMap(response[0]);
+                    }
+                }
+            })(this)
+        });
+    },
+
+    /* Preview size 32x32 is used in files view, so it sould be generated */
+    generateThumbnailUrl: function (filename) {
+        return "/index.php/core/preview.png?file=" + escape(filename) + "&x=32&y=32";
+    },
+
+    /* Preview size 375x211 is used in files details view */
+    generateImageUrl: function (filename) {
+        return "/index.php/core/preview.png?file=" + escape(filename) + "&x=375&y=211";
+    }
+
+};
+

js/script.js

@@ -1,6 +1,8 @@
 (function($, OC) {
     $(function() {
         mapController.initMap();
+        photosController.appendToMap(mapController.map);
+        photosController.callForImages();
 
         // Popup
         $(document).on('click', '#opening-hours-header', function() {
@@ -65,6 +67,8 @@
         }
     };
 
+    var photosController = new PhotosController();
+
     var searchController = {
         isGeocodeabe: function(str) {
             var pattern = /^\s*\d+\.?\d*\,\s*\d+\.?\d*\s*$/;

package.json

@@ -29,6 +29,7 @@
     "gulp": "^3.9.1",
     "gulp-cli": "^1.4.0",
     "leaflet": "^1.2.0",
+    "leaflet.markercluster": "^1.1.0",
     "opening_hours": "^3.5.0"
   }
 }

templates/content/index.php

@@ -20,6 +20,7 @@
 
 style('maps', '../node_modules/leaflet/dist/leaflet');
 script('maps', '../node_modules/leaflet/dist/leaflet');
+script('maps', '../node_modules/leaflet.markercluster/dist/leaflet.markercluster');
 script('maps', '../node_modules/opening_hours/opening_hours');
 ?>
 <div id="search">

templates/index.php

@@ -1,4 +1,5 @@
 <?php
+script('maps', 'photosController');
 script('maps', 'script');
 style('maps', 'style');
 ?>