Use groups and fill/strokes for all points except for accuracy handles.

Fixes #278

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;
 }

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);
     }