Merge pull request #3128 from openstreetmap/mapillary_js

Replace static Mapillary thumbnail with mapillary-js viewer
This commit is contained in:
Bryan Housel
2016-06-01 00:27:39 -04:00
15 changed files with 359 additions and 249 deletions
+2 -1
View File
@@ -63,7 +63,8 @@
"osmAuth": false,
"sexagesimal": false,
"toGeoJSON": false,
"marked": false
"marked": false,
"Mapillary": false,
},
"env": {
+41 -37
View File
@@ -660,45 +660,8 @@ button.save.has-count .count::before {
bottom: 0;
}
.mapillary-image {
position: absolute;
bottom: 30px;
width: 330px;
height: 250px;
padding: 5px;
background-color: #fff;
}
.mapillary-image a {
display: block;
position: absolute;
height: auto;
background-color: rgba(0,0,0,.5);
bottom: 0;
padding: 5px 10px;
}
.mapillary-image img {
width: 100%;
height: auto;
display: block;
}
.mapillary-image.hidden {
visibility: hidden;
}
.mapillary-image.temp button {
display: none;
}
.mapillary-image button {
border-radius: 0;
padding: 5px;
position: absolute;
right: 0;
top: 0;
}
.feature-list-pane .inspector-body {
top: 120px;
@@ -3293,3 +3256,44 @@ img.tile-removing {
background: rgba(0, 0, 0, 0) url(img/iD-sprite.svg) no-repeat -300px -460px;
margin: auto;
}
/* Mapillary
------------------------------------------------------- */
.mapillary-wrap {
position: absolute;
bottom: 30px;
width: 330px;
height: 250px;
padding: 5px;
background-color: #fff;
}
.mapillary-wrap.hidden {
visibility: hidden;
}
.mapillary-wrap .uil-ripple-css {
top: -9px;
left: -15px;
}
.mapillary-wrap .uil-ripple-css div {
top: 38px;
}
.mapillary-wrap button.thumb-hide {
border-radius: 0;
padding: 5px;
position: absolute;
right: 0;
top: 0;
z-index: 500;
}
.mly-wrapper {
visibility: hidden;
}
.mly-wrapper.active {
visibility: visible;
}
+16
View File
@@ -1519,6 +1519,22 @@ text.gpx {
z-index: 60;
}
.layer-mapillary-images .viewfield-group.loading * {
stroke-width: 2;
stroke: #222;
fill: #ff9900;
z-index: 60;
animation-name: viewfield-group-loading;
animation-duration: 0.8s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes viewfield-group-loading {
from {fill: #ff9900;}
to {fill: #ff5800;}
}
.layer-mapillary-images .viewfield-group:hover path.viewfield,
.layer-mapillary-images .viewfield-group.selected path.viewfield,
.layer-mapillary-images .viewfield-group path.viewfield {
+1 -1
View File
@@ -425,7 +425,7 @@ en:
tooltip: "Street-level photos from Mapillary"
title: "Photo Overlay (Mapillary)"
mapillary_signs:
tooltip: "Traffic signs from Mapillary"
tooltip: "Traffic signs from Mapillary (must enable Photo Overlay)"
title: "Traffic Sign Overlay (Mapillary)"
mapillary:
view_on_mapillary: "View this image on Mapillary"
+2
View File
@@ -4,6 +4,7 @@
<meta charset='utf-8'>
<title>iD</title>
<link rel='stylesheet' href='iD.css'>
<link rel='stylesheet' href='mapillary/mapillary.css'>
<!-- mobile devices -->
<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>
@@ -14,6 +15,7 @@
<script src='iD.js'></script>
<script src='presets.js'></script>
<script src='imagery.js'></script>
<script src='mapillary/mapillary.js'></script>
<!--<![endif]-->
</head>
<body>
+1 -1
View File
@@ -512,7 +512,7 @@
"title": "Photo Overlay (Mapillary)"
},
"mapillary_signs": {
"tooltip": "Traffic signs from Mapillary",
"tooltip": "Traffic signs from Mapillary (must enable Photo Overlay)",
"title": "Traffic Sign Overlay (Mapillary)"
},
"mapillary": {
-1
View File
@@ -32,7 +32,6 @@
<script src='js/lib/sexagesimal.js'></script>
<script src='js/lib/togeojson.js'></script>
<script src='js/lib/marked.js'></script>
<script src='js/id/id.js'></script>
<script src='js/id/util.js'></script>
+45 -12
View File
@@ -11,6 +11,7 @@ iD.Map = function(context) {
redrawEnabled = true,
transformStart,
transformed = false,
easing = false,
minzoom = 0,
drawLayers = iD.svg.Layers(projection, context),
drawPoints = iD.svg.Points(projection, context),
@@ -110,7 +111,9 @@ iD.Map = function(context) {
drawLabels.supersurface(supersurface);
}
function pxCenter() { return [dimensions[0] / 2, dimensions[1] / 2]; }
function pxCenter() {
return [dimensions[0] / 2, dimensions[1] / 2];
}
function drawVector(difference, extent) {
var graph = context.graph(),
@@ -246,8 +249,7 @@ iD.Map = function(context) {
var timeoutId;
function queueRedraw() {
clearTimeout(timeoutId);
timeoutId = setTimeout(function() { redraw(); }, 300);
timeoutId = setTimeout(function() { redraw(); }, 750);
}
function pointLocation(p) {
@@ -420,20 +422,51 @@ iD.Map = function(context) {
return redraw();
};
map.centerEase = function(loc) {
var from = map.center().slice(),
t = 0,
stop;
map.centerEase = function(loc2, duration) {
duration = duration || 250;
surface.one('mousedown.ease', function() {
stop = true;
map.cancelEase();
});
if (easing) {
map.cancelEase();
}
var t1 = Date.now(),
t2 = t1 + duration,
loc1 = map.center(),
ease = d3.ease('cubic-in-out');
easing = true;
d3.timer(function() {
if (stop) return true;
map.center(iD.geo.interp(from, loc, (t += 1) / 10));
return t === 10;
}, 20);
if (!easing) return true; // cancelled ease
var tNow = Date.now();
if (tNow > t2) {
tNow = t2;
easing = false;
}
var locNow = iD.geo.interp(loc1, loc2, ease((tNow - t1) / duration));
setCenter(locNow);
d3.event = {
scale: zoom.scale(),
translate: zoom.translate()
};
zoomPan();
return !easing;
});
return map;
};
map.cancelEase = function() {
easing = false;
d3.timer.flush();
return map;
};
+160 -70
View File
@@ -2,8 +2,8 @@ iD.services.mapillary = function() {
var mapillary = {},
dispatch = d3.dispatch('loadedImages', 'loadedSigns'),
apibase = 'https://a.mapillary.com/v2/',
urlImage = 'https://www.mapillary.com/map/im/',
urlThumb = 'https://d1cuyjsrcm0gby.cloudfront.net/',
viewercss = 'https://npmcdn.com/mapillary-js@1.3.0/dist/mapillary-js.min.css',
viewerjs = 'https://npmcdn.com/mapillary-js@1.3.0/dist/mapillary-js.min.js',
clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi',
maxResults = 1000,
tileZoom = 14;
@@ -20,15 +20,86 @@ iD.services.mapillary = function() {
}
function loadSignDefs(context) {
if (!iD.services.mapillary.sign_defs) {
iD.services.mapillary.sign_defs = {};
_.each(['au', 'br', 'ca', 'de', 'us'], function(region) {
d3.json(context.asset('traffico/string-maps/' + region + '-map.json'), function(err, data) {
if (err) return;
if (region === 'de') region = 'eu';
iD.services.mapillary.sign_defs[region] = data;
});
if (iD.services.mapillary.sign_defs) return;
iD.services.mapillary.sign_defs = {};
_.each(['au', 'br', 'ca', 'de', 'us'], function(region) {
d3.json(context.asset('traffico/string-maps/' + region + '-map.json'), function(err, data) {
if (err) return;
if (region === 'de') region = 'eu';
iD.services.mapillary.sign_defs[region] = data;
});
});
}
function loadViewer() {
// mapillary-wrap
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 () { mapillary.hideViewer(); })
.append('div')
.call(iD.svg.Icon('#icon-close'));
enter.append('div')
.attr('id', 'mly')
.attr('class', 'mly-wrapper')
.classed('active', false);
// mapillary-viewercss
d3.select('head').selectAll('#mapillary-viewercss')
.data([0])
.enter()
.append('link')
.attr('id', 'mapillary-viewercss')
.attr('rel', 'stylesheet')
.attr('href', viewercss);
// mapillary-viewerjs
d3.select('head').selectAll('#mapillary-viewerjs')
.data([0])
.enter()
.append('script')
.attr('id', 'mapillary-viewerjs')
.attr('src', viewerjs);
}
function initViewer(imageKey, context) {
function nodeChanged(d) {
var clicks = iD.services.mapillary.clicks;
var index = clicks.indexOf(d.key);
if (index > -1) { // nodechange initiated from clicking on a marker..
clicks.splice(index, 1);
} else { // nodechange initiated from the Mapillary viewer controls..
var loc = d.apiNavImIm ? [d.apiNavImIm.lon, d.apiNavImIm.lat] : [d.latLon.lon, d.latLon.lat];
context.map().centerEase(loc);
mapillary.setSelectedImage(d.key, false);
}
}
if (Mapillary && imageKey) {
var opts = {
baseImageSize: 320,
cover: false,
cache: true,
debug: false,
imagePlane: true,
loading: true,
sequence: true
};
var viewer = new Mapillary.Viewer('mly', clientId, imageKey, opts);
viewer.on('nodechanged', nodeChanged);
viewer.on('loadingchanged', mapillary.setViewerLoading);
iD.services.mapillary.viewer = viewer;
}
}
@@ -76,8 +147,8 @@ iD.services.mapillary = function() {
function loadTiles(which, url, projection, dimensions) {
var tiles = getTiles(projection, dimensions).filter(function(t) {
var xyz = t.id.split(',');
return !nearNullIsland(xyz[0], xyz[1], xyz[2]);
var xyz = t.id.split(',');
return !nearNullIsland(xyz[0], xyz[1], xyz[2]);
});
_.filter(which.inflight, function(v, k) {
@@ -150,6 +221,10 @@ iD.services.mapillary = function() {
loadTiles('signs', url, projection, dimensions);
};
mapillary.loadViewer = function() {
loadViewer();
};
// partition viewport into `psize` x `psize` regions
function partitionViewport(psize, projection, dimensions) {
@@ -203,73 +278,87 @@ iD.services.mapillary = function() {
var detectionPackage = d.signs[0].package,
type = d.signs[0].type,
country = detectionPackage.split('_')[1];
return iD.services.mapillary.sign_defs[country][type];
};
mapillary.showThumbnail = function(imageKey, position) {
mapillary.showViewer = function() {
d3.select('#content')
.selectAll('.mapillary-wrap')
.classed('hidden', false)
.selectAll('.mly-wrapper')
.classed('active', true);
return mapillary;
};
mapillary.hideViewer = function() {
d3.select('#content')
.selectAll('.mapillary-wrap')
.classed('hidden', true)
.selectAll('.mly-wrapper')
.classed('active', false);
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('selected', false);
iD.services.mapillary.image = null;
return mapillary;
};
mapillary.setViewerLoading = function(loading) {
var cover = d3.select('#content')
.selectAll('.mly-wrapper .Cover');
cover.classed('CoverDone', !loading);
var button = cover.selectAll('.CoverButton')
.data(loading ? [0] : []);
button.enter()
.append('div')
.attr('class', 'CoverButton')
.append('div')
.attr('class', 'uil-ripple-css')
.append('div');
button.exit()
.remove();
return mapillary;
};
mapillary.updateViewer = function(imageKey, context) {
if (!iD.services.mapillary) return;
if (!imageKey) return;
var positionClass = {
'ar': (position !== 'left'),
'al': (position === 'left')
};
var thumbnail = d3.select('#content').selectAll('.mapillary-image')
.data([0]);
// Enter
var enter = thumbnail.enter().append('div')
.attr('class', 'mapillary-image ar');
enter.append('button')
.on('click', function () {
mapillary.hideThumbnail();
})
.append('div')
.call(iD.svg.Icon('#icon-close'));
enter.append('img');
enter.append('a')
.attr('class', 'link ar')
.attr('target', '_blank')
.call(iD.svg.Icon('#icon-out-link', 'inline'))
.append('span')
.text(t('mapillary.view_on_mapillary'));
// Update
thumbnail.selectAll('img')
.attr('src', urlThumb + imageKey + '/thumb-320.jpg');
var link = thumbnail.selectAll('a')
.attr('href', urlImage + imageKey);
if (position) {
thumbnail.classed(positionClass);
link.classed(positionClass);
if (!iD.services.mapillary.viewer) {
initViewer(imageKey, context);
} else {
iD.services.mapillary.viewer.moveToKey(imageKey);
}
thumbnail
.transition()
.duration(200)
.style('opacity', 1);
return mapillary;
};
mapillary.hideThumbnail = function() {
if (iD.services.mapillary) {
iD.services.mapillary.thumb = null;
}
d3.select('#content').selectAll('.mapillary-image')
.transition()
.duration(200)
.style('opacity', 0)
.remove();
};
mapillary.selectedThumbnail = function(d) {
mapillary.getSelectedImage = function() {
if (!iD.services.mapillary) return null;
if (!arguments.length) return iD.services.mapillary.thumb;
iD.services.mapillary.thumb = d;
return iD.services.mapillary.image;
};
mapillary.setSelectedImage = function(imageKey, fromClick) {
if (!iD.services.mapillary) return null;
iD.services.mapillary.image = imageKey;
if (fromClick) {
iD.services.mapillary.clicks.push(imageKey);
}
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('selected', function(d) { return d.key === imageKey; });
return mapillary;
};
mapillary.reset = function() {
@@ -285,7 +374,8 @@ iD.services.mapillary = function() {
signs: { inflight: {}, loaded: {}, rtree: rbush() }
};
iD.services.mapillary.thumb = null;
iD.services.mapillary.image = null;
iD.services.mapillary.clicks = [];
return mapillary;
};
+30 -58
View File
@@ -13,42 +13,22 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
function getMapillary() {
if (iD.services.mapillary && !_mapillary) {
_mapillary = iD.services.mapillary().on('loadedImages', debouncedRedraw);
_mapillary = iD.services.mapillary();
_mapillary.on('loadedImages', debouncedRedraw);
} else if (!iD.services.mapillary && _mapillary) {
_mapillary = null;
}
return _mapillary;
}
function showThumbnail(image) {
function showLayer() {
var mapillary = getMapillary();
if (!mapillary) return;
var thumb = mapillary.selectedThumbnail(),
posX = projection(image.loc)[0],
width = layer.dimensions()[0],
position = (posX < width / 2) ? 'right' : 'left';
if (thumb) {
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('selected', function(d) { return d.key === thumb.key; });
}
mapillary.showThumbnail(image.key, position);
}
function hideThumbnail() {
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('selected', false);
var mapillary = getMapillary();
if (mapillary) {
mapillary.hideThumbnail();
}
}
function showLayer() {
mapillary.loadViewer();
editOn();
layer
.style('opacity', 0)
.transition()
@@ -58,8 +38,13 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
}
function hideLayer() {
var mapillary = getMapillary();
if (mapillary) {
mapillary.hideViewer();
}
debouncedRedraw.cancel();
hideThumbnail();
layer
.transition()
.duration(500)
@@ -76,6 +61,18 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
layer.style('display', 'none');
}
function click(d) {
var mapillary = getMapillary();
if (!mapillary) return;
context.map().centerEase(d.loc);
mapillary
.setSelectedImage(d.key, true)
.updateViewer(d.key, context)
.showViewer();
}
function transform(d) {
var t = iD.svg.PointTransform(projection)(d);
if (d.ca) t += ' rotate(' + Math.floor(d.ca) + ',0,0)';
@@ -84,7 +81,8 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
function update() {
var mapillary = getMapillary(),
data = (mapillary ? mapillary.images(projection, layer.dimensions()) : []);
data = (mapillary ? mapillary.images(projection, layer.dimensions()) : []),
imageKey = mapillary ? mapillary.getSelectedImage() : null;
var markers = layer.selectAll('.viewfield-group')
.data(data, function(d) { return d.key; });
@@ -92,7 +90,9 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
// Enter
var enter = markers.enter()
.append('g')
.attr('class', 'viewfield-group');
.attr('class', 'viewfield-group')
.classed('selected', function(d) { return d.key === imageKey; })
.on('click', click);
enter.append('path')
.attr('class', 'viewfield')
@@ -123,35 +123,7 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
layer.enter()
.append('g')
.attr('class', 'layer-mapillary-images')
.style('display', enabled ? 'block' : 'none')
.on('click', function() { // deselect/select
var mapillary = getMapillary();
if (!mapillary) return;
var d = d3.event.target.__data__,
thumb = mapillary.selectedThumbnail();
if (thumb && thumb.key === d.key) {
hideThumbnail();
} else {
mapillary.selectedThumbnail(d);
context.map().centerEase(d.loc);
showThumbnail(d);
}
})
.on('mouseover', function() {
var mapillary = getMapillary();
if (!mapillary) return;
showThumbnail(d3.event.target.__data__);
})
.on('mouseout', function() {
var mapillary = getMapillary();
if (!mapillary) return;
var thumb = mapillary.selectedThumbnail();
if (thumb) {
showThumbnail(thumb);
} else {
hideThumbnail();
}
});
.style('display', enabled ? 'block' : 'none');
layer.exit()
.remove();
+17 -55
View File
@@ -20,33 +20,6 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
return _mapillary;
}
function showThumbnail(image) {
var mapillary = getMapillary();
if (!mapillary) return;
var thumb = mapillary.selectedThumbnail(),
posX = projection(image.loc)[0],
width = layer.dimensions()[0],
position = (posX < width / 2) ? 'right' : 'left';
if (thumb) {
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('selected', function(d) { return d.key === thumb.key; });
}
mapillary.showThumbnail(image.key, position);
}
function hideThumbnail() {
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('selected', false);
var mapillary = getMapillary();
if (mapillary) {
mapillary.hideThumbnail();
}
}
function showLayer() {
editOn();
debouncedRedraw();
@@ -54,7 +27,6 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
function hideLayer() {
debouncedRedraw.cancel();
hideThumbnail();
editOff();
}
@@ -67,9 +39,22 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
layer.style('display', 'none');
}
function click(d) {
var mapillary = getMapillary();
if (!mapillary) return;
context.map().centerEase(d.loc);
mapillary
.setSelectedImage(d.key, true)
.updateViewer(d.key, context)
.showViewer();
}
function update() {
var mapillary = getMapillary(),
data = (mapillary ? mapillary.signs(projection, layer.dimensions()) : []);
data = (mapillary ? mapillary.signs(projection, layer.dimensions()) : []),
imageKey = mapillary ? mapillary.getSelectedImage() : null;
var signs = layer.selectAll('.icon-sign')
.data(data, function(d) { return d.key; });
@@ -79,37 +64,14 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
.append('foreignObject')
.attr('class', 'icon-sign')
.attr('width', '32px') // for Firefox
.attr('height', '32px'); // for Firefox
.attr('height', '32px') // for Firefox
.classed('selected', function(d) { return d.key === imageKey; })
.on('click', click);
enter
.append('xhtml:body')
.html(mapillary.signHTML);
enter
.on('click', function(d) { // deselect/select
var mapillary = getMapillary();
if (!mapillary) return;
var thumb = mapillary.selectedThumbnail();
if (thumb && thumb.key === d.key) {
hideThumbnail();
} else {
mapillary.selectedThumbnail(d);
context.map().centerEase(d.loc);
showThumbnail(d);
}
})
.on('mouseover', showThumbnail)
.on('mouseout', function() {
var mapillary = getMapillary();
if (!mapillary) return;
var thumb = mapillary.selectedThumbnail();
if (thumb) {
showThumbnail(thumb);
} else {
hideThumbnail();
}
});
// Exit
signs.exit()
.remove();
+26 -2
View File
@@ -39,20 +39,35 @@ iD.ui.MapData = function(context) {
update();
}
function toggleLayer(which) {
function showsLayer(which) {
var layer = layers.layer(which);
if (layer) {
layer.enabled(!layer.enabled());
return layer.enabled();
}
return false;
}
function setLayer(which, enabled) {
var layer = layers.layer(which);
if (layer) {
layer.enabled(enabled);
update();
}
}
function toggleLayer(which) {
setLayer(which, !showsLayer(which));
}
function clickGpx() {
toggleLayer('gpx');
}
function clickMapillaryImages() {
toggleLayer('mapillary-images');
if (!showsLayer('mapillary-images')) {
setLayer('mapillary-signs', false);
}
}
function clickMapillarySigns() {
@@ -128,8 +143,13 @@ iD.ui.MapData = function(context) {
mapillarySignLayerItem
.classed('active', showsMapillarySigns)
.selectAll('input')
.property('disabled', !showsMapillaryImages)
.property('checked', showsMapillarySigns);
mapillarySignLayerItem
.selectAll('label')
.classed('deemphasize', !showsMapillaryImages);
// Exit
mapillaryImageLayerItem.exit()
.remove();
@@ -200,6 +220,10 @@ iD.ui.MapData = function(context) {
.property('disabled', !hasGpx)
.property('checked', showsGpx);
gpxLayerItem
.selectAll('label')
.classed('deemphasize', !hasGpx);
// Exit
gpxLayerItem.exit()
.remove();
File diff suppressed because one or more lines are too long
+5 -1
View File
@@ -9,7 +9,9 @@
},
"scripts": {
"postinstall": "rm -rf node_modules/.bin/phantomjs",
"test": "eslint js/id && phantomjs node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index.html dot && make && phantomjs node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index_packaged.html dot"
"test": "eslint js/id && phantomjs node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index.html dot && make && phantomjs node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index_packaged.html dot",
"start": "http-server .",
"lint": "eslint js/id"
},
"repository": {
"type": "git",
@@ -27,10 +29,12 @@
"eslint": "~1.10.3",
"glob": "~3.1.21",
"happen": "0.1.2",
"http-server": "^0.9.0",
"js-yaml": "~3.3.1",
"jsonschema": "~0.3.2",
"lodash-cli": "4.12.0",
"maki": "0.5.0",
"mapillary-js": "^1.3.0",
"minimist": "~1.2.0",
"mocha": "~2.3.4",
"mocha-phantomjs-core": "^1.3.0",
+12 -10
View File
@@ -360,26 +360,28 @@ describe('iD.services.mapillary', function() {
});
});
describe('#selectedThumbnail', function() {
it('sets thumbnail image', function() {
mapillary.selectedThumbnail('foo');
expect(iD.services.mapillary.thumb).to.eql('foo');
describe('#setSelectedImage', function() {
it('sets selected image', function() {
mapillary.setSelectedImage('foo');
expect(iD.services.mapillary.image).to.eql('foo');
});
});
it('gets thumbnail image', function() {
iD.services.mapillary.thumb = 'bar';
expect(mapillary.selectedThumbnail()).to.eql('bar');
describe('#getSelectedImage', function() {
it('gets selected image', function() {
iD.services.mapillary.image = 'bar';
expect(mapillary.getSelectedImage()).to.eql('bar');
});
});
describe('#reset', function() {
it('resets cache and thumbnail image', function() {
it('resets cache and image', function() {
iD.services.mapillary.cache.foo = 'bar';
iD.services.mapillary.thumb = 'bar';
iD.services.mapillary.image = 'bar';
mapillary.reset();
expect(iD.services.mapillary.cache).to.not.have.property('foo');
expect(iD.services.mapillary.thumb).to.be.null;
expect(iD.services.mapillary.image).to.be.null;
});
});