From 26f8849c3a191130e9fa101289442b301b601b03 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@7thposition.com>
Date: Wed, 16 Jul 2014 00:30:21 -0400
Subject: [PATCH 1/2] render triangular midpoints to show direction of way
 #1085

---
 js/id/svg/midpoints.js     | 20 +++++++++++++-------
 test/spec/svg/midpoints.js |  2 ++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/js/id/svg/midpoints.js b/js/id/svg/midpoints.js
index d743565ad..bad753409 100644
--- a/js/id/svg/midpoints.js
+++ b/js/id/svg/midpoints.js
@@ -75,19 +75,25 @@ iD.svg.Midpoints = function(projection, context) {
             .insert('g', ':first-child')
             .attr('class', 'midpoint');
 
-        group.append('circle')
-            .attr('r', 7)
+        group.append('polygon')
+            .attr('points', '-6,8 8,0 -6,-8')
             .attr('class', 'shadow');
 
-        group.append('circle')
-            .attr('r', 3)
+        group.append('polygon')
+            .attr('points', '-3,4 4,0 -3,-4')
             .attr('class', 'fill');
 
-        groups.attr('transform', iD.svg.PointTransform(projection));
+        groups.attr('transform', function(d) {
+            var translate = iD.svg.PointTransform(projection),
+                a = context.entity(d.edge[0]),
+                b = context.entity(d.edge[1]),
+                angle = iD.geo.angle(a, b, projection) * (180 / Math.PI);
+            return translate(d) + ' rotate(' + angle + ')';
+        });
 
         // Propagate data bindings.
-        groups.select('circle.shadow');
-        groups.select('circle.fill');
+        groups.select('polygon.shadow');
+        groups.select('polygon.fill');
 
         groups.exit()
             .remove();
diff --git a/test/spec/svg/midpoints.js b/test/spec/svg/midpoints.js
index 55634d170..eaef0d16e 100644
--- a/test/spec/svg/midpoints.js
+++ b/test/spec/svg/midpoints.js
@@ -18,6 +18,7 @@ describe("iD.svg.Midpoints", function () {
             extent = iD.geo.Extent([0, 0], [100, 100]);
 
         context.selectedIDs = function() { return [line.id]; };
+        context.entity = function(id) { return graph.entity(id); };
         surface.call(iD.svg.Midpoints(projection, context), graph, [line], filter, extent);
 
         expect(surface.select('.midpoint').datum().loc).to.eql([25, 0]);
@@ -57,6 +58,7 @@ describe("iD.svg.Midpoints", function () {
             extent = iD.geo.Extent([0, 0], [100, 100]);
 
         context.selectedIDs = function() { return [line.id]; };
+        context.entity = function(id) { return graph.entity(id); };
         surface.call(iD.svg.Midpoints(projection, context), graph, [line], filter, extent);
 
         expect(surface.select('.midpoint').datum().loc).to.eql([100, 0]);

From afa1efd922d0f20d72817aa35953f9acf0d8a10f Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@7thposition.com>
Date: Wed, 16 Jul 2014 23:44:41 -0400
Subject: [PATCH 2/2] Adjust midpoint opacity for more visibility (#1448) (esp.
 on sidewalks, footpaths, bridlepaths, etc)

---
 css/map.css            | 8 ++++----
 js/id/svg/midpoints.js | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/css/map.css b/css/map.css
index 5a7bc4e78..706d0395a 100644
--- a/css/map.css
+++ b/css/map.css
@@ -90,10 +90,10 @@ g.vertex.shared .stroke {
 }
 
 g.midpoint .fill {
-    fill: #ddd;
-    stroke: black;
-    stroke-opacity: .5;
-    opacity: .5;
+    fill: #fff;
+    stroke: #333;
+    stroke-opacity: .8;
+    opacity: .8;
 }
 
 g.vertex .shadow,
diff --git a/js/id/svg/midpoints.js b/js/id/svg/midpoints.js
index bad753409..5d30d67e7 100644
--- a/js/id/svg/midpoints.js
+++ b/js/id/svg/midpoints.js
@@ -76,18 +76,18 @@ iD.svg.Midpoints = function(projection, context) {
             .attr('class', 'midpoint');
 
         group.append('polygon')
-            .attr('points', '-6,8 8,0 -6,-8')
+            .attr('points', '-6,8 10,0 -6,-8')
             .attr('class', 'shadow');
 
         group.append('polygon')
-            .attr('points', '-3,4 4,0 -3,-4')
+            .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 = iD.geo.angle(a, b, projection) * (180 / Math.PI);
+                angle = Math.round(iD.geo.angle(a, b, projection) * (180 / Math.PI));
             return translate(d) + ' rotate(' + angle + ')';
         });