From 1fcb641b4b75ca64d1aeb1b8a4cdd961dd35f16c Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 15 Nov 2012 14:01:15 -0500 Subject: [PATCH] One-way street markings, fixes #40 --- css/map.css | 16 ++++++++-------- js/iD/renderer/Map.js | 40 ++++++++++++++++++++++++++++++++++++++-- 2 files changed, 46 insertions(+), 10 deletions(-) diff --git a/css/map.css b/css/map.css index f64e13342..cea15874c 100644 --- a/css/map.css +++ b/css/map.css @@ -193,12 +193,12 @@ path.stroke.waterway { } text { - font:9px 'Helvetica'; - text-anchor:middle; - fill:#fff; - text-shadow: - 0 0 1px #000, - 0 0 1px #000, - 0 0 1px #000, - 0 0 2px #000; + font-size:10px; +} + +text.oneway { + fill:#91CFFF; + stroke:#2C6B9B; + stroke-width:1; + pointer-events:none; } diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js index a704483dd..83093eb7c 100755 --- a/js/iD/renderer/Map.js +++ b/js/iD/renderer/Map.js @@ -63,7 +63,8 @@ iD.Map = function(elem) { var surface = parent.append('svg') .call(zoombehavior); - surface.append('defs').append('clipPath') + var defs = surface.append('defs'); + defs.append('clipPath') .attr('id', 'clip') .append('rect') .attr('id', 'clip-rect') @@ -90,6 +91,11 @@ iD.Map = function(elem) { var tileclient = iD.Tiles(tilegroup, projection); + // For one-way roads, find the length of a triangle + var arrow = surface.append('text').text('►'); + var alength = arrow.node().getComputedTextLength(); + arrow.remove(); + function classActive(d) { return d.id === selection; } @@ -131,10 +137,10 @@ iD.Map = function(elem) { var z = getZoom(); if (z > 18) { drawHandles(waynodes); } else { hideHandles(); } + if (z > 18) { drawCasings(ways); } else { hideCasings(); } drawFills(areas); drawStrokes(ways); drawMarkers(points); - if (z > 18) { drawCasings(ways); } else { hideCasings(); } } function drawHandles(waynodes) { @@ -205,6 +211,36 @@ iD.Map = function(elem) { strokes .attr('class', class_stroke) .classed('active', classActive); + + // Determine the lengths of oneway paths + var lengths = []; + var oneways = strokes.filter(function(d, i) { + return d.tags.oneway && d.tags.oneway === 'yes'; + }).each(function(d, i) { + lengths.push(Math.floor(this.getTotalLength() / alength / 4)); + }).data(); + + var uses = defs.selectAll('path') + .data(oneways, key); + uses.exit().remove(); + uses.enter().append('path'); + uses + .attr('id', function(d, i) { return 'shadow-' + i; }) + .attr('d', function(d) { return d._line; }); + + var labels = text_g.selectAll('text') + .data(oneways, key); + labels.exit().remove(); + var tp = labels.enter() + .append('text') + .attr('class', 'oneway') + .attr('dy', 4) + .append('textPath'); + tp.attr('letter-spacing', alength * 4) + .attr('xlink:href', function(d, i) { return '#shadow-' + i; }) + .text(function(d, i) { + return (new Array(lengths[i])).join('►'); + }); } function drawCasings(ways) {