diff --git a/css/map.css b/css/map.css index 7b99ab28c..e876f2b4b 100644 --- a/css/map.css +++ b/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; } diff --git a/js/id/svg/labels.js b/js/id/svg/labels.js index e079e60b8..623fe4e76 100644 --- a/js/id/svg/labels.js +++ b/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); };