CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-26 23:43:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix loading of images from OpenStreetCam API, add viewer

Browse Source 
\o/
This commit is contained in:
Bryan Housel
2017-11-03 16:48:18 -04:00
parent 00b30e29f0
commit 6dd71ebf91
5 changed files with 124 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
css/60_photos.css
View File

@@ -1,5 +1,36 @@
/* Mapillary Image Layer */
/* photo viewer div */
#photoviewer {
position: absolute;
bottom: 30px;
width: 330px;
height: 250px;
padding: 5px;
background-color: #fff;
}
#photoviewer button.thumb-hide {
border-radius: 0;
padding: 5px;
position: absolute;
right: 0;
top: 0;
z-index: 500;
}
.photo-wrapper,
.photo-wrapper img {
width: 100%;
height: 100%;
}
/*#photoviewer.hide,
.photo-wrapper.hide {
visibility: hidden;
display: block;
}
*/
/* Mapillary Image Layer */
.layer-mapillary-images {
pointer-events: none;
}
@@ -39,7 +70,6 @@
}
/* Mapillary Sign Layer */
.layer-mapillary-signs {
pointer-events: none;
}
@@ -68,7 +98,6 @@
/* OpenStreetCam Image Layer */
.layer-openstreetcam-images {
pointer-events: none;
}
@@ -122,34 +151,3 @@
text-align: right;
}
.mapillary-wrap {
position: absolute;
bottom: 30px;
width: 330px;
height: 250px;
padding: 5px;
background-color: #fff;
}
.mapillary-wrap.hidden {
visibility: hidden;
}
.mapillary-wrap button.thumb-hide {
border-radius: 0;
padding: 5px;
position: absolute;
right: 0;
top: 0;
z-index: 500;
}
.mly-wrapper {
visibility: hidden;
width: 100%;
height: 100%;
}
.mly-wrapper.active {
visibility: visible;
}

59
modules/services/mapillary.js
View File

@@ -24,7 +24,6 @@ import rbush from 'rbush';
import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile';
import { geoExtent } from '../geo';
import { svgIcon } from '../svg';
import { utilDetect } from '../util/detect';
import { utilQsString, utilRebind } from '../util';
@@ -377,28 +376,14 @@ export default {
loadViewer: function(context) {
var that = this;
var wrap = d3_select('#content').selectAll('.mapillary-wrap')
.data([0]);
var enter = wrap.enter()
.append('div')
.attr('class', 'mapillary-wrap')
.classed('al', true) // 'al'=left, 'ar'=right
.classed('hidden', true);
enter
.append('button')
.attr('class', 'thumb-hide')
.on('click', function () { that.hideViewer(); })
.append('div')
.call(svgIcon('#icon-close'));
enter
// add mly-wrapper for viewer-js
d3_select('#photoviewer').selectAll('.mly-wrapper')
.data([0])
.enter()
.append('div')
.attr('id', 'mly')
.attr('class', 'mly-wrapper')
.classed('active', false);
.attr('class', 'photo-wrapper mly-wrapper')
.classed('hide', true);
// load mapillary-viewercss
d3_select('head').selectAll('#mapillary-viewercss')
@@ -420,22 +405,32 @@ export default {
showViewer: function() {
d3_select('#content')
.selectAll('.mapillary-wrap')
.classed('hidden', false)
.selectAll('.mly-wrapper')
.classed('active', true);
var wrap = d3_select('#photoviewer')
.classed('hide', false);
var isHidden = wrap.selectAll('.photo-wrapper.mly-wrapper.hide').size();
if (isHidden) {
wrap
.selectAll('.photo-wrapper:not(.mly-wrapper)')
.classed('hide', true);
wrap
.selectAll('.photo-wrapper.mly-wrapper')
.classed('hide', false);
mapillaryViewer.resize();
}
return this;
},
hideViewer: function() {
d3_select('#content')
.selectAll('.mapillary-wrap')
.classed('hidden', true)
.selectAll('.mly-wrapper')
.classed('active', false);
d3_select('#photoviewer')
.classed('hide', true)
.selectAll('.photo-wrapper')
.classed('hide', true);
d3_selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('selected', false);
@@ -514,7 +509,7 @@ export default {
mapillaryClicks.push(imageKey);
}
d3_selectAll('.layer-mapillary-images .viewfield-group')
d3_selectAll('.viewfield-group')
.classed('selected', function(d) {
return d.key === imageKey;
});

120
modules/services/openstreetcam.js
View File

@@ -3,7 +3,6 @@ import _find from 'lodash-es/find';
import _flatten from 'lodash-es/flatten';
import _forEach from 'lodash-es/forEach';
import _map from 'lodash-es/map';
import _some from 'lodash-es/some';
import { range as d3_range } from 'd3-array';
import { dispatch as d3_dispatch } from 'd3-dispatch';
@@ -125,6 +124,8 @@ function loadNextTilePage(which, currZoom, url, tile) {
cache.inflight[id] = d3_request(url)
.mimeType('application/json')
.header('Content-type', 'application/x-www-form-urlencoded')
.response(function(xhr) { return JSON.parse(xhr.responseText); })
.post(params, function(err, data) {
cache.loaded[id] = true;
delete cache.inflight[id];
@@ -140,6 +141,7 @@ function loadNextTilePage(which, currZoom, url, tile) {
key: item.id,
ca: +item.heading,
captured_at: item.date_added,
imagePath: item.name
};
}
return {
@@ -239,67 +241,57 @@ export default {
},
loadViewer: function(context) {
// var that = this;
// var wrap = d3_select('#content').selectAll('.openstreetcam-wrap')
// .data([0]);
// var enter = wrap.enter()
// .append('div')
// .attr('class', 'openstreetcam-wrap')
// .classed('al', true) // 'al'=left, 'ar'=right
// .classed('hidden', true);
// enter
// .append('button')
// .attr('class', 'thumb-hide')
// .on('click', function () { that.hideViewer(); })
// .append('div')
// .call(svgIcon('#icon-close'));
// enter
// .append('div')
// .attr('id', 'mly')
// .attr('class', 'mly-wrapper')
// .classed('active', false);
loadViewer: function() {
// add osc-wrapper
d3_select('#photoviewer').selectAll('.osc-wrapper')
.data([0])
.enter()
.append('div')
.attr('class', 'photo-wrapper osc-wrapper')
.classed('hide', true)
.append('img');
},
showViewer: function() {
// d3_select('#content')
// .selectAll('.openstreetcam-wrap')
// .classed('hidden', false)
// .selectAll('.mly-wrapper')
// .classed('active', true);
var wrap = d3_select('#photoviewer')
.classed('hide', false);
var isHidden = wrap.selectAll('.photo-wrapper.osc-wrapper.hide').size();
if (isHidden) {
wrap
.selectAll('.photo-wrapper:not(.osc-wrapper)')
.classed('hide', true);
wrap
.selectAll('.photo-wrapper.osc-wrapper')
.classed('hide', false);
}
return this;
},
hideViewer: function() {
// d3_select('#content')
// .selectAll('.openstreetcam-wrap')
// .classed('hidden', true)
// .selectAll('.mly-wrapper')
// .classed('active', false);
d3_select('#photoviewer')
.classed('hide', true)
.selectAll('.photo-wrapper')
.classed('hide', true);
// d3_selectAll('.layer-openstreetcam-images .viewfield-group')
// .classed('selected', false);
d3_selectAll('.layer-openstreetcam-images .viewfield-group')
.classed('selected', false);
openstreetcamImage = null;
return this;
},
updateViewer: function(imageKey, context) {
if (!imageKey) return;
// if (!openstreetcamViewer) {
// this.initViewer(imageKey, context);
// } else {
// openstreetcamViewer.moveToKey(imageKey);
// }
updateViewer: function(imagePath) {
if (imagePath) {
d3_select('#photoviewer .osc-wrapper img')
.attr('src', apibase + '/' + imagePath);
}
return this;
},
@@ -308,40 +300,10 @@ export default {
if (!arguments.length) return openstreetcamImage;
openstreetcamImage = imageKey;
// d3_selectAll('.layer-openstreetcam-images .viewfield-group')
// .classed('selected', function(d) {
// return d.key === imageKey;
// });
// if (!imageKey) return this;
// function localeTimestamp(s) {
// if (!s) return null;
// var d = new Date(s);
// if (isNaN(d.getTime())) return null;
// return d.toLocaleString(undefined, { timeZone: 'UTC' });
// }
// var selected = d3_selectAll('.layer-openstreetcam-images .viewfield-group.selected');
// if (selected.empty()) return this;
// var datum = selected.datum();
// var timestamp = localeTimestamp(datum.captured_at);
// var attribution = d3_select('.openstreetcam-js-dom .Attribution');
// var capturedAt = attribution.selectAll('.captured-at');
// if (capturedAt.empty()) {
// attribution
// .append('span')
// .text('|');
// capturedAt = attribution
// .append('span')
// .attr('class', 'captured-at');
// }
// capturedAt
// .text(timestamp);
// this.updateDetections();
d3_selectAll('.viewfield-group')
.classed('selected', function(d) {
return d.key === imageKey;
});
return this;
},

4
modules/svg/openstreetcam_images.js
View File

@@ -81,8 +81,8 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
context.map().centerEase(d.loc);
openstreetcam
.selectedImage(d.key, true)
.updateViewer(d.key, context)
.selectedImage(d.key)
.updateViewer(d.imagePath)
.showViewer();
}

25
modules/ui/init.js
View File

@@ -8,9 +8,9 @@ import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
import { t, textDirection } from '../util/locale';
import { tooltip } from '../util/tooltip';
import { svgDefs, svgIcon } from '../svg/index';
import { modeBrowse } from '../modes/index';
import { behaviorHash } from '../behavior/index';
import { svgDefs, svgIcon } from '../svg';
import { modeBrowse } from '../modes';
import { behaviorHash } from '../behavior';
import { utilGetDimensions } from '../util/dimensions';
import { uiAccount } from './account';
@@ -238,6 +238,25 @@ export function uiInit(context) {
.call(uiContributors(context));
var photoviewer = content
.append('div')
.attr('id', 'photoviewer')
.classed('al', true) // 'al'=left, 'ar'=right
.classed('hide', true);
photoviewer
.append('button')
.attr('class', 'thumb-hide')
.on('click', function () {
d3_select('#photoviewer')
.classed('hide', true)
.select('div')
.classed('hide', true);
})
.append('div')
.call(svgIcon('#icon-close'));
window.onbeforeunload = function() {
return context.save();
};