Skip to content

Commit

Permalink
Adding mapillaryJS
Browse files Browse the repository at this point in the history
  • Loading branch information
@kepta
kepta committed May 23, 2016
1 parent 8782c14 commit 7384480
Show file tree
Hide file tree
Showing 9 changed files with 422 additions and 83 deletions.
3 changes: 2 additions & 1 deletion .eslintrc
View file
Expand Up @@ -63,7 +63,8 @@
"osmAuth": false,
"sexagesimal": false,
"toGeoJSON": false,
"marked": false
"marked": false,
"Mapillary": false,
},

"env": {
Expand Down
2 changes: 1 addition & 1 deletion Makefile
View file
Expand Up @@ -317,4 +317,4 @@ d3:
@echo 'd3 rebuilt. Please reapply 7e2485d, 4da529f, and 223974d'

lodash:
node_modules/.bin/lodash --development --output js/lib/lodash.js include="includes,toPairs,assign,bind,chunk,clone,compact,debounce,difference,each,every,extend,filter,find,first,forEach,forOwn,groupBy,indexOf,intersection,isEmpty,isEqual,isFunction,keys,last,map,omit,reject,some,throttle,union,uniq,values,without,flatten,value,chain,cloneDeep,merge,pick,reduce" exports="global,node"
node_modules/.bin/lodash --development --output js/lib/lodash.js include="includes,remove,pull,toPairs,assign,bind,chunk,clone,compact,debounce,difference,each,every,extend,filter,find,first,forEach,forOwn,groupBy,indexOf,intersection,isEmpty,isEqual,isFunction,keys,last,map,omit,reject,some,throttle,union,uniq,values,without,flatten,value,chain,cloneDeep,merge,pick,reduce" exports="global,node"
24 changes: 15 additions & 9 deletions css/app.css
View file
Expand Up @@ -669,21 +669,18 @@ button.save.has-count .count::before {
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;
display: none;
}

.mapillary-image img.active {
display: block;
}


.mapillary-image.hidden {
visibility: hidden;
}
Expand All @@ -698,6 +695,15 @@ button.save.has-count .count::before {
position: absolute;
right: 0;
top: 0;
z-index: 500;
}

.mly-wrapper {
visibility: hidden;
}

.mly-wrapper.active {
visibility: visible;
}

.feature-list-pane .inspector-body {
Expand Down
16 changes: 16 additions & 0 deletions css/map.css
View file
Expand Up @@ -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 {
Expand Down
100 changes: 54 additions & 46 deletions js/id/services/mapillary.js
View file
Expand Up @@ -2,9 +2,9 @@ iD.services.mapillary = function() {
var mapillary = {},
dispatch = d3.dispatch('loadedImages', 'loadedSigns'),
apibase = 'https://a.mapillary.com/v2/',
urlThumb = 'https://d1cuyjsrcm0gby.cloudfront.net/',
clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi',
maxResults = 1000,
mly, thumbnail,
tileZoom = 14;


Expand Down Expand Up @@ -205,70 +205,78 @@ iD.services.mapillary = function() {
return iD.services.mapillary.sign_defs[country][type];
};

mapillary.showThumbnail = function(imageKey, position) {
mapillary.showThumbnail = function(imageKey, position, interactive) {
if (!imageKey) return;

var positionClass = {
'ar': (position !== 'left'),
'al': (position === 'left')
};

if(thumbnail === undefined) {

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('div')
.attr('class', 'mly-wrapper')
.attr('id', 'mly');
} else {
var pos = 'ar';
if(positionClass.al) {
pos = 'al';
}
var im = d3.select('#content').selectAll('.mapillary-image');
im
.transition()
.duration(200)
.style('opacity', 100)
.attr('class','mapillary-image ' + pos);
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('div')
.attr('class', 'mly-wrapper inactive')
.attr('id', 'mly');


// Update
thumbnail.selectAll('img')
.attr('src', urlThumb + imageKey + '/thumb-320.jpg')
.classed('active', !interactive);

thumbnail.selectAll('.mly-wrapper')
.classed('active', interactive);

if (position) {
thumbnail.classed(positionClass);
}
if(mly === undefined) {
mly = new Mapillary.Viewer('mly', 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi',imageKey, {

if(!iD.services.mapillary.viewer) {
iD.services.mapillary.viewer = new Mapillary.Viewer('mly', clientId, imageKey, {
'imagePlane': false,
'image': true,
'cover': false,
'debug': true
'debug': false
});
}
mly.moveToKey(imageKey);
mly.on('nodechanged', function (node) {
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('selected', function (d) {
return d.key === node.key;
});
});
if (interactive) {
iD.services.mapillary.viewer.moveToKey(imageKey);
}

thumbnail
.classed('hidden', false);
};

mapillary.hideThumbnail = function() {
if (iD.services.mapillary && iD.services.mapillary.thumb != null) {
d3.select('#content').selectAll('.mapillary-image')
.transition()
.duration(200)
.style('opacity', 0);
if (iD.services.mapillary) {
iD.services.mapillary.thumb = null;
}
d3.select('#content').selectAll('.mapillary-image')
.classed('hidden', true);
};

mapillary.killThumbnail = function() {
if (iD.services.mapillary) {
iD.services.mapillary.thumb = null;
iD.services.mapillary.viewer = null;
}
d3.select('#content').selectAll('.mapillary-image')
.remove();
};

mapillary.selectedThumbnail = function(d) {
Expand Down
79 changes: 66 additions & 13 deletions js/id/svg/mapillary_images.js
View file
Expand Up @@ -2,7 +2,7 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
var debouncedRedraw = _.debounce(function () { dispatch.change(); }, 1000),
minZoom = 12,
layer = d3.select(null),
_mapillary;
_mapillary, _viewer, _mlyLoading, pendingImg;


function init() {
Expand All @@ -20,7 +20,15 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
return _mapillary;
}

function showThumbnail(image) {
function showLoading(image) {
var mapillary = getMapillary();
if (!mapillary) return;
pendingImg = image;
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('loading', function(d) { return d.key === image.key; });
}

function showThumbnail(image, interactive) {
var mapillary = getMapillary();
if (!mapillary) return;

Expand All @@ -34,16 +42,37 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
.classed('selected', function(d) { return d.key === thumb.key; });
}

mapillary.showThumbnail(image.key, position);
mapillary.showThumbnail(image.key, position, interactive);

if (!_viewer && interactive) {
_viewer = iD.services.mapillary.viewer;
_viewer.on('nodechanged', viewerNavHandler);

// To avoid edge case, when network is too slow and user clicks on multiple
// viewfield-groups.
_viewer.on('loadingchanged', function(s) {
if (!s && pendingImg) {
d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('loading', function() { return false; });
mapillary.selectedThumbnail(pendingImg);
context.map().centerEase(pendingImg.loc);
showThumbnail(pendingImg, true);
pendingImg = null;
}
_mlyLoading = s;
});
}
}

function hideThumbnail() {
function removeThumbnail(permanent) {

d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('selected', false);

var mapillary = getMapillary();
if (mapillary) {
mapillary.hideThumbnail();
if (permanent) return mapillary.killThumbnail();
return mapillary.hideThumbnail();
}
}

Expand All @@ -59,7 +88,15 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {

function hideLayer() {
debouncedRedraw.cancel();
hideThumbnail();
removeThumbnail(true);
if (_viewer) {
_viewer.off('nodechanged');
_viewer.off('loadingchanged');
}
_mlyLoading = null;
pendingImg = null;
_viewer = null;

layer
.transition()
.duration(500)
Expand Down Expand Up @@ -114,9 +151,6 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
}

function drawImages(selection) {
selection.selectAll('.mapillary-js')
.data([0]);

var enabled = iD.svg.MapillaryImages.enabled,
mapillary = getMapillary();

Expand All @@ -133,11 +167,13 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
var d = d3.event.target.__data__,
thumb = mapillary.selectedThumbnail();
if (thumb && thumb.key === d.key) {
hideThumbnail();
removeThumbnail();
} else if (_mlyLoading) {
showLoading(d);
} else {
mapillary.selectedThumbnail(d);
context.map().centerEase(d.loc);
showThumbnail(d);
showThumbnail(d, true);
}
})
.on('mouseover', function() {
Expand All @@ -150,9 +186,9 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
if (!mapillary) return;
var thumb = mapillary.selectedThumbnail();
if (thumb) {
showThumbnail(thumb);
showThumbnail(thumb, true);
} else {
hideThumbnail();
removeThumbnail();
}
});

Expand All @@ -170,6 +206,23 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
}
}

function viewerNavHandler(node) {
var mapillary = getMapillary();
if (!mapillary) return;

var thumb = mapillary.selectedThumbnail();
if (thumb.key === node.key) return;

d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
.classed('selected', function(d) {
if (d.key === node.key) {
mapillary.selectedThumbnail(d);
context.map().centerEase(d.loc);
return true;
}
});
}

drawImages.enabled = function(_) {
if (!arguments.length) return iD.svg.MapillaryImages.enabled;
iD.svg.MapillaryImages.enabled = _;
Expand Down

0 comments on commit 7384480

Please sign in to comment.