diff --git a/css/map.css b/css/map.css index a5d266bad..d74d9116c 100644 --- a/css/map.css +++ b/css/map.css @@ -10,20 +10,20 @@ g.point circle { fill:#fff; } -g.point.hover circle, -g.point.selected circle { - fill:#ffff00; - stroke-width:4; - stroke:#fff +g.point.hover circle.stroke, +g.point.selected circle.stroke { + fill:#333; + -webkit-transform:scale(1.2, 1.2); } /* interactive elements */ -g.vertex circle { +g.vertex circle.fill { fill:white; - stroke:#333; fill-opacity:1; - stroke-width:2; - stroke-opacity: 1; +} + +circle.stroke, +circle.fill { -webkit-transition: -webkit-transform 50ms linear; transition: transform 50ms linear; -moz-transition: stroke 50ms linear; @@ -32,14 +32,22 @@ g.vertex circle { transform:scale(1, 1); } +g.vertex circle.stroke { + fill:#333; +} + g.vertex.shared circle { fill:#aff; } -g.vertex.hover circle { +g.vertex.hover circle.fill { -webkit-transform:scale(2, 2); } +g.vertex.hover circle.stroke { + -webkit-transform:scale(1.8, 1.8); +} + g.vertex circle.selected { fill: #ffff00; } diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 863628bf6..254147f9b 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -151,10 +151,16 @@ iD.Map = function() { circles.exit().remove(); - circles.enter() + var cg = circles.enter() .insert('g', ':first-child') - .attr('class', 'node vertex') - .append('circle') + .attr('class', 'node vertex'); + + cg.append('circle') + .attr('class', 'stroke') + .attr('r', 6); + + cg.append('circle') + .attr('class', 'fill') .attr('r', 4); circles.attr('transform', pointTransform) @@ -205,20 +211,33 @@ iD.Map = function() { } function drawPoints(points, filter) { + var groups = g.hit.selectAll('g.point') .filter(filter) .data(points, key); + groups.exit().remove(); + var group = groups.enter().append('g') .attr('class', 'node point'); + group.append('circle') - .attr({ r: 10, cx: 8, cy: 8 }); + .attr('class', 'stroke') + .attr({ r: 10 }); + + group.append('circle') + .attr('class', 'fill') + .attr({ r: 10 }); + group.append('image') - .attr({ width: 16, height: 16 }); + .attr({ width: 16, height: 16 }) + .attr('transform', 'translate(-8, -8)'); + groups.attr('transform', function(d) { - var pt = projection(d.loc); - return 'translate(' + [~~pt[0], ~~pt[1]] + ') translate(-8, -8)'; - }); + var pt = projection(d.loc); + return 'translate(' + [~~pt[0], ~~pt[1]] + ')'; + }); + groups.classed('hover', classHover); groups.select('image').attr('xlink:href', iD.Style.pointImage); }