diff --git a/css/map.css b/css/map.css index 293a784fa..b39140df4 100644 --- a/css/map.css +++ b/css/map.css @@ -1310,21 +1310,17 @@ text.pointlabel-halo, text.arealabel, text.linelabel, text.pointlabel { + dominant-baseline: middle; + text-anchor: middle; 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; } -.linelabel-halo .textpath, -.linelabel .textpath { - dominant-baseline: middle; -} - /* Opera doesn't support dominant-baseline. See #715 */ .opera .linelabel-halo .textpath, .opera .linelabel .textpath { @@ -1344,7 +1340,7 @@ text.proximate { } text.point { - font-size: 10px; + font-size: 10px; } /* Turns */ diff --git a/modules/svg/labels.js b/modules/svg/labels.js index f179fdcff..ae1f4f13a 100644 --- a/modules/svg/labels.js +++ b/modules/svg/labels.js @@ -331,16 +331,16 @@ export function svgLabels(projection, context) { if (textDirection === 'rtl') { bbox = { minX: p.x - width - margin, - minY: p.y - height - margin, + minY: p.y - (height / 2) - margin, maxX: p.x + margin, - maxY: p.y + margin + maxY: p.y + (height / 2) + margin }; } else { bbox = { minX: p.x - margin, - minY: p.y + margin, + minY: p.y + (height / 2) + margin, maxX: p.x + width + margin, - maxY: p.y - height - margin + maxY: p.y - (height / 2) - margin }; } @@ -355,7 +355,7 @@ export function svgLabels(projection, context) { length = geoPathLength(nodes); if (length < width + 20) return; - // What sorcery is this? + // % along the line to attempt to place the label var lineOffsets = [50, 45, 55, 40, 60, 35, 65, 30, 70, 25, 75, 20, 80, 15, 95, 10, 90, 5, 95]; @@ -400,7 +400,8 @@ export function svgLabels(projection, context) { var iconSize = 18, iconX = centroid[0] - (iconSize / 2), iconY = centroid[1] - (iconSize / 2), - textOffset = iconSize + 5, + margin = 5, + textOffset = iconSize + margin, p = { transform: 'translate(' + iconX + ',' + iconY + ')' }; if (width && entitywidth >= width + 20) { @@ -408,9 +409,19 @@ export function svgLabels(projection, context) { p.y = centroid[1] + textOffset; p.textAnchor = 'middle'; p.height = height; - bbox = { minX: p.x - width/2, minY: p.y, maxX: p.x + width/2, maxY: p.y + height + textOffset }; + bbox = { + minX: p.x - (width / 2), + minY: p.y - (height / 2) - margin, + maxX: p.x + (width / 2), + maxY: p.y + (height / 2) + margin + }; } else { - bbox = { minX: iconX, minY: iconY, maxX: iconX + iconSize, maxY: iconY + iconSize }; + bbox = { + minX: iconX, + minY: iconY, + maxX: iconX + iconSize, + maxY: iconY + iconSize + }; } if (tryInsert(bbox, entity.id)) { @@ -422,15 +433,15 @@ export function svgLabels(projection, context) { function tryInsert(bbox, id) { // Check that label is visible if (bbox.minX < 0 || bbox.minY < 0 || bbox.maxX > dimensions[0] || bbox.maxY > dimensions[1]) return false; - var v = rtree.search(bbox).length === 0; - if (v) { - bbox.id = id; - rtree.insert(bbox); - bboxes[id] = bbox; - } - return v; + if (rtree.collides(bbox)) return false; + + bbox.id = id; + rtree.insert(bbox); + bboxes[id] = bbox; + return true; } + var label = selection.selectAll('.layer-label'), halo = selection.selectAll('.layer-halo');