Update preset icons to use same tag classes as map SVG

css/30_highways.css

@@ -33,7 +33,7 @@ path.line.stroke.tag-highway {
 }
 
 .preset-icon .icon.tag-highway-motorway,
-.preset-icon .icon.tag-highway-motorway-link {
+.preset-icon .icon.tag-highway-motorway_link {
     color: #CF2081;
     fill: #70372f;
 }
@@ -49,7 +49,7 @@ path.line.casing.tag-motorway {
 }
 
 .preset-icon .icon.tag-highway-trunk,
-.preset-icon .icon.tag-highway-trunk-link {
+.preset-icon .icon.tag-highway-trunk_link {
     color: #DD2F22;
     fill: #70372f;
 }
@@ -65,7 +65,7 @@ path.line.casing.tag-trunk {
 }
 
 .preset-icon .icon.tag-highway-primary,
-.preset-icon .icon.tag-highway-primary-link {
+.preset-icon .icon.tag-highway-primary_link {
     color: #F99806;
     fill: #70372f;
 }
@@ -81,7 +81,7 @@ path.line.casing.tag-primary {
 }
 
 .preset-icon .icon.tag-highway-secondary,
-.preset-icon .icon.tag-highway-secondary-link {
+.preset-icon .icon.tag-highway-secondary_link {
     color: #F3F312;
     fill: #70372f;
 }
@@ -97,7 +97,7 @@ path.line.casing.tag-secondary {
 }
 
 .preset-icon .icon.tag-highway-tertiary,
-.preset-icon .icon.tag-highway-tertiary-link {
+.preset-icon .icon.tag-highway-tertiary_link {
     color: #FFF9B3;
     fill: #70372f;
 }
@@ -113,7 +113,7 @@ path.line.casing.tag-tertiary {
 }
 
 .legacy-carto .preset-icon .icon.tag-highway-motorway,
-.legacy-carto .preset-icon .icon.tag-highway-motorway-link {
+.legacy-carto .preset-icon .icon.tag-highway-motorway_link {
     color: #58a9ed;
     fill: #2c5476;
 }
@@ -129,7 +129,7 @@ path.line.casing.tag-tertiary {
 }
 
 .legacy-carto .preset-icon .icon.tag-highway-trunk,
-.legacy-carto .preset-icon .icon.tag-highway-trunk-link {
+.legacy-carto .preset-icon .icon.tag-highway-trunk_link {
     color: #8cd05f;
     fill: #46682f;
 }
@@ -145,7 +145,7 @@ path.line.casing.tag-tertiary {
 }
 
 .legacy-carto .preset-icon .icon.tag-highway-primary,
-.legacy-carto .preset-icon .icon.tag-highway-primary-link {
+.legacy-carto .preset-icon .icon.tag-highway-primary_link {
     color: #e06d5f;
     fill: #70372f;
 }
@@ -161,7 +161,7 @@ path.line.casing.tag-tertiary {
 }
 
 .legacy-carto .preset-icon .icon.tag-highway-secondary,
-.legacy-carto .preset-icon .icon.tag-highway-secondary-link {
+.legacy-carto .preset-icon .icon.tag-highway-secondary_link {
     color: #eab056;
     fill: #75582b;
 }
@@ -177,7 +177,7 @@ path.line.casing.tag-tertiary {
 }
 
 .legacy-carto .preset-icon .icon.tag-highway-tertiary,
-.legacy-carto .preset-icon .icon.tag-highway-tertiary-link {
+.legacy-carto .preset-icon .icon.tag-highway-tertiary_link {
     color: #ffff7e;
     fill: #7f7f3f;
 }

css/40_railways.css

@@ -59,10 +59,6 @@ path.line.stroke.tag-railway-abandoned {
 }
 
 
-.preset-icon .icon.tag-railway-subway {
-    color: #222;
-    fill: #bbb;
-}
 path.line.casing.tag-railway-subway {
     stroke: #222;
 }

modules/svg/tag_classes.js

@@ -23,111 +23,15 @@ export function svgTagClasses() {
     var tagClasses = function(selection) {
         selection.each(function tagClassesEach(entity) {
             var value = this.className;
-            var primary, status;
 
             if (value.baseVal !== undefined) {
                 value = value.baseVal;
             }
 
             var t = _tags(entity);
-            var i, k, v;
 
-            // in some situations we want to render perimeter strokes a certain way
-            var overrideGeometry;
-            if (/\bstroke\b/.test(value)) {
-                if (!!t.barrier && t.barrier !== 'no') {
-                    overrideGeometry = 'line';
-                } else if (t.type === 'multipolygon' && !entity.hasInterestingTags()) {
-                    overrideGeometry = 'area';
-                }
-            }
+            var computed = tagClasses.getClassesString(t, value);
 
-            // preserve base classes (nothing with `tag-`)
-            var classes = value.trim().split(/\s+/)
-                .filter(function(klass) {
-                    return klass.length && !/^tag-/.test(klass);
-                })
-                .map(function(klass) {  // special overrides for some perimeter strokes
-                    return (klass === 'line' || klass === 'area') ? (overrideGeometry || klass) : klass;
-                });
-
-
-
-            // pick at most one primary classification tag..
-            for (i = 0; i < primaries.length; i++) {
-                k = primaries[i];
-                v = t[k];
-                if (!v || v === 'no') continue;
-
-                if (k === 'piste:type') {  // avoid a ':' in the class name
-                    k = 'piste';
-                }
-
-                primary = k;
-                if (statuses.indexOf(v) !== -1) {   // e.g. `railway=abandoned`
-                    status = v;
-                    classes.push('tag-' + k);
-                } else {
-                    classes.push('tag-' + k);
-                    classes.push('tag-' + k + '-' + v);
-                }
-
-                break;
-            }
-
-            // add at most one status tag, only if relates to primary tag..
-            if (!status) {
-                for (i = 0; i < statuses.length; i++) {
-                    k = statuses[i];
-                    v = t[k];
-                    if (!v || v === 'no') continue;
-
-                    if (v === 'yes') {   // e.g. `railway=rail + abandoned=yes`
-                        status = k;
-                    }
-                    else if (primary && primary === v) {  // e.g. `railway=rail + abandoned=railway`
-                        status = k;
-                    } else if (!primary && primaries.indexOf(v) !== -1) {  // e.g. `abandoned=railway`
-                        status = k;
-                        primary = v;
-                        classes.push('tag-' + v);
-                    }  // else ignore e.g.  `highway=path + abandoned=railway`
-
-                    if (status) break;
-                }
-            }
-
-            if (status) {
-                classes.push('tag-status');
-                classes.push('tag-status-' + status);
-            }
-
-            // add any secondary tags
-            for (i = 0; i < secondaries.length; i++) {
-                k = secondaries[i];
-                v = t[k];
-                if (!v || v === 'no') continue;
-                classes.push('tag-' + k);
-                classes.push('tag-' + k + '-' + v);
-            }
-
-            // For highways, look for surface tagging..
-            if (primary === 'highway' || primary === 'aeroway') {
-                var paved = (t.highway !== 'track');
-                for (k in t) {
-                    v = t[k];
-                    if (k in osmPavedTags) {
-                        paved = !!osmPavedTags[k][v];
-                        break;
-                    }
-                }
-                if (!paved) {
-                    classes.push('tag-unpaved');
-                }
-            }
-
-
-            var computed = classes.join(' ').trim();
             if (computed !== value) {
                 d3_select(this).attr('class', computed);
             }
@@ -135,6 +39,106 @@ export function svgTagClasses() {
     };
 
 
+    tagClasses.getClassesString = function(t, value) {
+        var primary, status;
+        var i, k, v;
+
+        // in some situations we want to render perimeter strokes a certain way
+        var overrideGeometry;
+        if (/\bstroke\b/.test(value)) {
+            if (!!t.barrier && t.barrier !== 'no') {
+                overrideGeometry = 'line';
+            } else if (t.type === 'multipolygon' && !entity.hasInterestingTags()) {
+                overrideGeometry = 'area';
+            }
+        }
+
+        // preserve base classes (nothing with `tag-`)
+        var classes = value.trim().split(/\s+/)
+            .filter(function(klass) {
+                return klass.length && !/^tag-/.test(klass);
+            })
+            .map(function(klass) {  // special overrides for some perimeter strokes
+                return (klass === 'line' || klass === 'area') ? (overrideGeometry || klass) : klass;
+            });
+
+        // pick at most one primary classification tag..
+        for (i = 0; i < primaries.length; i++) {
+            k = primaries[i];
+            v = t[k];
+            if (!v || v === 'no') continue;
+
+            if (k === 'piste:type') {  // avoid a ':' in the class name
+                k = 'piste';
+            }
+
+            primary = k;
+            if (statuses.indexOf(v) !== -1) {   // e.g. `railway=abandoned`
+                status = v;
+                classes.push('tag-' + k);
+            } else {
+                classes.push('tag-' + k);
+                classes.push('tag-' + k + '-' + v);
+            }
+
+            break;
+        }
+
+        // add at most one status tag, only if relates to primary tag..
+        if (!status) {
+            for (i = 0; i < statuses.length; i++) {
+                k = statuses[i];
+                v = t[k];
+                if (!v || v === 'no') continue;
+
+                if (v === 'yes') {   // e.g. `railway=rail + abandoned=yes`
+                    status = k;
+                }
+                else if (primary && primary === v) {  // e.g. `railway=rail + abandoned=railway`
+                    status = k;
+                } else if (!primary && primaries.indexOf(v) !== -1) {  // e.g. `abandoned=railway`
+                    status = k;
+                    primary = v;
+                    classes.push('tag-' + v);
+                }  // else ignore e.g.  `highway=path + abandoned=railway`
+
+                if (status) break;
+            }
+        }
+
+        if (status) {
+            classes.push('tag-status');
+            classes.push('tag-status-' + status);
+        }
+
+        // add any secondary tags
+        for (i = 0; i < secondaries.length; i++) {
+            k = secondaries[i];
+            v = t[k];
+            if (!v || v === 'no') continue;
+            classes.push('tag-' + k);
+            classes.push('tag-' + k + '-' + v);
+        }
+
+        // For highways, look for surface tagging..
+        if (primary === 'highway' || primary === 'aeroway') {
+            var paved = (t.highway !== 'track');
+            for (k in t) {
+                v = t[k];
+                if (k in osmPavedTags) {
+                    paved = !!osmPavedTags[k][v];
+                    break;
+                }
+            }
+            if (!paved) {
+                classes.push('tag-unpaved');
+            }
+        }
+
+        return classes.join(' ').trim();
+    }
+
+
     tagClasses.tags = function(val) {
         if (!arguments.length) return _tags;
         _tags = val;

modules/ui/preset_icon.js

@@ -1,9 +1,8 @@
 import { select as d3_select } from 'd3-selection';
 
-import { svgIcon } from '../svg';
+import { svgIcon, svgTagClasses } from '../svg';
 import { utilFunctor } from '../util';
 
-
 export function uiPresetIcon() {
     var preset, geometry;
 
@@ -38,24 +37,13 @@ export function uiPresetIcon() {
         var drawLine = geom === 'line' && !isCategory;
         var isFramed = (geom === 'area' || drawLine || geom === 'vertex');
 
-        var tagClasses = '';
-        var tags = isCategory ? p.tags : p.setTags({}, geom);
+        var tags = !isCategory ? p.setTags({}, geom) : {};
         for (var k in tags) {
-            if (k === 'piste:type') {  // avoid a ':' in the class name
-                k = 'piste';
-            }
-            var v = tags[k];
-            tagClasses += ' tag-' + k;
-            if (v !== '*') {
-                tagClasses += ' tag-' + k + '-' + v;
+            if (tags[k] === '*') {
+                tags[k] = 'yes';
             }
         }
-
-        // if the preset includes a `building_area` field, class it as a building
-        if (p.fields && p.fields.filter(function(d) { return d.id === 'building_area'; }).length) {
-            tagClasses += ' tag-building';
-        }
-
+        var tagClasses = svgTagClasses().getClassesString(tags, '');
 
         var fill = selection.selectAll('.preset-icon-fill')
             .data([0]);
@@ -66,7 +54,7 @@ export function uiPresetIcon() {
 
         fill
             .attr('class', function() {
-                return 'preset-icon-fill preset-icon-fill-' + geom + tagClasses;
+                return 'preset-icon-fill preset-icon-fill-' + geom + ' ' + tagClasses;
             });
 
         var line = selection.selectAll('.preset-icon-line')
@@ -86,10 +74,10 @@ export function uiPresetIcon() {
 
         line.append('path')
             .attr('d', 'M0 13.5 L40 13.5')
-            .attr('class', 'line casing' + tagClasses);
+            .attr('class', 'line casing ' + tagClasses);
         line.append('path')
             .attr('d', 'M0 13.5 L40 13.5')
-            .attr('class', 'line stroke' + tagClasses);
+            .attr('class', 'line stroke ' + tagClasses);
 
 
         var areaFrame = selection.selectAll('.preset-icon-frame')
@@ -120,7 +108,7 @@ export function uiPresetIcon() {
 
         icon.selectAll('svg')
             .attr('class', function() {
-                return 'icon ' + picon + (isPOI && geom !== 'line'  ? '' : tagClasses);
+                return 'icon ' + picon + ' ' + (isPOI && geom !== 'line'  ? '' : tagClasses);
             });
 
         icon.selectAll('use')