Add username field

css/60_photos.css

@@ -328,9 +328,11 @@ li.list-item-photos.list-item-mapilio.active:after {
     background-position: center;
     background-repeat: no-repeat;
 }
+
 #ideditor-viewer-mapilio-simple-wrap {
     height: 100%;
 }
+
 #ideditor-viewer-mapilio-simple {
     width: 100%;
     height: 100%;
@@ -397,6 +399,13 @@ label.panoramax-hd {
 }
 
 
+#ideditor-viewer-mapilio-simple img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    overflow: hidden
+} 
+
 /* Streetside Viewer (pannellum) */
 .ms-wrapper .photo-attribution {
     line-height: 1.1em;

modules/services/mapilio.js

@@ -148,6 +148,7 @@ function loadTileDataToCache(data, tile) {
             d = {
                 loc: loc,
                 capture_time: feature.properties.capture_time,
+                created_by_id: feature.properties.created_by_id,
                 id: feature.properties.id,
                 sequence_id: feature.properties.sequence_uuid,
                 heading: feature.properties.heading,
@@ -196,6 +197,19 @@ function getImageData(imageId, sequenceId) {
         });
 }
 
+function getUserData(userId) {
+  return fetch(apiUrl + `/api/search-user?options[parameters][id]=${userId}`, {method: 'GET'})
+    .then(function (response) {
+      if (!response.ok) {
+        throw new Error(response.status + ' ' + response.statusText);
+      }
+      return response.json();
+    })
+    .then(function (data) {
+      return data.data[0].username;
+    });
+}
+
 
 export default {
     // Initialize Mapilio
@@ -348,25 +362,39 @@ export default {
         if (!d) return this;
 
         let wrap = context.container().select('.photoviewer .mapilio-wrapper');
-        let attribution = wrap.selectAll('.photo-attribution').text('');
-
-        if (d.capture_time) {
+        let attribution = wrap.selectAll('.photo-attribution').text('\u00A0');
+
+        getUserData(d.created_by_id).then((username) => {
+          if (username) {
             attribution
-                .append('span')
-                .attr('class', 'captured_at')
-                .text(localeDateString(d.capture_time));
-
+              .append('a')
+              .attr('class', 'captured_by')
+              .attr('target', '_blank')
+              .text('@' + username);
+
             attribution
-                .append('span')
-                .text('|');
-        }
-
-        attribution
+              .append('span')
+              .text('|');
+          }
+
+          if (d.capture_time) {
+            attribution
+              .append('span')
+              .attr('class', 'captured_at')
+              .text(localeDateString(d.capture_time));
+
+            attribution
+              .append('span')
+              .text('|');
+          }
+
+          attribution
             .append('a')
             .attr('class', 'image-link')
             .attr('target', '_blank')
             .attr('href', `https://mapilio.com/app?lat=${d.loc[1]}&lng=${d.loc[0]}&zoom=17&pId=${d.id}`)
             .text('mapilio.com');
+        });
 
         wrap
             .transition()