From 6aba27c84a6b64c37e7fa1b9f3e864d4c49be39c Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Fri, 8 Dec 2017 14:29:56 -0500
Subject: [PATCH] Display directional vertex with a viewfield, not an arrow

---
 css/20_map.css          |  4 +--
 modules/svg/defs.js     | 68 ++++++++++++++++++-----------------------
 modules/svg/vertices.js | 12 ++++----
 3 files changed, 37 insertions(+), 47 deletions(-)

diff --git a/css/20_map.css b/css/20_map.css
index 1554ce011..6d3a39037 100644
--- a/css/20_map.css
+++ b/css/20_map.css
@@ -180,8 +180,8 @@ text {
     fill: #002F35;
 }
 
-.directiongroup path.directional,
-.onewaygroup path.oneway {
+.onewaygroup path.oneway,
+.viewfieldgroup path.viewfield {
     stroke-width: 6px;
 }
 
diff --git a/modules/svg/defs.js b/modules/svg/defs.js
index 25d2c8db1..6f4353769 100644
--- a/modules/svg/defs.js
+++ b/modules/svg/defs.js
@@ -26,8 +26,9 @@ export function svgDefs(context) {
     return function drawDefs(selection) {
         var defs = selection.append('defs');
 
-        // oneway marker
-        defs.append('marker')
+        // markers
+        defs
+            .append('marker')
             .attr('id', 'oneway-marker')
             .attr('viewBox', '0 0 10 5')
             .attr('refX', 5)
@@ -36,7 +37,6 @@ export function svgDefs(context) {
             .attr('markerHeight', 2)
             .attr('markerUnits', 'strokeWidth')
             .attr('orient', 'auto')
-
             .append('path')
             .attr('class', 'oneway')
             .attr('d', 'M 5,3 L 0,3 L 0,2 L 5,2 L 5,0 L 10,2.5 L 5,5 z')
@@ -44,21 +44,22 @@ export function svgDefs(context) {
             .attr('fill', '#000')
             .attr('opacity', '0.75');
 
-        defs.append('marker')
-            .attr('id', 'directional-marker')
-            .attr('viewBox', '0 0 15 5')
-            .attr('refX', 5.5)
-            .attr('refY', 2.5)
-            .attr('markerWidth', 7)
-            .attr('markerHeight', 7)
+        defs
+            .append('marker')
+            .attr('id', 'viewfield-marker')
+            .attr('viewBox', '0 0 16 16')
+            .attr('refX', 8)
+            .attr('refY', 16)
+            .attr('markerWidth', 4)
+            .attr('markerHeight', 4)
             .attr('markerUnits', 'strokeWidth')
             .attr('orient', 'auto')
-
             .append('path')
-            .attr('class', 'directional')
-            .attr('d', 'M 10,2.5 L 9,0 L 14,2.5 L 9,5 z')
-            .attr('stroke', '#fff')
+            .attr('class', 'viewfield')
+            .attr('d', 'M 6,14 C 8,13.4 8,13.4 10,14 L 16,3 C 12,0 4,0 0,3 z')
             .attr('fill', '#333')
+            .attr('fill-opacity', '0.75')
+            .attr('stroke', '#fff')
             .attr('stroke-width', '0.5px')
             .attr('stroke-opacity', '0.75');
 
@@ -77,23 +78,21 @@ export function svgDefs(context) {
             ])
             .enter()
             .append('pattern')
-            .attr('id', function (d) {
-                return 'pattern-' + d[0];
-            })
+            .attr('id', function (d) { return 'pattern-' + d[0]; })
             .attr('width', 32)
             .attr('height', 32)
             .attr('patternUnits', 'userSpaceOnUse');
 
-        patterns.append('rect')
+        patterns
+            .append('rect')
             .attr('x', 0)
             .attr('y', 0)
             .attr('width', 32)
             .attr('height', 32)
-            .attr('class', function (d) {
-                    return 'pattern-color-' + d[0];
-            });
+            .attr('class', function (d) { return 'pattern-color-' + d[0]; });
 
-        patterns.append('image')
+        patterns
+            .append('image')
             .attr('x', 0)
             .attr('y', 0)
             .attr('width', 32)
@@ -103,29 +102,20 @@ export function svgDefs(context) {
             });
 
         // clip paths
-        defs.selectAll()
+        defs.selectAll('clipPath')
             .data([12, 18, 20, 32, 45])
             .enter()
             .append('clipPath')
-            .attr('id', function (d) {
-                return 'clip-square-' + d;
-            })
+            .attr('id', function (d) { return 'clip-square-' + d; })
             .append('rect')
             .attr('x', 0)
             .attr('y', 0)
-            .attr('width', function (d) {
-                return d;
-            })
-            .attr('height', function (d) {
-                return d;
-            });
+            .attr('width', function (d) { return d; })
+            .attr('height', function (d) { return d; });
 
-        defs.call(SVGSpriteDefinition(
-            'iD-sprite',
-            context.imagePath('iD-sprite.svg')));
-
-        defs.call(SVGSpriteDefinition(
-            'maki-sprite',
-            context.imagePath('maki-sprite.svg')));
+        // symbol spritesheets
+        defs
+            .call(SVGSpriteDefinition('iD-sprite', context.imagePath('iD-sprite.svg')))
+            .call(SVGSpriteDefinition('maki-sprite', context.imagePath('maki-sprite.svg')));
     };
 }
diff --git a/modules/svg/vertices.js b/modules/svg/vertices.js
index 01544165c..fa449fdc2 100644
--- a/modules/svg/vertices.js
+++ b/modules/svg/vertices.js
@@ -152,19 +152,19 @@ export function svgVertices(projection, context) {
             .append('g')
             .attr('class', function(d) { return 'node vertex ' + klass + ' ' + d.id; });
 
-        // Directional vertices get arrows
+        // Directional vertices get viewfields
         var directionsEnter = enter.filter(function(d) { return getDirections(d); })
             .append('g')
-            .each(setClass('directiongroup'));
+            .each(setClass('viewfieldgroup'));
 
-        directionsEnter.selectAll('.directional')
+        directionsEnter.selectAll('.viewfield')
             .data(function(d) { return getDirections(d); })
             .enter()
             .append('path')
-            .attr('class', 'directional')
-            .attr('transform', function(d) { return 'rotate(' + d + ')'; })
+            .attr('class', 'viewfield')
+            .attr('transform', function(d) { return 'rotate(' + (d + 90) + ')'; })  // +90 because marker is oriented along Y not X
             .attr('d', 'M0,0H0')
-            .attr('marker-start', 'url(#directional-marker)');
+            .attr('marker-start', 'url(#viewfield-marker)');
 
         enter
             .append('circle')