diff --git a/css/app.css b/css/app.css index 432cbee0c..010950a47 100644 --- a/css/app.css +++ b/css/app.css @@ -740,14 +740,13 @@ a:hover .icon.out-link { background-position: -500px -14px;} background-color: black; position: absolute; bottom: 0; - width: 100%; - height: 20px; - text-align: center; + padding: 2px 4px; + right: 0; } #mapillaryImage img { width: 100%; - heigth: auto; + height: auto; display: block; } diff --git a/css/map.css b/css/map.css index d88b460ae..0e20660a8 100644 --- a/css/map.css +++ b/css/map.css @@ -1141,43 +1141,29 @@ text.gpx { } /* Mapillary Sequences */ -.sequence { - stroke: red; - stroke-width: 4; - fill: none; - pointer-events: visibleStroke; + +g.image.point { + cursor: pointer; /* Opera */ + cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */ } -g.image.point.hover { - stroke-opacity: 0.3; -} - -g.image.point{ - stroke: orange; - stroke-width: 2; - fill: none; - cursor: pointer; /* Opera */ - cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */ -} - -g.image.point path{ +g.image.point path, +g.image.point circle { stroke-width: 3; - stroke: orange; - fill: orange; - /*marker-end:url(#mapillary_direction_arrow);*/ + stroke: #ffc600; + fill: #ffc600; } -g.image.point circle{ - fill: orange; - fill-opacity: 0.3; +g.image.point circle { + fill-opacity: 0.3; + stroke-width: 4; } -g.image.point.selected circle{ - fill: yellow; - fill-opacity: 0.9; -} - -#mapillary_direction_arrow { - fill: orange; +g.image.point.selected circle, +g.image.point.selected path, +g.image.point:hover circle, +g.image.point:hover path { + stroke: #ff9900; + fill: #ff9900; } /* Modes */ diff --git a/js/id/modes/select_image.js b/js/id/modes/select_image.js index 483ca0d21..9ddda13c4 100644 --- a/js/id/modes/select_image.js +++ b/js/id/modes/select_image.js @@ -7,42 +7,35 @@ iD.modes.SelectImage = function (context) { key: 'm' }, imageView, currentImage; - var behaviors = [ - ]; - function click() { var datum = d3.event.target.__data__; if (isImage(datum)) { - if (currentImage) { - context.surface().selectAll('.key_' + currentImage.properties.key) - .classed('selected', false); - } - if(currentImage === datum) { - context.surface().selectAll('.key_' + currentImage.properties.key) + if (currentImage === datum) { + context.surface().selectAll('.image.point') .classed('selected', false); currentImage = undefined; - } else { currentImage = datum; - context.surface().selectAll('.key_' + currentImage.properties.key) - .classed('selected', true); + context.surface().selectAll('.image.point') + .classed('selected', function(d) { + return d === datum; + }); + imageView.show(currentImage); } - imageView.show(currentImage); } } function isImage(datum) { - return datum !== undefined && datum && datum.properties !== undefined && datum.properties.entityType === 'image'; + return datum && + datum.properties !== undefined && + datum.properties.entityType === 'image'; } mode.enter = function () { -// console.log('selectImage.enter'); context.map().enableSequences(true); - context.container().select('#select_image_checkbox') + context.container() + .select('#select_image_checkbox') .attr('checked','checked'); - behaviors.forEach(function (behavior) { - context.install(behavior); - }); // Get focus on the body. if (document.activeElement && document.activeElement.blur) { @@ -51,9 +44,9 @@ iD.modes.SelectImage = function (context) { imageView = context.imageView(); imageView.showEmpty(); + context.surface() - .on('click.image', click); - context.surface() + .on('click.image', click) .on('mouseover.image', function () { var datum = d3.event.target.__data__; if (isImage(datum)) { @@ -63,7 +56,7 @@ iD.modes.SelectImage = function (context) { .on('mouseout.image', function () { var datum = d3.event.target.__data__; if (isImage(datum)) { - if(currentImage) { + if (currentImage) { imageView.show(currentImage); } else { imageView.showEmpty(); @@ -75,17 +68,13 @@ iD.modes.SelectImage = function (context) { mode.exit = function () { context.map().enableSequences(false); context.container().select('#select_image_checkbox') - .attr('checked',null); + .attr('checked', null); - if(!currentImage) { + if (!currentImage) { context.container() .select('#mapillaryImage') .classed('hidden', true); - } - behaviors.forEach(function (behavior) { - context.uninstall(behavior); - }); context.surface().select('defs').selectAll('marker.arrow') .remove(); @@ -93,7 +82,6 @@ iD.modes.SelectImage = function (context) { .remove(); context.surface().select('.layer-hit').selectAll('g.sequence') .remove(); - }; return mode; diff --git a/js/id/svg/sequences.js b/js/id/svg/sequences.js index fef3a41ff..ec5d7bfc9 100644 --- a/js/id/svg/sequences.js +++ b/js/id/svg/sequences.js @@ -1,7 +1,6 @@ iD.svg.Sequences = function (projection, context) { var surface, enabled = false; - function drawSequences(_surface) { surface = _surface; @@ -19,6 +18,7 @@ iD.svg.Sequences = function (projection, context) { hit_layer.selectAll('g.sequence').remove(); } }; + drawSequences.enable = function (enable) { enabled = enable; drawSequences(surface); @@ -28,28 +28,19 @@ iD.svg.Sequences = function (projection, context) { var imagePoints = drawSequences.images(sequences, 1000); var images = surface.select('.layer-hit').selectAll('g.image') .data(imagePoints); - + var pointTransform = iD.svg.PointTransform(context.projection); var image = images.enter() .append('g') - .attr('class', function (d) { - return 'image point key_' + d.properties.key; - }) + .attr('class', 'image point') .attr('transform', function (d) { - var translate = iD.svg.PointTransform(context.projection)({loc: d.geometry.coordinates}); + var translate = pointTransform({ loc: d.geometry.coordinates }); if (d.properties.ca) { return translate + 'rotate(' + d.properties.ca + ',0,0)'; } return translate; - }) - .on('mouseover', function (d) { - surface.select('.key_' + d.properties.key).classed('hover', true); - }) - .on('mouseout', function (d) { - surface.select('.key_' + d.properties.key).classed('hover', false); }); - image.append('path') .call(drawSequences.markerPath, 'stroke'); @@ -62,14 +53,15 @@ iD.svg.Sequences = function (projection, context) { // sets the data (point entity) on the element images.select('.shadow'); images.select('.stroke'); - }; drawSequences.reloadMapillaryImages = function () { var extent = context.map().extent(); - d3.json('https://mapillary-read-api.herokuapp.com/v1/s/search?min-lat=' + extent[0][1] + '&max-lat=' + extent[1][1] + '&min-lon=' + extent[0][0] + '&max-lon=' + extent[1][0] + '&max-results=100&geojson=true', function (error, data) { + d3.json('https://mapillary-read-api.herokuapp.com/v1/s/search?min-lat=' + + extent[0][1] + '&max-lat=' + extent[1][1] + '&min-lon=' + + extent[0][0] + '&max-lon=' + extent[1][0] + + '&max-results=100&geojson=true', function (error, data) { drawSequences.plotSequences(context.surface(), context, data); - }); }; @@ -104,6 +96,5 @@ iD.svg.Sequences = function (projection, context) { .attr('d', 'M 0,-10 l 0,-20 l -5,20 l 10,0 l -5,-20'); }; - return drawSequences; }; diff --git a/js/id/ui/background.js b/js/id/ui/background.js index dd5d2535d..82065effc 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -326,20 +326,17 @@ iD.ui.Background = function(context) { .attr('type', 'checkbox') .attr('id', 'select_image_checkbox') .on('change', function(){ - if(this.checked) { + if (this.checked) { context.enter(iD.modes.SelectImage(context)); } else { context.enter(iD.modes.Browse(context)); } update(); - }); mapillaryLabel.append('span') .text(t('mapillary.title')); - - var adjustments = content.append('div') .attr('class', 'adjustments'); @@ -390,7 +387,6 @@ iD.ui.Background = function(context) { context.enter(iD.modes.SelectImage(context)); }); - d3.select(document) .call(keybinding); diff --git a/js/id/ui/image_view.js b/js/id/ui/image_view.js index 36adccd79..b16db05d0 100644 --- a/js/id/ui/image_view.js +++ b/js/id/ui/image_view.js @@ -1,18 +1,22 @@ iD.ui.ImageView = function (context) { - function imageView() { - } + function imageView() { } imageView.showEmpty = function () { - var imageWrapper = context.container().select('#mapillaryImage'); + var imageWrapper = context.container() + .select('#mapillaryImage'); + imageWrapper.html(''); + var content = imageWrapper .append('div'); + content.append('div') .on('click', function(){ imageWrapper.classed('hidden', true); }); - content.append('div').html(marked(t('mapillary.no_image_found'))); + content.append('div') + .html(marked(t('mapillary.no_image_found'))); }; imageView.show = function (imageToShow) { @@ -27,9 +31,15 @@ iD.ui.ImageView = function (context) { .on('click', function(){ imageWrapper.classed('hidden', true); }); - content.append('div').html('
View on Mapillary' - .replace(/KEY/g, key)); - + var wrap = content.append('div'); + wrap.append('div') + .append('img') + .attr('src', 'https://d1cuyjsrcm0gby.cloudfront.net/KEY/thumb-320.jpg'.replace('KEY', key)); + wrap.append('a') + .text(t('mapillary.view_on_mapillary')) + .attr('class', 'link') + .attr('target', '_blank') + .attr('src', 'http://mapillary.com/map/im/KEY'.replace('KEY', key)); }; return imageView;