diff --git a/css/25_areas.css b/css/25_areas.css index ca964e54e..7e6d9f41a 100644 --- a/css/25_areas.css +++ b/css/25_areas.css @@ -31,7 +31,6 @@ path.stroke.tag-leisure-track, path.stroke.tag-leisure-golf_course, path.stroke.tag-leisure-garden, path.stroke.tag-leisure-park, -path.stroke.tag-barrier-hedge, path.stroke.tag-landuse-forest, path.stroke.tag-landuse-wood, path.stroke.tag-landuse-grass { diff --git a/css/50_misc.css b/css/50_misc.css index 0e3e726e2..a8dcd4c95 100644 --- a/css/50_misc.css +++ b/css/50_misc.css @@ -95,9 +95,13 @@ path.line.stroke.tag-natural-tree_row { /* barriers and similar */ -path.line.stroke.tag-barrier:not(.tag-barrier-hedge) { +path.line.stroke.tag-barrier { stroke: #ddd; } +path.line.stroke.tag-barrier-hedge { + stroke: rgb(140, 208, 95); +} + path.line.stroke.tag-barrier, path.line.stroke.tag-man_made-groyne, path.line.stroke.tag-man_made-breakwater { diff --git a/modules/svg/tag_classes.js b/modules/svg/tag_classes.js index 588fad521..8d4a195cd 100644 --- a/modules/svg/tag_classes.js +++ b/modules/svg/tag_classes.js @@ -30,21 +30,29 @@ export function svgTagClasses() { } var t = _tags(entity); - var isMultiPolygon = (t.type === 'multipolygon'); - var shouldRenderLineAsArea = isMultiPolygon && !entity.hasInterestingTags(); - 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) { // style multipolygon inner/outers as areas not lines - return (klass === 'line' && shouldRenderLineAsArea) ? 'area' : 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]; diff --git a/test/spec/svg/tag_classes.js b/test/spec/svg/tag_classes.js index 8baa177dd..2df7caeb1 100644 --- a/test/spec/svg/tag_classes.js +++ b/test/spec/svg/tag_classes.js @@ -209,6 +209,25 @@ describe('iD.svgTagClasses', function () { expect(selection.attr('class')).to.equal('selected'); }); + it('stroke overrides: renders areas with barriers as lines', function() { + selection + .attr('class', 'way area stroke') + .datum(iD.osmEntity({tags: {landuse: 'residential', barrier: 'hedge'}})) + .call(iD.svgTagClasses()); + expect(selection.classed('area')).to.be.false; + expect(selection.classed('line')).to.be.true; + }); + + it('stroke overrides: renders simple multipolygon lines as areas', function() { + var multipolygon = function () { return { type: 'multipolygon' }; }; + selection + .attr('class', 'way line stroke') + .datum(iD.osmEntity({tags: {}})) + .call(iD.svgTagClasses().tags(multipolygon)); + expect(selection.classed('area')).to.be.true; + expect(selection.classed('line')).to.be.false; + }); + it('works on SVG elements', function() { selection = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'g')); selection