From 3787185182dca000dbf689521c485daec5f1cdd0 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Wed, 13 Mar 2013 17:31:16 -0700 Subject: [PATCH] Rendering tagged points At z16 and below, tagged points are rendered with a small dot in the center. At z17 and above, they are rendered with a maki icon. See the test rendering page for examples. Fixes #381. --- css/map.css | 69 +++--------------------- js/id/renderer/map.js | 4 +- js/id/svg/vertices.js | 74 +++++++++++++++++++++---- test/css | 1 + test/img | 1 + test/rendering.html | 111 ++++++++++++++++++++++++++++++++++---- test/spec/svg/vertices.js | 8 +-- 7 files changed, 181 insertions(+), 87 deletions(-) create mode 120000 test/css create mode 120000 test/img diff --git a/css/map.css b/css/map.css index 4928bbb8f..f2869edaa 100644 --- a/css/map.css +++ b/css/map.css @@ -60,76 +60,21 @@ g.point.active, g.point.active * { /* vertices */ g.vertex .fill { - fill:white; + fill: none; } g.vertex .stroke { - stroke:black; - stroke-opacity: .5; - stroke-width:2; - fill:white; + stroke: #666; + stroke-width: 1; + fill: white; } -svg[data-zoom="16"] g.vertex .shadow { - -webkit-transform:scale(0.8, 0.8); - -moz-transform:scale(0.8, 0.8); - transform:scale(0.8, 0.8); -} -svg[data-zoom="16"] g.vertex .stroke, -svg[data-zoom="16"] g.vertex .fill { - -webkit-transform:scale(0.6, 0.6); - -moz-transform:scale(0.6, 0.6); - transform:scale(0.6, 0.6); -} - -svg[data-zoom="17"] g.vertex .shadow { - -webkit-transform:scale(0.9, 0.9); - -moz-transform:scale(0.9, 0.9); - transform:scale(0.9, 0.9); -} -svg[data-zoom="17"] g.vertex .stroke, -svg[data-zoom="17"] g.vertex .fill { - -webkit-transform:scale(0.7, 0.7); - -moz-transform:scale(0.7, 0.7); - transform:scale(0.7, 0.7); -} - -g.vertex.shared .shadow { - -webkit-transform:scale(1.2, 1.2); - -moz-transform:scale(1.2, 1.2); - transform:scale(1.2, 1.2); -} -g.vertex.shared .fill, g.vertex.shared .stroke { - -webkit-transform:scale(1.1, 1.1); - -moz-transform:scale(1.1, 1.1); - transform:scale(1.1, 1.1); -} -svg[data-zoom="16"] g.vertex.shared .shadow { - -webkit-transform:scale(0.9, 0.9); - -moz-transform:scale(0.9, 0.9); - transform:scale(0.9, 0.9); -} -svg[data-zoom="16"] g.vertex.shared .fill, -svg[data-zoom="16"] g.vertex.shared .stroke { - -webkit-transform:scale(0.8, 0.8); - -moz-transform:scale(0.8, 0.8); - transform:scale(0.8, 0.8); -} -svg[data-zoom="17"] g.vertex.shared .shadow { - -webkit-transform:scale(1, 1); - -moz-transform:scale(1, 1); - transform:scale(1, 1); -} -svg[data-zoom="17"] g.vertex.shared .fill, -svg[data-zoom="17"] g.vertex.shared .stroke { - -webkit-transform:scale(0.9, 0.9); - -moz-transform:scale(0.9, 0.9); - transform:scale(0.9, 0.9); + fill: #aaa; } -g.vertex.shared .fill { - fill:#aaa; +svg[data-zoom="16"] g.vertex.tagged .fill { + fill: #000; } g.vertex .shadow { diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 89aaf4e2b..c33d30b8b 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -15,7 +15,7 @@ iD.Map = function(context) { .projection(projection), transformProp = iD.util.prefixCSSProperty('Transform'), points = iD.svg.Points(roundedProjection, context), - vertices = iD.svg.Vertices(roundedProjection), + vertices = iD.svg.Vertices(roundedProjection, context), lines = iD.svg.Lines(projection), areas = iD.svg.Areas(roundedProjection), midpoints = iD.svg.Midpoints(roundedProjection), @@ -87,7 +87,7 @@ iD.Map = function(context) { } else { surface .call(points, graph, all, filter) - .call(vertices, graph, all, filter) + .call(vertices, graph, all, filter, map.zoom()) .call(lines, graph, all, filter, dimensions) .call(areas, graph, all, filter) .call(midpoints, graph, all, filter, extent) diff --git a/js/id/svg/vertices.js b/js/id/svg/vertices.js index 4a27d015b..9acc15439 100644 --- a/js/id/svg/vertices.js +++ b/js/id/svg/vertices.js @@ -1,5 +1,12 @@ -iD.svg.Vertices = function(projection) { - return function drawVertices(surface, graph, entities, filter) { +iD.svg.Vertices = function(projection, context) { + var radiuses = { + // z16-, z17, z18+, tagged + shadow: [6, 7.5, 7.5, 11.5], + stroke: [2.5, 3.5, 3.5, 7], + fill: [1, 3, 3, 4.5] + }; + + return function drawVertices(surface, graph, entities, filter, zoom) { var vertices = []; for (var i = 0; i < entities.length; i++) { @@ -21,28 +28,75 @@ iD.svg.Vertices = function(projection) { .insert('g', ':first-child') .attr('class', 'node vertex'); + if (zoom < 17) { + zoom = 0; + } else if (zoom < 18) { + zoom = 1; + } else { + zoom = 2; + } + group.append('circle') - .attr('r', 9) .attr('class', 'node vertex shadow'); group.append('circle') - .attr('r', 4) .attr('class', 'node vertex stroke'); group.append('circle') - .attr('r', 3) .attr('class', 'node vertex fill'); groups.attr('transform', iD.svg.PointTransform(projection)) .call(iD.svg.TagClasses()) .call(iD.svg.MemberClasses(graph)) + .classed('tagged', function(entity) { return entity.hasInterestingTags(); }) .classed('shared', function(entity) { return graph.isShared(entity); }); - // Selecting the following implicitly - // sets the data (vertex entity) on the elements - groups.select('circle.fill'); - groups.select('circle.stroke'); - groups.select('circle.shadow'); + function center(entity) { + if (zoom !== 0 && entity.hasInterestingTags()) { + d3.select(this) + .attr('cx', 0.5) + .attr('cy', -0.5); + } else { + d3.select(this) + .attr('cy', 0) + .attr('cx', 0); + } + } + + groups.select('circle.shadow') + .each(center) + .attr('r', function(entity) { + return radiuses.shadow[zoom !== 0 && entity.hasInterestingTags() ? 3 : zoom] + }); + + groups.select('circle.stroke') + .each(center) + .attr('r', function(entity) { + return radiuses.stroke[zoom !== 0 && entity.hasInterestingTags() ? 3 : zoom] + }); + + groups.select('circle.fill') + .each(center) + .attr('r', function(entity) { + return radiuses.fill[zoom !== 0 && entity.hasInterestingTags() ? 3 : zoom]; + }); + + var use = groups.selectAll('use') + .data(function(entity) { + return zoom !== 0 && entity.hasInterestingTags() ? [entity] : []; + }, function(entity) { + return entity.id + '-' + zoom; + }); + + use.enter().append('use') + .attr('transform', 'translate(-6, -6)') + .attr('clip-path', 'url(#clip-square-12)') + .attr('xlink:href', function(entity) { + return '#maki-' + context.presets().match(entity, graph).icon + '-12'; + }); + + use.exit() + .remove(); groups.exit() .remove(); diff --git a/test/css b/test/css new file mode 120000 index 000000000..d2d7c52c8 --- /dev/null +++ b/test/css @@ -0,0 +1 @@ +../css \ No newline at end of file diff --git a/test/img b/test/img new file mode 120000 index 000000000..6ffc6ca9f --- /dev/null +++ b/test/img @@ -0,0 +1 @@ +../img \ No newline at end of file diff --git a/test/rendering.html b/test/rendering.html index 73218a9e2..dfada7ba5 100644 --- a/test/rendering.html +++ b/test/rendering.html @@ -4,6 +4,7 @@ Rendering Tests + @@ -33,6 +34,10 @@ + + + +
@@ -45,6 +50,100 @@ d3.select("body") .style("background-color", d3.rgb(v,v,v)); }); + + var infiniteExtent = iD.geo.Extent([0, 0], [Infinity, Infinity]), + projection = function(p) { return p; }, + filter = d3.functor(true), + context = {}; + + projection.stream = function(listener) { + return listener; + }; + + context.presets = function() { + return iD.presets().load({ + presets: [{ + geometry: ['vertex'], + tags: { + highway: 'turning_circle' + }, + icon: 'circle' + }, { + geometry: ['vertex'], + tags: { + railway: 'level_crossing' + }, + icon: 'cross' + }] + }); + }; + + + + + + + + + +
z16z17z18
BaseHoverSelectedBaseHoverSelectedBaseHoverSelected
+ + @@ -57,8 +156,6 @@