From cd7cdd95e9e4538afe8feaf3e2c08f8ce2071c7f Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Tue, 10 Jul 2018 02:04:39 -0400
Subject: [PATCH] Add "View on Bing Maps" link, cleanup css (closes #5125)

---
 css/60_photos.css                 | 19 ++++++++++++++---
 data/core.yaml                    |  1 +
 dist/locales/en.json              |  1 +
 modules/services/mapillary.js     |  2 +-
 modules/services/openstreetcam.js |  2 +-
 modules/services/streetside.js    | 34 ++++++++++++++++++++++++-------
 6 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/css/60_photos.css b/css/60_photos.css
index 14c201ae5..d1e84d79c 100644
--- a/css/60_photos.css
+++ b/css/60_photos.css
@@ -171,9 +171,24 @@
 
 
 /* Streetside Viewer (pannellum) */
-.ms-wrapper .photo-attribution .image_link {
+.ms-wrapper .photo-attribution .image-link {
     display: block;
 }
+.ms-wrapper .photo-attribution .attribution-row {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    pading: 0 5px;
+}
+.ms-wrapper .photo-attribution .image-view-link {
+    text-align: left;
+    margin: 0 5px;
+}
+.ms-wrapper .photo-attribution .image-report-link {
+    text-align: right;
+}
+
 .ms-wrapper .photo-attribution a:active,
 .ms-wrapper .photo-attribution a:hover {
     color: #0fffc4;
@@ -189,8 +204,6 @@
 }
 
 label.streetside-hires {
-    float: left;
-    padding: 0 10px;
     cursor: pointer;
 }
 .streetside-hires span {
diff --git a/data/core.yaml b/data/core.yaml
index 240c4f12e..84a0884b2 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -598,6 +598,7 @@ en:
     tooltip: "Streetside photos from Microsoft"
     title: "Photo Overlay (Bing Streetside)"
     report: Report a privacy concern with this image
+    view_on_bing: "View on Bing Maps"
     hires: "High resolution"
   mapillary_images:
     tooltip: "Street-level photos from Mapillary"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 9d5a9e9fb..bde354456 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -725,6 +725,7 @@
             "tooltip": "Streetside photos from Microsoft",
             "title": "Photo Overlay (Bing Streetside)",
             "report": "Report a privacy concern with this image",
+            "view_on_bing": "View on Bing Maps",
             "hires": "High resolution"
         },
         "mapillary_images": {
diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js
index 4805c5ef8..baed207b8 100644
--- a/modules/services/mapillary.js
+++ b/modules/services/mapillary.js
@@ -623,7 +623,7 @@ export default {
 
             attribution
                 .append('a')
-                .attr('class', 'image_link')
+                .attr('class', 'image-link')
                 .attr('target', '_blank')
                 .attr('href', 'https://www.mapillary.com/app/?pKey=' + encodeURIComponent(d.key) +
                     '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17')
diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js
index dd7639e25..14ded2d6b 100644
--- a/modules/services/openstreetcam.js
+++ b/modules/services/openstreetcam.js
@@ -504,7 +504,7 @@ export default {
 
             attribution
                 .append('a')
-                .attr('class', 'image_link')
+                .attr('class', 'image-link')
                 .attr('target', '_blank')
                 .attr('href', 'https://openstreetcam.org/details/' + d.sequence_id + '/' + d.sequence_index)
                 .text('openstreetcam.org');
diff --git a/modules/services/streetside.js b/modules/services/streetside.js
index 64b76b318..f13470b6c 100644
--- a/modules/services/streetside.js
+++ b/modules/services/streetside.js
@@ -831,8 +831,12 @@ export default {
             return response.promise;
         }
 
+        var line1 = attribution
+            .append('div')
+            .attr('class', 'attribution-row');
+
         // Add hires checkbox
-        var label = attribution
+        var label = line1
             .append('label')
             .attr('class', 'streetside-hires');
 
@@ -868,33 +872,49 @@ export default {
             .text(t('streetside.hires'));
 
 
+        var captureInfo = line1
+            .append('div')
+            .attr('class', 'attribution-capture-info');
+
         // Add capture date
         if (d.captured_by) {
             var yyyy = (new Date()).getFullYear();
 
-            attribution
+            captureInfo
                 .append('a')
                 .attr('class', 'captured_by')
                 .attr('target', '_blank')
                 .attr('href', 'https://www.microsoft.com/en-us/maps/streetside')
                 .text('©' + yyyy + ' Microsoft');
 
-            attribution
+            captureInfo
                 .append('span')
                 .text('|');
         }
 
         if (d.captured_at) {
-            attribution
+            captureInfo
                 .append('span')
                 .attr('class', 'captured_at')
                 .text(localeTimestamp(d.captured_at));
         }
 
-        // Add image link
-        attribution
+        // Add image links
+        var line2 = attribution
+            .append('div')
+            .attr('class', 'attribution-row');
+
+        line2
             .append('a')
-            .attr('class', 'image_link')
+            .attr('class', 'image-view-link')
+            .attr('target', '_blank')
+            .attr('href', 'https://www.bing.com/maps?cp=' + d.loc[1] + '~' + d.loc[0] +
+                '&lvl=17&dir=' + d.ca + '&style=x&v=2&sV=1')
+            .text(t('streetside.view_on_bing'));
+
+        line2
+            .append('a')
+            .attr('class', 'image-report-link')
             .attr('target', '_blank')
             .attr('href', 'https://www.bing.com/maps/privacyreport/streetsideprivacyreport?bubbleid=' + encodeURIComponent(d.key) +
                 '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17')