From 40aafc2713fe500ed23e486fc423ff401bc45af6 Mon Sep 17 00:00:00 2001 From: Shawna Paradee Date: Tue, 1 May 2018 09:51:21 -0700 Subject: [PATCH] add connect to viewer and add footer --- css/60_photos.css | 25 ++++++++++++++++++ modules/services/streetside.js | 47 ++++++++++++++++------------------ modules/svg/streetside.js | 2 +- package.json | 5 ---- 4 files changed, 48 insertions(+), 31 deletions(-) diff --git a/css/60_photos.css b/css/60_photos.css index 18a18f643..1022cd0eb 100644 --- a/css/60_photos.css +++ b/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; diff --git a/modules/services/streetside.js b/modules/services/streetside.js index 99a362d2c..c316df7fc 100644 --- a/modules/services/streetside.js +++ b/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(); diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 123350731..3bfae6409 100644 --- a/modules/svg/streetside.js +++ b/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); diff --git a/package.json b/package.json index 378201d4f..a819e512d 100644 --- a/package.json +++ b/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"