Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update map directional indicator based off of current bearing in MapillaryJS viewer #5161

Merged
merged 2 commits into from
Jul 23, 2018
Merged

Update map directional indicator based off of current bearing in MapillaryJS viewer #5161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aac394a
Update directional indicator based off of current bearing in Mapillar…
kratico Jul 18, 2018
c000da0
Leave directional indicator only for current image
kratico Jul 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions css/60_photos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,13 @@
.layer-mapillary-images .viewfield-group * {
fill: #55ff22;
}
.layer-mapillary-images .viewfield-group .viewfield {
display: none;
}
.layer-mapillary-images .viewfield-group.selected .viewfield,
.layer-mapillary-images .viewfield-group .viewfield.pano {
display: inline;
}
.layer-mapillary-images .sequence {
stroke: #55ff22;
}
Expand Down
7 changes: 6 additions & 1 deletion modules/services/mapillary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ var viewerjs = 'mapillary-js/mapillary.min.js';
var clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi';
var maxResults = 1000;
var tileZoom = 14;
var dispatch = d3_dispatch('loadedImages', 'loadedSigns');
var dispatch = d3_dispatch('loadedImages', 'loadedSigns', 'bearingChanged');
var _mlyFallback = false;
var _mlyCache;
var _mlyClicks;
Expand Down Expand Up @@ -511,6 +511,7 @@ export default {

_mlyViewer = new Mapillary.Viewer('mly', clientId, null, opts);
_mlyViewer.on('nodechanged', nodeChanged);
_mlyViewer.on('bearingchanged', bearingChanged);
_mlyViewer.moveToKey(imageKey)
.catch(function(e) { console.error('mly3', e); }); // eslint-disable-line no-console
}
Expand Down Expand Up @@ -545,6 +546,10 @@ export default {
that.selectImage(undefined, node.key, true);
}
}

function bearingChanged(e) {
dispatch.call('bearingChanged', undefined, e);
}
},


Expand Down
20 changes: 19 additions & 1 deletion modules/svg/mapillary_images.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import _throttle from 'lodash-es/throttle';
import _isNumber from 'lodash-es/isNumber';
import { select as d3_select } from 'd3-selection';
import { svgPath, svgPointTransform } from './index';
import { services } from '../services';
Expand All @@ -11,6 +12,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
var minViewfieldZoom = 18;
var layer = d3_select(null);
var _mapillary;
var viewerCompassAngle;


function init() {
Expand All @@ -24,6 +26,19 @@ export function svgMapillaryImages(projection, context, dispatch) {
if (services.mapillary && !_mapillary) {
_mapillary = services.mapillary;
_mapillary.event.on('loadedImages', throttledRedraw);
_mapillary.event.on('bearingChanged', function(e) {
viewerCompassAngle = e;

// avoid updating if the map is currently transformed
// e.g. during drags or easing.
if (context.map().isTransformed()) return;

layer.selectAll('.viewfield-group.selected')
.filter(function(d) {
return d.pano;
})
.attr('transform', transform);
});
} else if (!services.mapillary && _mapillary) {
_mapillary = null;
}
Expand Down Expand Up @@ -102,7 +117,9 @@ export function svgMapillaryImages(projection, context, dispatch) {

function transform(d) {
var t = svgPointTransform(projection)(d);
if (d.ca) {
if (d.pano && _isNumber(viewerCompassAngle)) {
t += ' rotate(' + Math.floor(viewerCompassAngle) + ',0,0)';
} else if (d.ca) {
t += ' rotate(' + Math.floor(d.ca) + ',0,0)';
}
return t;
Expand Down Expand Up @@ -184,6 +201,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
viewfields.enter() // viewfields may or may not be drawn...
.insert('path', 'circle') // but if they are, draw below the circles
.attr('class', 'viewfield')
.classed('pano', function() { return this.parentNode.__data__.pano; })
.attr('transform', 'scale(1.5,1.5),translate(-8, -13)')
.attr('d', viewfieldPath);

Expand Down