Improve vertex rendering

css/map.css

@@ -7,7 +7,7 @@ g.point circle {
     fill:#fff;
 }
 
-g.point.hover circle.stroke,
+g.pointer circle.stroke,
 g.point.selected circle.stroke {
     fill:#333;
     -webkit-transform:scale(1.2, 1.2);
@@ -15,78 +15,103 @@ g.point.selected circle.stroke {
     transform:scale(1.2, 1.2);
 }
 
-/* interactive elements */
-g.vertex circle.fill {
+/* vertices */
+
+g.vertex .fill {
+    fill:white;
+}
+g.vertex .stroke {
+    stroke:#333;
+    stroke-width:2;
     fill:white;
-    fill-opacity:1;
 }
 
-circle.stroke,
-circle.fill {
-    -webkit-transition: -webkit-transform 50ms linear;
-    transition: transform 50ms linear;
-    -moz-transition: stroke 50ms linear;
-    -webkit-transform:scale(1, 1);
-    -moz-transform:scale(1, 1);
-    transform:scale(1, 1);
+svg[data-zoom="16"] g.vertex .shadow {
+    -webkit-transform:scale(0.8, 0.8);
+    -moz-transform:scale(0.8, 0.8);
+    transform:scale(0.8, 0.8);
 }
-
-svg[data-zoom="16"] g.vertex circle.stroke,
-svg[data-zoom="16"] g.vertex circle.fill {
+svg[data-zoom="16"] g.vertex .stroke,
+svg[data-zoom="16"] g.vertex .fill {
     -webkit-transform:scale(0.6, 0.6);
     -moz-transform:scale(0.6, 0.6);
     transform:scale(0.6, 0.6);
 }
 
-svg[data-zoom="17"] g.vertex circle.stroke,
-svg[data-zoom="17"] g.vertex circle.fill {
+svg[data-zoom="17"] g.vertex .shadow {
+    -webkit-transform:scale(0.9, 0.9);
+    -moz-transform:scale(0.9, 0.9);
+    transform:scale(0.9, 0.9);
+}
+svg[data-zoom="17"] g.vertex .stroke,
+svg[data-zoom="17"] g.vertex .fill {
     -webkit-transform:scale(0.7, 0.7);
     -moz-transform:scale(0.7, 0.7);
     transform:scale(0.7, 0.7);
 }
 
-g.vertex circle.stroke {
-    fill:#333;
+g.vertex.shared .shadow {
+    -webkit-transform:scale(1.2, 1.2);
+    -moz-transform:scale(1.2, 1.2);
+    transform:scale(1.2, 1.2);
+}
+g.vertex.shared .fill,
+g.vertex.shared .stroke {
+    -webkit-transform:scale(1.1, 1.1);
+    -moz-transform:scale(1.1, 1.1);
+    transform:scale(1.1, 1.1);
+}
+svg[data-zoom="16"] g.vertex.shared .shadow {
+    -webkit-transform:scale(0.9, 0.9);
+    -moz-transform:scale(0.9, 0.9);
+    transform:scale(0.9, 0.9);
+}
+svg[data-zoom="16"] g.vertex.shared .fill,
+svg[data-zoom="16"] g.vertex.shared .stroke {
+    -webkit-transform:scale(0.8, 0.8);
+    -moz-transform:scale(0.8, 0.8);
+    transform:scale(0.8, 0.8);
+}
+svg[data-zoom="17"] g.vertex.shared .shadow {
+    -webkit-transform:scale(1, 1);
+    -moz-transform:scale(1, 1);
+    transform:scale(1, 1);
+}
+svg[data-zoom="17"] g.vertex.shared .fill,
+svg[data-zoom="17"] g.vertex.shared .stroke {
+    -webkit-transform:scale(0.9, 0.9);
+    -moz-transform:scale(0.9, 0.9);
+    transform:scale(0.9, 0.9);
 }
 
-g.vertex.shared circle.fill {
-    fill:#aff;
-}
-g.vertex.shared circle.stroke {
-    fill:#044;
+
+g.vertex.shared .fill {
+    fill:#aaa;
 }
 
-g.vertex.hover circle.fill {
-    -webkit-transform:scale(1.5, 1.5);
-    -moz-transform:scale(1.5, 1.5);
-    transform:scale(1.5, 1.5);
+g.vertex .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.vertex.hover circle.stroke {
-    -webkit-transform:scale(1.4, 1.4);
-    -moz-transform:scale(1.4, 1.4);
-    transform:scale(1.4, 1.4);
-}
-
-g.vertex circle.selected.fill {
-    fill: #ffff00;
-}
-g.vertex circle.selected.stroke {
-    fill: #38380A;
+g.vertex.hover .shadow {
+    fill: #E96666;
+    fill-opacity: 0.3;
+}    
+g.vertex.selected .shadow {
+    fill: #E96666;
+    fill-opacity: 0.7;
 }
 
 circle.midpoint {
     fill:#aaa;
     stroke:#333;
-    fill-opacity:1;
     stroke-width:1;
 }
 
-circle.teaser-point {
-    stroke-width: 2;
-    stroke:#1DCAFF;
-    fill:#D3F5FF;
-}
 
 path.line {
     stroke-linecap: round;

js/id/svg/vertices.js

@@ -22,12 +22,16 @@ iD.svg.Vertices = function(projection) {
             .attr('class', 'node vertex');
 
         group.append('circle')
-            .attr('class', 'stroke')
-            .attr('r', 6);
+            .attr('r', 10)
+            .attr('class', 'shadow');
 
         group.append('circle')
-            .attr('class', 'fill')
-            .attr('r', 4);
+            .attr('r', 6)
+            .attr('class', 'stroke');
+
+        group.append('circle')
+            .attr('r', 3)
+            .attr('class', 'fill');
 
         groups.attr('transform', iD.svg.PointTransform(projection))
             .call(iD.svg.TagClasses())