Refine tagged vertex rendering

Don't render tagged vertices for which we don't have
an icon as the 'marker' icon. Marker shape is for points.

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;
 }
 

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']
         }),

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);
 

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();

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;
 

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();
 

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'],