diff --git a/css/60_photos.css b/css/60_photos.css index 80f4f0138..576702263 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -276,6 +276,11 @@ background-position: center; background-repeat: no-repeat; } +#ideditor-viewer-mapilio{ + width: 100%; + height: 100%; + transform-origin: 0 0; +} /* Streetside Viewer (pannellum) */ .ms-wrapper .photo-attribution .image-link { diff --git a/modules/services/mapilio.js b/modules/services/mapilio.js index 251be5294..b4df139c1 100644 --- a/modules/services/mapilio.js +++ b/modules/services/mapilio.js @@ -1,11 +1,12 @@ import { dispatch as d3_dispatch } from 'd3-dispatch'; import { select as d3_select } from 'd3-selection'; +import { zoom as d3_zoom, zoomIdentity as d3_zoomIdentity } from 'd3-zoom'; import Protobuf from 'pbf'; import RBush from 'rbush'; import { VectorTile } from '@mapbox/vector-tile'; -import { utilRebind, utilTiler } from '../util'; +import { utilRebind, utilTiler, utilQsString, utilStringQs, utilSetTransform } from '../util'; import {geoExtent, geoScaleToZoom} from '../geo'; import {localizer} from '../core/localizer'; @@ -17,7 +18,11 @@ const lineLayer = 'map_roads_line'; const tileStyle = '&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}'; const minZoom = 14; -const dispatch = d3_dispatch('change', 'loadedImages', 'loadedLine'); +const dispatch = d3_dispatch('loadedImages', 'loadedLines'); +const imgZoom = d3_zoom() + .extent([[0, 0], [320, 240]]) + .translateExtent([[0, 0], [320, 240]]) + .scaleExtent([1, 15]); const pannellumViewerCSS = 'pannellum-streetside/pannellum.css'; const pannellumViewerJS = 'pannellum-streetside/pannellum.js'; const resolution = 1080; @@ -94,7 +99,7 @@ function loadTile(which, url, tile) { return response.arrayBuffer(); }) .then(function(data) { - if (!data) { + if (data.byteLength === 0) { throw new Error('No Data'); } @@ -106,9 +111,12 @@ function loadTile(which, url, tile) { dispatch.call('loadedLines'); } }) - .catch(function() { - cache.loaded[tileId] = true; - delete cache.inflight[tileId]; + .catch(function (e) { + if (e.message === 'No Data') { + cache.loaded[tileId] = true; + } else { + console.log(e); + } }); } @@ -295,6 +303,18 @@ export default { return this; }, + updateUrlImage: function(imageKey) { + if (!window.mocha) { + var hash = utilStringQs(window.location.hash); + if (imageKey) { + hash.photo = 'mapilio/' + imageKey; + } else { + delete hash.photo; + } + window.location.replace('#' + utilQsString(hash, true)); + } + }, + initViewer: function () { if (!window.pannellum) return; if (_pannellumViewer) return; @@ -318,6 +338,8 @@ export default { this.setActiveImage(d); + this.updateUrlImage(d.id); + let viewer = context.container().select('.photoviewer'); if (!viewer.empty()) viewer.datum(d); @@ -346,6 +368,15 @@ export default { .attr('href', `https://mapilio.com/app?lat=${d.loc[1]}&lng=${d.loc[0]}&zoom=17&pId=${d.id}`) .text('mapilio.com'); + wrap + .transition() + .duration(100) + .call(imgZoom.transform, d3_zoomIdentity); + + wrap + .selectAll('img') + .remove(); + getImageData(d.id,d.sequence_id).then(function () { if (d.isPano){ @@ -423,7 +454,9 @@ export default { let wrapEnter = wrap.enter() .append('div') .attr('class', 'photo-wrapper mapilio-wrapper') - .classed('hide', true); + .classed('hide', true) + .call(imgZoom.on('zoom', zoomPan)) + .on('dblclick.zoom', null); wrapEnter .append('div') @@ -515,6 +548,12 @@ export default { }; } + function zoomPan(d3_event) { + var t = d3_event.transform; + context.container().select('.photoviewer #ideditor-viewer-mapilio') + .call(utilSetTransform, t.x, t.y, t.k); + } + return _loadViewerPromise; }, @@ -544,6 +583,8 @@ export default { let viewer = context.container().select('.photoviewer'); if (!viewer.empty()) viewer.datum(null); + this.updateUrlImage(null); + viewer .classed('hide', true) .selectAll('.photo-wrapper')