add connect to viewer and add footer

css/60_photos.css

@@ -64,6 +64,9 @@
     float: left;
     line-height: 6px;
 }
+.photo-attribution-streetside .image_link:hover{
+    color: #06b8ff;
+}
 
 /* markers and sequences */
 .viewfield-group {
@@ -210,6 +213,28 @@
 }
 
 
+/* Streetside viewer */
+#ms .domRenderer .TagSymbol {
+    font-size: 10px;
+    background-color: rgba(0,0,0,0.4);
+    padding: 0 4px;
+    border-radius: 4px;
+    top: -25px;
+}
+#ms .domRenderer .Attribution {
+    /* we will roll our own to avoid async update issues like #4526 */
+    display: none;
+}
+
+.ms-wrapper .photo-attribution a:active,
+.ms-wrapper .photo-attribution a:hover {
+    color: #35af6d;
+}
+
+.ms-wrapper .mapillary-js-dom {
+    z-index: 9;
+}
+
 /* Mapillary viewer */
 #mly .domRenderer .TagSymbol {
     font-size: 10px;

modules/services/streetside.js

@@ -1,4 +1,4 @@
-/* global Mapillary:false */
+
 import _filter from 'lodash-es/filter';
 import _find from 'lodash-es/find';
 import _flatten from 'lodash-es/flatten';
@@ -23,10 +23,6 @@ import {
 
 import rbush from 'rbush';
 
-// photo sphere viewer
-import _three from 'three/build/three';
-import _d from 'd.js/lib/d';
-
 import { jsonpRequest } from '../util/jsonp_request';
 import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile';
 import { geoExtent } from '../geo';
@@ -38,7 +34,6 @@ var msapi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/';
 var apibase = 'https://a.mapillary.com/v3/',
     appkey = 'An-VWpS-o_m7aV8Lxa0oR9cC3bxwdhdCYEGEFHMP9wyMbmRJFzWfMDD1z3-DXUuE',
     viewercss = 'mapillary-js/mapillary.min.css',
-    //viewerjs = 'mapillary-js/mapillary.min.js',
     viewerjs = 'mapillary-js/mapillary.js',
     clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi',
     maxResults = 1000,
@@ -538,38 +533,40 @@ export default {
         }
     },
 
-
+    // create the streeside viewer
     loadViewer: function (context) {
-        // add mly-wrapper
-        var wrap = d3_select('#photoviewer').selectAll('.mly-wrapper')
+        // create ms-wrapper a photo wrapper class
+        var wrap = d3_select('#photoviewer').selectAll('.ms-wrapper')
             .data([0]);
 
+        // inject ms-wrapper into the photoviewer div (used by all
+        // to house each custom photo viewer)
         var wrapEnter = wrap.enter()
             .append('div')
-            .attr('id', 'mly')
-            .attr('class', 'photo-wrapper mly-wrapper')
+            .attr('id', 'ms')
+            .attr('class', 'photo-wrapper ms-wrapper')
             .classed('hide', true);
 
+        // inject div to support photo attribution into ms-wrapper
         wrapEnter
             .append('div')
             .attr('class', 'photo-attribution-streetside fillD');
-
-
-        // load mapillary-viewercss
-        d3_select('head').selectAll('#mapillary-viewercss')
+        
+        // load streetside viewer css
+        d3_select('head').selectAll('#streetside-viewercss')
             .data([0])
             .enter()
             .append('link')
-            .attr('id', 'mapillary-viewercss')
+            .attr('id', 'streetside-viewercss')
             .attr('rel', 'stylesheet')
             .attr('href', context.asset(viewercss));
 
-        // load mapillary-viewerjs
-        d3_select('head').selectAll('#mapillary-viewerjs')
+        // load streetside viewer js
+        d3_select('head').selectAll('#streetside-viewerjs')
             .data([0])
             .enter()
             .append('script')
-            .attr('id', 'mapillary-viewerjs')
+            .attr('id', 'streetside-viewerjs')
             .attr('src', context.asset(viewerjs));
     },
 
@@ -578,18 +575,18 @@ export default {
         var wrap = d3_select('#photoviewer')
             .classed('hide', false);
 
-        var isHidden = wrap.selectAll('.photo-wrapper.mly-wrapper.hide').size();
+        var isHidden = wrap.selectAll('.photo-wrapper.ms-wrapper.hide').size();
 
         if (isHidden) {
             wrap
-                .selectAll('.photo-wrapper:not(.mly-wrapper)')
+                .selectAll('.photo-wrapper:not(.ms-wrapper)')
                 .classed('hide', true);
 
             wrap
-                .selectAll('.photo-wrapper.mly-wrapper')
+                .selectAll('.photo-wrapper.ms-wrapper')
                 .classed('hide', false);
 
-            _mlyViewer.resize();
+            //_mlyViewer.resize();
         }
 
         return this;
@@ -663,7 +660,7 @@ export default {
                 };
             }
 
-            _mlyViewer = new Mapillary.Viewer('mly', clientId, null, opts);
+            _mlyViewer = new Mapillary.Viewer('ms', clientId, null, opts);
             _mlyViewer.on('nodechanged', nodeChanged);
             _mlyViewer.moveToKey(imageKey)
                 .catch(function (e) { console.error('mly3', e); });  // eslint-disable-line no-console
@@ -726,7 +723,7 @@ export default {
 
         this.setStyles(null, true);
 
-        var wrap = d3_select('#photoviewer .mly-wrapper');
+        var wrap = d3_select('#photoviewer .ms-wrapper');
         var attribution = wrap.selectAll('.photo-attribution-streetside').html('');
         var year = (new Date()).getFullYear();
 

modules/svg/streetside.js

@@ -83,7 +83,7 @@ export function svgStreetside(projection, context, dispatch) {
 
         service
             .selectImage(d)
-            .updateViewer(d.key, context)
+            //.updateViewer(d.key, context);
             .showViewer();
 
         context.map().centerEase(d.loc);

package.json

@@ -45,9 +45,7 @@
     "chai": "^4.1.0",
     "colors": "^1.1.2",
     "concat-files": "^0.1.1",
-    "d.js": "^0.7.5",
     "d3": "4.13.0",
-    "dot": "^1.1.2",
     "ecstatic": "^3.0.0",
     "editor-layer-index": "osmlab/editor-layer-index.git#gh-pages",
     "eslint": "^4.3.0",
@@ -68,7 +66,6 @@
     "name-suggestion-index": "0.1.4",
     "npm-run-all": "^4.0.0",
     "phantomjs-prebuilt": "~2.1.11",
-    "photo-sphere-viewer": "^3.3.1",
     "request": "^2.81.0",
     "rollup": "~0.56.3",
     "rollup-plugin-commonjs": "~8.3.0",
@@ -82,8 +79,6 @@
     "sinon-chai": "^2.14.0",
     "smash": "0.0",
     "svg-sprite": "1.3.7",
-    "three": "^0.91.0",
-    "uevent": "^1.0.0",
     "uglify-js": "^3.0.0",
     "xml2js": "^0.4.17",
     "xmlbuilder": "^9.0.6"