diff --git a/css/map.css b/css/map.css index 1c0d6298a..05c0658e3 100644 --- a/css/map.css +++ b/css/map.css @@ -75,7 +75,7 @@ g.vertex.shared .stroke { fill: #aaa; } -svg[data-zoom="16"] g.vertex.tagged .fill { +g.vertex.tagged .fill { fill: #000; } diff --git a/js/id/presets.js b/js/id/presets.js index 4c6ca1667..a5c953170 100644 --- a/js/id/presets.js +++ b/js/id/presets.js @@ -5,7 +5,6 @@ iD.presets = function(context) { var other = iD.presets.Preset({ name: 'other', - icon: 'marker-stroked', tags: {}, geometry: ['point', 'vertex', 'line', 'area'] }), diff --git a/js/id/presets/preset.js b/js/id/presets/preset.js index ea5f44383..cb55e53ad 100644 --- a/js/id/presets/preset.js +++ b/js/id/presets/preset.js @@ -1,8 +1,6 @@ iD.presets.Preset = function(preset, fields) { preset = _.clone(preset); - preset.icon = preset.icon || 'marker-stroked'; - preset.fields = (preset.fields || []).map(getFields); preset.additional = (preset.additional || []).map(getFields); diff --git a/js/id/svg/vertices.js b/js/id/svg/vertices.js index 9acc15439..6a8ac6cb9 100644 --- a/js/id/svg/vertices.js +++ b/js/id/svg/vertices.js @@ -3,7 +3,7 @@ iD.svg.Vertices = function(projection, context) { // 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] + fill: [1, 1.5, 1.5, 1.5] }; return function drawVertices(surface, graph, entities, filter, zoom) { @@ -42,15 +42,18 @@ iD.svg.Vertices = function(projection, context) { group.append('circle') .attr('class', 'node vertex stroke'); - group.append('circle') - .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); }); + function icon(entity) { + return zoom !== 0 && + entity.hasInterestingTags() && + context.presets().match(entity, graph).icon; + } + function center(entity) { if (zoom !== 0 && entity.hasInterestingTags()) { d3.select(this) @@ -66,34 +69,43 @@ iD.svg.Vertices = function(projection, context) { groups.select('circle.shadow') .each(center) .attr('r', function(entity) { - return radiuses.shadow[zoom !== 0 && entity.hasInterestingTags() ? 3 : zoom] + return radiuses.shadow[icon(entity) ? 3 : zoom] }); groups.select('circle.stroke') .each(center) .attr('r', function(entity) { - return radiuses.stroke[zoom !== 0 && entity.hasInterestingTags() ? 3 : zoom] + return radiuses.stroke[icon(entity) ? 3 : zoom] }); - groups.select('circle.fill') + // Each vertex gets either a circle or a use, depending + // on if it has a icon or not. + + var fill = groups.selectAll('circle.fill') + .data(function(entity) { + return icon(entity) ? [] : [entity]; + }, iD.Entity.key); + + fill.enter().append('circle') + .attr('class', 'node vertex fill') .each(center) - .attr('r', function(entity) { - return radiuses.fill[zoom !== 0 && entity.hasInterestingTags() ? 3 : zoom]; - }); + .attr('r', radiuses.fill[zoom]); + + fill.exit() + .remove(); var use = groups.selectAll('use') .data(function(entity) { - return zoom !== 0 && entity.hasInterestingTags() ? [entity] : []; - }, function(entity) { - return entity.id + '-' + zoom; + var i = icon(entity); + return i ? [i] : []; + }, function(d) { + return d; }); 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'; - }); + .attr('xlink:href', function(icon) { return '#maki-' + icon + '-12'; }); use.exit() .remove(); diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js index d26027c6c..0d86c4620 100644 --- a/js/id/ui/preset_grid.js +++ b/js/id/ui/preset_grid.js @@ -112,7 +112,7 @@ iD.ui.PresetGrid = function(context) { }); entered.append('div') - .attr('class', function(d) { return 'preset-' + d.icon + ' icon'; }); + .attr('class', function(d) { return 'preset-' + (d.icon || 'marker-stroked') + ' icon'; }); var presetinspect; diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js index 4b7da7b2b..5bd6dcb6d 100644 --- a/js/id/ui/tag_editor.js +++ b/js/id/ui/tag_editor.js @@ -60,7 +60,7 @@ iD.ui.TagEditor = function(context) { .attr('class','col12 grid-entry fillL'); typebutton.append('div') - .attr('class', 'icon icon-pre-text' + (preset ? ' preset-' + preset.icon : '')); + .attr('class', 'icon icon-pre-text' + (preset ? ' preset-' + (preset.icon || 'marker-stroked') : '')); typebutton.node().focus(); diff --git a/test/rendering.html b/test/rendering.html index 919079fd3..5f4b78fed 100644 --- a/test/rendering.html +++ b/test/rendering.html @@ -159,6 +159,9 @@ }, { type: 'railway=level_crossing', tags: {railway: 'level_crossing'} + }, { + type: 'unknown tag', + tags: {interesting: 'yes'} }], zooms = [16, 17, 18], modes = ['base', 'hover', 'selected'],