nicer label halos

renders a second text with wider stroke
instead of drawing a block halo with a rect or path

css/map.css

@@ -743,51 +743,41 @@ text.tag-oneway {
  * Labels
  */
 
-.layer-halo path {
-  pointer-events: none;
-  stroke-linecap: round;
-  stroke-linejoin: bevel;
-  stroke-width: 20px;
-  opacity: 0.8;
-  stroke: white;
-}
-
+text.arealabel-halo,
+text.linelabel-halo,
+text.pointlabel-halo,
 text.arealabel,
-text.pathlabel,
+text.linelabel,
 text.pointlabel {
-  font-size: 12px;
-  font-weight: bold;
-  fill: #333;
-  text-anchor: middle;
-  pointer-events: none;
-}
-
-.layer-halo rect,
-.layer-halo path,
-.layer-label text {
+    font-size: 12px;
+    font-weight: bold;
+    fill: #333;
+    text-anchor: middle;
+    pointer-events: none;
     -webkit-transition: opacity 100ms linear;
     transition: opacity 100ms linear;
     -moz-transition: opacity 100ms linear;
 }
 
-.pathlabel .textpath {
+.linelabel-halo .textpath,
+.linelabel .textpath {
   dominant-baseline: middle;
 }
 
 /* Opera doesn't support dominant-baseline. See #715 */
-.opera .pathlabel .textpath {
+.opera .linelabel-halo,
+.opera .linelabel .textpath {
   baseline-shift: -33%;
   dominant-baseline: auto;
 }
 
-.pointlabel-halo,
-.linelabel-halo,
-.arealabel-halo {
-  opacity: 0.7;
-  pointer-events: none;
+.layer-halo text {
+    opacity: 0.7;
+    stroke: #fff;
+    stroke-width: 5px;
+    stroke-miterlimit: 1;
 }
 
-
 text.point {
   font-size: 10px;
 }

js/id/svg/labels.js

@@ -102,7 +102,7 @@ iD.svg.Labels = function(projection, context) {
             .data(entities, iD.Entity.key)
             .attr({
                 'startOffset': '50%',
-                'xlink:href': function(d) { return '#halo-' + d.id; }
+                'xlink:href': function(d) { return '#labelpath-' + d.id; }
             })
             .text(function(d) { return name(d); });
 
@@ -110,7 +110,7 @@ iD.svg.Labels = function(projection, context) {
 
     }
 
-    function drawLineHalos(group, entities, filter, classes, labels) {
+    function drawLinePaths(group, entities, filter, classes, labels) {
 
         var halos = group.selectAll('path')
             .filter(filter)
@@ -119,7 +119,7 @@ iD.svg.Labels = function(projection, context) {
         halos.enter()
             .append('path')
             .style('stroke-width', get(labels, 'font-size'))
-            .attr('id', function(d) { return 'halo-' + d.id; })
+            .attr('id', function(d) { return 'labelpath-' + d.id; })
             .attr('class', classes);
 
         halos.attr('d', get(labels, 'lineString'));
@@ -127,36 +127,6 @@ iD.svg.Labels = function(projection, context) {
         halos.exit().remove();
     }
 
-    function drawPointHalos(group, entities, filter, classes, labels) {
-
-        var halos = group.selectAll('rect.' + classes)
-            .filter(filter)
-            .data(entities, iD.Entity.key);
-
-        halos.enter()
-            .append('rect')
-            .attr('class', function(d, i) { return classes + ' ' + labels[i].classes;});
-
-        halos.attr({
-            'x': function(d, i) {
-                var x = labels[i].x - 2;
-                if (labels[i].textAnchor === 'middle') {
-                    x -= textWidth(name(d), labels[i].height) / 2;
-                }
-                return x;
-            },
-            'y': function(d, i) { return labels[i].y - labels[i].height + 1; },
-            'rx': 3,
-            'ry': 3,
-            'width': function(d, i) { return textWidth(name(d), labels[i].height) + 4; },
-            'height': function(d, i) { return labels[i].height + 2; },
-            'fill': 'white'
-        });
-
-        halos.exit().remove();
-    }
-
-
     function drawPointLabels(group, entities, filter, classes, labels) {
 
         var texts = group.selectAll('text.' + classes)
@@ -282,11 +252,11 @@ iD.svg.Labels = function(projection, context) {
             }
         }
 
-        selection.selectAll('.layer-label text, .layer-halo path, .layer-halo rect')
+        selection.selectAll('.layer-label text, .layer-halo path, .layer-halo text')
             .each(resetOpacity);
 
         if (!labels.length) return;
-        selection.selectAll('.layer-label text, .layer-halo path, .layer-halo rect')
+        selection.selectAll('.layer-label text, .layer-halo path, .layer-halo text')
             .filter(function(d) {
                 return containsLabel.has(d.id);
             })
@@ -476,12 +446,16 @@ iD.svg.Labels = function(projection, context) {
 
         var label = surface.select('.layer-label'),
             halo = surface.select('.layer-halo'),
+            // points
             points = drawPointLabels(label, labelled.point, filter, 'pointlabel', positions.point),
-            pointHalos = drawPointHalos(halo, labelled.point, filter, 'pointlabel-halo', positions.point),
-            linesHalos = drawLineHalos(halo, labelled.line, filter, 'linelabel-halo', positions.line),
-            lines = drawLineLabels(label, labelled.line, filter, 'pathlabel', positions.line),
+            pointHalos = drawPointLabels(halo, labelled.point, filter, 'pointlabel-halo', positions.point),
+            // lines
+            linesPaths = drawLinePaths(halo, labelled.line, filter, '', positions.line),
+            lines = drawLineLabels(label, labelled.line, filter, 'linelabel', positions.line),
+            linesHalos = drawLineLabels(halo, labelled.line, filter, 'linelabel-halo', positions.line),
+            // areas
             areas = drawAreaLabels(label, labelled.area, filter, 'arealabel', positions.area),
-            areaHalos = drawAreaHalos(halo, labelled.area, filter, 'arealabel-halo', positions.area),
+            areaHalos = drawAreaLabels(halo, labelled.area, filter, 'arealabel-halo', positions.area),
             areaIcons = drawAreaIcons(label, labelled.area, filter, 'arealabel-icon', positions.area);
     };