diff --git a/css/map.css b/css/map.css index 76651bf25..e93ac609c 100644 --- a/css/map.css +++ b/css/map.css @@ -97,13 +97,13 @@ path.stroke { stroke-width: 2; } -path.stroke.railway-rail { +path.stroke.tag-railway-rail { stroke: white; stroke-width: 3; stroke-dasharray: 12,12; } -path.stroke.railway-subway { +path.stroke.tag-railway-subway { stroke: #444; stroke-width: 3; stroke-dasharray: 8,8; @@ -120,27 +120,27 @@ path.area.selected { stroke-width:4 !important; } -path.area.natural { +path.area.tag-natural { stroke: #ADD6A5; fill: #ADD6A5; stroke-width:1; } -path.area.natural.natural-water { +path.area.tag-natural-water { stroke: #6382FF; fill: #ADBEFF; } -path.area.building { +path.area.tag-building { stroke: #9E176A; stroke-width: 1; fill: #ff6ec7; } -path.area.landuse, -path.area.natural.natural-wood, -path.area.natural.natural-tree, -path.area.natural.natural-grassland { +path.area.tag-landuse, +path.area.tag-natural-wood, +path.area.tag-natural-tree, +path.area.tag-natural-grassland { stroke: #006B34; stroke-width: 1; fill: #189E59; @@ -148,97 +148,105 @@ path.area.natural.natural-grassland { } /* highways */ -path.stroke.highway-residential { +path.stroke.tag-highway-residential { stroke:#E8E8E8; stroke-width:4; } -path.casing.highway-residential { +path.casing.tag-highway-residential { stroke:#E8E8E8; stroke-width:10; stroke-opacity:0.4; } -path.stroke.highway-unclassified, -path.stroke.highway-tertiary, -path.stroke.highway-tertiary_link { +path.stroke.tag-highway-unclassified, +path.stroke.tag-highway-tertiary, +path.stroke.tag-highway-tertiary_link { stroke:#FEFECB; stroke-width:6; } -path.casing.highway-unclassified, -path.casing.highway-tertiary, -path.casing.highway-tertiary_link { +path.casing.tag-highway-unclassified, +path.casing.tag-highway-tertiary, +path.casing.tag-highway-tertiary_link { stroke-width:8; } -path.stroke.highway-service { +path.stroke.tag-highway-service { stroke:#fff; stroke-width:4; } -path.casing.highway-service { +path.casing.tag-highway-service { stroke-width:6; } -path.stroke.highway-footway, -path.stroke.highway-cycleway, -path.stroke.highway-steps { +path.stroke.tag-highway-footway, +path.stroke.tag-highway-cycleway, +path.stroke.tag-highway-steps { stroke: #ff6257; stroke-width: 3; stroke-dasharray: 6, 6; } -path.casing.highway-footway, -path.casing.highway-cycleway, -path.casing.highway-steps { +path.casing.tag-highway-footway, +path.casing.tag-highway-cycleway, +path.casing.tag-highway-steps { stroke-width: 3; stroke: #fff; } -path.stroke.highway-motorway, path.stroke.highway-motorway_link { +path.stroke.tag-highway-motorway, +path.stroke.tag-highway-motorway_link { stroke:#809BC0; stroke-width:3; } -path.casing.highway-motorway, path.casing.highway-motorway_link { +path.casing.tag-highway-motorway, +path.casing.tag-highway-motorway_link { stroke:#809BC0; stroke-width:9; stroke-opacity:0.4; } -path.stroke.highway-trunk, path.stroke.highway-trunk_link { +path.stroke.tag-highway-trunk, +path.stroke.tag-highway-trunk_link { stroke-width:7; stroke-opacity:0.4; stroke:#7FC97F; } -path.casing.highway-trunk, path.casing.highway-trunk_link { +path.casing.tag-highway-trunk, +path.casing.tag-highway-trunk_link { stroke-width:4; stroke:#7FC97F; } -path.stroke.highway-primary, path.stroke.highway-primary_link { +path.stroke.tag-highway-primary, +path.stroke.tag-highway-primary_link { stroke:#FD969A; stroke-width:5; } -path.casing.highway-primary, path.casing.highway-primary_link { +path.casing.tag-highway-primary, +path.casing.tag-highway-primary_link { stroke:#FF6363; stroke-opacity:0.4; stroke-width:12; } -path.stroke.highway-secondary, path.stroke.highway-secondary_link { +path.stroke.tag-highway-secondary, +path.stroke.tag-highway-secondary_link { stroke:#FDBF6F; stroke-width:4; } -path.casing.highway-secondary, path.casing.highway-secondary_link { +path.casing.tag-highway-secondary, +path.casing.tag-highway-secondary_link { stroke-opacity:0.4; stroke:#FDBF6F; stroke-width:11; } -path.stroke.bridge-yes { +path.stroke.tag-bridge-yes { stroke:#eee; stroke-width:7; } -path.stroke.waterway { +path.stroke.tag-waterway { stroke: #10539a; stroke-width: 3; } @@ -247,7 +255,7 @@ text { font-size:10px; } -text.oneway { +text.tag-oneway { fill:#91CFFF; stroke:#2C6B9B; stroke-width:1; diff --git a/js/id/renderer/style.js b/js/id/renderer/style.js index bf33a1bce..4c35c5650 100644 --- a/js/id/renderer/style.js +++ b/js/id/renderer/style.js @@ -56,11 +56,11 @@ iD.Style.TAG_CLASSES = iD.util.trueObj([ iD.Style.styleClasses = function(pre) { return function(d) { var tags = d.tags; - var c = [pre]; + var c = pre ? [pre] : []; for (var k in tags) { if (!iD.Style.TAG_CLASSES[k]) continue; - c.push(k + '-' + tags[k]); - c.push(k); + c.push('tag-' + k); + c.push('tag-' + k + '-' + tags[k]); } return c.join(' '); }; diff --git a/test/spec/renderer/style.js b/test/spec/renderer/style.js index ef0519c3f..b48554c84 100644 --- a/test/spec/renderer/style.js +++ b/test/spec/renderer/style.js @@ -1,4 +1,4 @@ -describe('Style', function() { +describe('iD.Style', function() { describe('#waystack', function() { it('stacks bridges over non-bridges', function() { var a = { tags: { bridge: 'yes' } }, @@ -6,6 +6,7 @@ describe('Style', function() { expect(iD.Style.waystack(a, b)).to.equal(1); expect(iD.Style.waystack(b, a)).to.equal(-1); }); + it('stacks layers', function() { var a = { tags: { layer: 1 } }, b = { tags: { layer: 0 } }; @@ -13,14 +14,24 @@ describe('Style', function() { expect(iD.Style.waystack(b, a)).to.equal(-1); }); }); + describe('#styleClasses', function() { - it('no valid classes', function() { - var a = { tags: { } }; - expect(iD.Style.styleClasses('')(a)).to.equal(''); + it('returns an empty string when no classes are present', function() { + var classes = iD.Style.styleClasses(''), + entity = iD.Entity(); + expect(classes(entity)).to.equal(''); }); - it('a valid class', function() { - var a = { tags: { highway: 'primary' } }; - expect(iD.Style.styleClasses('')(a)).to.equal(' highway-primary highway'); + + it('returns a string containing predefined classes', function() { + var classes = iD.Style.styleClasses('selected'), + entity = iD.Entity(); + expect(classes(entity)).to.equal('selected'); + }); + + it('returns a string containing classes for highway tags', function() { + var classes = iD.Style.styleClasses(''), + entity = iD.Entity({tags: {highway: 'primary'}}); + expect(classes(entity)).to.equal('tag-highway tag-highway-primary'); }); }); });