Improve midpoints rendering

css/map.css

@@ -84,7 +84,6 @@ svg[data-zoom="17"] g.vertex.shared .stroke {
     transform:scale(0.9, 0.9);
 }
 
-
 g.vertex.shared .fill {
     fill:#aaa;
 }
@@ -106,12 +105,30 @@ g.vertex.selected .shadow {
     fill-opacity: 0.7;
 }
 
-circle.midpoint {
+/* midpoints */
+
+g.midpoint .fill {
     fill:#aaa;
-    stroke:#333;
-    stroke-width:1;
+}
+g.midpoint .fill.hover {
+    fill:#fff;
+    stroke:#000;
 }
 
+g.midpoint .shadow {
+    fill: none;
+    pointer-events: all;
+    stroke-width: 10;
+    -webkit-transition: -webkit-transform 100ms linear;
+    transition: transform 100ms linear;
+    -moz-transition: fill 100ms linear;
+}
+g.midpoint .shadow.hover {
+    fill:#E96666;
+    fill-opacity: 0.3;
+}
+
+/* lines */
 
 path.line {
     stroke-linecap: round;

js/id/svg/midpoints.js

@@ -22,17 +22,25 @@ iD.svg.Midpoints = function(projection) {
             }
         }
 
-        var handles = surface.select('.layer-hit').selectAll('circle.midpoint')
+        var groups = surface.select('.layer-hit').selectAll('g.midpoint')
             .filter(filter)
             .data(midpoints, function (d) { return [d.way, d.index].join(","); });
 
-        handles.enter()
-            .append('circle')
-            .attr({ r: 3, 'class': 'midpoint' });
+        var group = groups.enter()
+            .insert('g', ':first-child')
+            .attr('class', 'midpoint');
 
-        handles.attr('transform', iD.svg.PointTransform(projection));
+        group.append('circle')
+            .attr('r', 7)
+            .attr('class', 'shadow');
 
-        handles.exit()
+        group.append('circle')
+            .attr('r', 3)
+            .attr('class', 'fill');
+
+        groups.attr('transform', iD.svg.PointTransform(projection));
+
+        groups.exit()
             .remove();
     };
 };