diff --git a/css/60_photos.css b/css/60_photos.css index 25617bbe8..69ae6cc8c 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -25,12 +25,13 @@ } .photo-wrapper .photo-attribution { - width: 100%; - font-size: 10px; - text-align: right; position: absolute; bottom: 0; right: 0; + width: 100%; + font-size: 10px; + text-align: right; + line-height: 1.1em; padding: 4px 2px; z-index: 10; } @@ -42,32 +43,6 @@ color: #fff; } -/* streetside photo attribution */ -.photo-wrapper .photo-attribution-streetside { - width: 100%; - font-size: 10px; - position: absolute; - bottom: 0; - right: 0; - padding: 4px 2px; - z-index: 10; -} - -.photo-attribution-streetside a, -.photo-attribution-streetside a:visited, -.photo-attribution-streetside span { - padding: 4px 2px; - color: #fff; -} -.photo-attribution-streetside .image_link{ - color: #fff; - float: left; - line-height: 6px; -} -.photo-attribution-streetside .image_link:hover{ - color: #06b8ff; -} - /* markers and sequences */ .viewfield-group { pointer-events: visible; @@ -194,13 +169,16 @@ } -/* Streetside viewer */ +/* Streetside Viewer (pannellum) */ +.ms-wrapper .photo-attribution .image_link { + display: block; +} .ms-wrapper .photo-attribution a:active, .ms-wrapper .photo-attribution a:hover { color: #35af6d; } -.pnlm-compass { +.ms-wrapper .pnlm-compass.pnlm-control { width: 26px; height: 26px; left: 4px; diff --git a/modules/services/streetside.js b/modules/services/streetside.js index ed4fa8342..6eac992a8 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -339,23 +339,20 @@ export default { 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) + // inject ms-wrapper into the photoviewer div + // (used by all to house each custom photo viewer) var wrapEnter = wrap.enter() .append('div') .attr('id', 'ms') .attr('class', 'photo-wrapper ms-wrapper') .classed('hide', true); - // inject div to support streetside viewer (pannellum) + // inject div to support streetside viewer (pannellum) and attribution line wrapEnter .append('div') - .attr('id', 'viewer-streetside'); - - // inject div to support photo attribution into ms-wrapper - wrapEnter + .attr('id', 'viewer-streetside') .append('div') - .attr('class', 'photo-attribution-streetside fillD'); + .attr('class', 'photo-attribution fillD'); // load streetside pannellum viewer css d3_select('head').selectAll('#streetside-viewercss') @@ -445,7 +442,7 @@ export default { this.setStyles(null, true); var wrap = d3_select('#photoviewer .ms-wrapper'); - var attribution = wrap.selectAll('.photo-attribution-streetside').html(''); + var attribution = wrap.selectAll('.photo-attribution').html(''); var year = (new Date()).getFullYear(); if (d) { @@ -493,7 +490,8 @@ export default { showFullscreenCtrl: false, autoLoad: true, compass: true, - yaw: d.ca, + northOffset: d.ca, + yaw: 0, type: 'cubemap', cubeMap: [ imgUrlPrefix + imgLocIdxArr[0] + imgUrlSuffix, diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index ddda4cd18..9e00da9fb 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -10,7 +10,7 @@ export function svgStreetside(projection, context, dispatch) { var minMarkerZoom = 16; var minViewfieldZoom = 19; var layer = d3_select(null); - var _viewerRotation = null; + var _viewerYaw = 0; var _streetside; /** @@ -96,6 +96,8 @@ export function svgStreetside(projection, context, dispatch) { var service = getService(); if (!service) return; + _viewerYaw = 0; + // reset bubble back to a circular field layer.selectAll('.viewfield-group.selected .viewfield') .attr('d', viewfieldPath); @@ -132,7 +134,7 @@ export function svgStreetside(projection, context, dispatch) { */ function transform(d) { var t = svgPointTransform(projection)(d); - var rot = _viewerRotation !== null ? _viewerRotation : d.ca; + var rot = d.ca + _viewerYaw; if (rot) { t += ' rotate(' + Math.floor(rot) + ',0,0)'; } @@ -148,7 +150,7 @@ export function svgStreetside(projection, context, dispatch) { if (!viewer) return; // update viewfield rotation - _viewerRotation = viewer.getYaw(); + _viewerYaw = viewer.getYaw(); layer.selectAll('.viewfield-group.selected') .attr('transform', transform); }