From dd75737fce046a6d8b346c4808944b875e4dd124 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Fri, 3 Nov 2017 20:32:04 -0400
Subject: [PATCH] Add loading spinner

---
 css/60_photos.css                 | 14 ++++++++------
 modules/services/openstreetcam.js | 19 ++++++++++++++++---
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/css/60_photos.css b/css/60_photos.css
index c09f559fe..7ce43b5ad 100644
--- a/css/60_photos.css
+++ b/css/60_photos.css
@@ -23,12 +23,6 @@
     height: 100%;
 }
 
-/*#photoviewer.hide,
-.photo-wrapper.hide {
-    visibility: hidden;
-    display: block;
-}
-*/
 
 /* Mapillary Image Layer */
 .layer-mapillary-images {
@@ -151,3 +145,11 @@
     text-align: right;
 }
 
+
+/* OpenStreetCam viewer */
+.osc-wrapper {
+    background-color: #000;
+    background-image: url(img/loader-black.gif);
+    background-position: center;
+    background-repeat: no-repeat;
+}
diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js
index 7a16cf875..22a1db571 100644
--- a/modules/services/openstreetcam.js
+++ b/modules/services/openstreetcam.js
@@ -131,6 +131,13 @@ function loadNextTilePage(which, currZoom, url, tile) {
             delete cache.inflight[id];
             if (err || !data.currentPageItems || !data.currentPageItems.length) return;
 
+            function localeDateString(s) {
+                if (!s) return null;
+                var d = new Date(s);
+                if (isNaN(d.getTime())) return null;
+                return d.toLocaleDateString();
+            }
+
             var features = data.currentPageItems.map(function(item) {
                 var loc = [+item.lng, +item.lat],
                     d;
@@ -140,8 +147,9 @@ function loadNextTilePage(which, currZoom, url, tile) {
                         loc: loc,
                         key: item.id,
                         ca: +item.heading,
-                        captured_at: item.date_added,
-                        imagePath: item.name
+                        captured_at: localeDateString(item.shot_date || item.date_added),
+                        captured_by: item.username,
+                        imagePath: item.lth_name
                     };
                 }
                 return {
@@ -288,8 +296,13 @@ export default {
 
 
     updateViewer: function(imagePath) {
+        var wrap = d3_select('#photoviewer .osc-wrapper');
+
+        wrap.selectAll('img')
+            .remove();
+
         if (imagePath) {
-            d3_select('#photoviewer .osc-wrapper img')
+            wrap.append('img')
                 .attr('src', apibase + '/' + imagePath);
         }
         return this;