From e23448c25e52145dc228c5fdc53dd4e144f06af8 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@7thposition.com>
Date: Mon, 28 Jul 2014 23:11:52 -0400
Subject: [PATCH] Class midpoints to match parent way and adjust styles. After
 editing more with 1.5.3, I really dislike the more visible midpoints I added
 in afa1efd.  This commit gives the midpoints tag classes so that we can style
 only *certain* midpoints more visible (footpath, cycleway, bridleway, etc)
 and leave all the others dim.

---
 css/map.css            | 12 ++++++++++++
 js/id/svg/midpoints.js | 24 ++++++++++++++----------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/css/map.css b/css/map.css
index 706d0395a..ba026debf 100644
--- a/css/map.css
+++ b/css/map.css
@@ -90,6 +90,18 @@ g.vertex.shared .stroke {
 }
 
 g.midpoint .fill {
+    fill: #eee;
+    stroke: #444;
+    stroke-opacity: .6;
+    opacity: .7;
+}
+
+g.midpoint.tag-highway-pedestrian .fill,
+g.midpoint.tag-highway-steps .fill,
+g.midpoint.tag-highway-path .fill,
+g.midpoint.tag-highway-footway .fill,
+g.midpoint.tag-highway-cycleway .fill,
+g.midpoint.tag-highway-bridleway .fill {
     fill: #fff;
     stroke: #333;
     stroke-opacity: .8;
diff --git a/js/id/svg/midpoints.js b/js/id/svg/midpoints.js
index 5d30d67e7..86a6a12a1 100644
--- a/js/id/svg/midpoints.js
+++ b/js/id/svg/midpoints.js
@@ -71,25 +71,29 @@ iD.svg.Midpoints = function(projection, context) {
             .filter(midpointFilter)
             .data(_.values(midpoints), function(d) { return d.id; });
 
-        var group = groups.enter()
+        var enter = groups.enter()
             .insert('g', ':first-child')
             .attr('class', 'midpoint');
 
-        group.append('polygon')
+        enter.append('polygon')
             .attr('points', '-6,8 10,0 -6,-8')
             .attr('class', 'shadow');
 
-        group.append('polygon')
+        enter.append('polygon')
             .attr('points', '-3,4 5,0 -3,-4')
             .attr('class', 'fill');
 
-        groups.attr('transform', function(d) {
-            var translate = iD.svg.PointTransform(projection),
-                a = context.entity(d.edge[0]),
-                b = context.entity(d.edge[1]),
-                angle = Math.round(iD.geo.angle(a, b, projection) * (180 / Math.PI));
-            return translate(d) + ' rotate(' + angle + ')';
-        });
+        groups
+            .attr('transform', function(d) {
+                var translate = iD.svg.PointTransform(projection),
+                    a = context.entity(d.edge[0]),
+                    b = context.entity(d.edge[1]),
+                    angle = Math.round(iD.geo.angle(a, b, projection) * (180 / Math.PI));
+                return translate(d) + ' rotate(' + angle + ')';
+            })
+            .call(iD.svg.TagClasses().tags(
+                function(d) { return d.parents[0].tags; }
+            ));
 
         // Propagate data bindings.
         groups.select('polygon.shadow');