From 2b799ddd7b55afc7cd127de3011fc05588212a10 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 23 Jan 2013 18:18:58 -0500
Subject: [PATCH] Improve point rendering

---
 css/map.css         | 22 ++++++++++++++++------
 js/id/svg/points.js |  8 ++++----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/css/map.css b/css/map.css
index 80916685d..3dd66afae 100644
--- a/css/map.css
+++ b/css/map.css
@@ -3,16 +3,26 @@ path {
     fill: none;
 }
 
+/* points */
+
 g.point circle {
     fill:#fff;
 }
 
-g.pointer circle.stroke,
-g.point.selected circle.stroke {
-    fill:#333;
-    -webkit-transform:scale(1.2, 1.2);
-    -moz-transform:scale(1.2, 1.2);
-    transform:scale(1.2, 1.2);
+g.point .shadow {
+    fill: none;
+    pointer-events: all;
+    -webkit-transition: -webkit-transform 100ms linear;
+    transition: transform 100ms linear;
+    -moz-transition: fill 100ms linear;
+}
+g.point.hover .shadow {
+    fill: #E96666;
+    fill-opacity: 0.3;
+}
+g.point.selected .shadow {
+    fill: #E96666;
+    fill-opacity: 0.7;
 }
 
 /* vertices */
diff --git a/js/id/svg/points.js b/js/id/svg/points.js
index 5862a5cb9..c788a61e9 100644
--- a/js/id/svg/points.js
+++ b/js/id/svg/points.js
@@ -33,12 +33,12 @@ iD.svg.Points = function(projection) {
             .attr('class', 'node point');
 
         group.append('circle')
-            .attr('class', 'stroke')
-            .attr({ r: 10 });
+            .attr('r', 13)
+            .attr('class', 'shadow');
 
         group.append('circle')
-            .attr('class', 'fill')
-            .attr({ r: 10 });
+            .attr('class', 'stroke')
+            .attr('r', 9);
 
         group.append('image')
             .attr({ width: 16, height: 16 })