diff --git a/css/25_areas.css b/css/25_areas.css index 53b8c384d..85f886bef 100644 --- a/css/25_areas.css +++ b/css/25_areas.css @@ -56,6 +56,9 @@ path.fill.tag-landuse-grass { background-color: rgba(140, 208, 95, 0.3); } .pattern-color-forest, +.pattern-color-forest_broadleaved, +.pattern-color-forest_needleleaved, +.pattern-color-forest_leafless, .pattern-color-wood, .pattern-color-grass { fill: rgba(140, 208, 95, 0.3); @@ -196,7 +199,11 @@ path.fill.tag-power-plant { } /* Teal things */ -.pattern-color-wetland { +.pattern-color-wetland, +.pattern-color-wetland_marsh, +.pattern-color-wetland_swamp, +.pattern-color-wetland_bog, +.pattern-color-wetland_reedbed { fill: rgba(153, 225, 170, 0.3); } path.stroke.tag-natural-wetland { diff --git a/dist/img/pattern/bushes.png b/dist/img/pattern/bushes.png new file mode 100644 index 000000000..c9df1a23d Binary files /dev/null and b/dist/img/pattern/bushes.png differ diff --git a/dist/img/pattern/forest.png b/dist/img/pattern/forest.png index b7b2d2943..c3b07b3b7 100644 Binary files a/dist/img/pattern/forest.png and b/dist/img/pattern/forest.png differ diff --git a/dist/img/pattern/forest_broadleaved.png b/dist/img/pattern/forest_broadleaved.png new file mode 100644 index 000000000..b14ce056c Binary files /dev/null and b/dist/img/pattern/forest_broadleaved.png differ diff --git a/dist/img/pattern/forest_leafless.png b/dist/img/pattern/forest_leafless.png new file mode 100644 index 000000000..d97bc595f Binary files /dev/null and b/dist/img/pattern/forest_leafless.png differ diff --git a/dist/img/pattern/forest_needleleaved.png b/dist/img/pattern/forest_needleleaved.png new file mode 100644 index 000000000..cf4443443 Binary files /dev/null and b/dist/img/pattern/forest_needleleaved.png differ diff --git a/dist/img/pattern/grass.png b/dist/img/pattern/grass.png index bd7445b0c..cb0621cae 100644 Binary files a/dist/img/pattern/grass.png and b/dist/img/pattern/grass.png differ diff --git a/dist/img/pattern/wetland.png b/dist/img/pattern/wetland.png index c9df1a23d..cba67b1f3 100644 Binary files a/dist/img/pattern/wetland.png and b/dist/img/pattern/wetland.png differ diff --git a/dist/img/pattern/wetland_bog.png b/dist/img/pattern/wetland_bog.png new file mode 100644 index 000000000..d2fc598b5 Binary files /dev/null and b/dist/img/pattern/wetland_bog.png differ diff --git a/dist/img/pattern/wetland_marsh.png b/dist/img/pattern/wetland_marsh.png new file mode 100644 index 000000000..1cc15458c Binary files /dev/null and b/dist/img/pattern/wetland_marsh.png differ diff --git a/dist/img/pattern/wetland_reedbed.png b/dist/img/pattern/wetland_reedbed.png new file mode 100644 index 000000000..2138dcab2 Binary files /dev/null and b/dist/img/pattern/wetland_reedbed.png differ diff --git a/dist/img/pattern/wetland_swamp.png b/dist/img/pattern/wetland_swamp.png new file mode 100644 index 000000000..6b7cb4bb5 Binary files /dev/null and b/dist/img/pattern/wetland_swamp.png differ diff --git a/modules/svg/areas.js b/modules/svg/areas.js index 78149c19a..bc4968a50 100644 --- a/modules/svg/areas.js +++ b/modules/svg/areas.js @@ -11,35 +11,99 @@ export function svgAreas(projection, context) { // Patterns only work in Firefox when set directly on element. // (This is not a bug: https://bugzilla.mozilla.org/show_bug.cgi?id=750632) var patterns = { - beach: 'beach', - cemetery: 'cemetery', - construction: 'construction', - farm: 'farmland', - farmland: 'farmland', - forest: 'forest', - wood: 'forest', - grave_yard: 'cemetery', - grass: 'grass', - meadow: 'meadow', - military: 'construction', - orchard: 'orchard', - sand: 'beach', - scrub: 'scrub', - wetland: 'wetland', + // tag - value - pattern name + // -or- + // tag - value - rules (optional tag-values, pattern name) + // (matches earlier rules first, so fallback should be last entry) + amenity: { + grave_yard: 'cemetery' + }, + landuse: { + cemetery: 'cemetery', + construction: 'construction', + farm: 'farmland', + farmland: 'farmland', + forest: [ + { leaf_type: 'broadleaved', pattern: 'forest_broadleaved' }, + { leaf_type: 'needleleaved', pattern: 'forest_needleleaved' }, + { leaf_type: 'leafless', pattern: 'forest_leafless' }, + { pattern: 'forest' } // same as 'leaf_type:mixed' + ], + grave_yard: 'cemetery', + grass: 'grass', + meadow: 'meadow', + military: 'construction', + orchard: 'orchard' + }, + natural: { + beach: 'beach', + grassland: 'grass', + sand: 'beach', + scrub: 'scrub', + wetland: [ + { wetland: 'marsh', pattern: 'wetland_marsh' }, + { wetland: 'swamp', pattern: 'wetland_swamp' }, + { wetland: 'bog', pattern: 'wetland_bog' }, + { wetland: 'reedbed', pattern: 'wetland_reedbed' }, + { pattern: 'wetland' } + ], + wood: [ + { leaf_type: 'broadleaved', pattern: 'forest_broadleaved' }, + { leaf_type: 'needleleaved', pattern: 'forest_needleleaved' }, + { leaf_type: 'leafless', pattern: 'forest_leafless' }, + { pattern: 'forest' } // same as 'leaf_type:mixed' + ] + } }; - var patternKeys = ['landuse', 'natural', 'amenity']; - - function setPattern(d) { - for (var i = 0; i < patternKeys.length; i++) { - if (d.tags.building && d.tags.building !== 'no') continue; + // Skip pattern filling if this is a building (buildings don't get patterns applied) + if (d.tags.building && d.tags.building !== 'no') { + this.style.fill = this.style.stroke = ''; + return; + } - if (patterns.hasOwnProperty(d.tags[patternKeys[i]])) { - this.style.fill = this.style.stroke = 'url("#pattern-' + patterns[d.tags[patternKeys[i]]] + '")'; - return; + for (var tag in patterns) { + if (patterns.hasOwnProperty(tag)) { + var entityValue = d.tags[tag]; + if (entityValue) { + + var values = patterns[tag]; + for (var value in values) { + if (entityValue === value) { + + var rules = values[value]; + if (typeof rules === 'string') { // short syntax - pattern name + this.style.fill = this.style.stroke = 'url("#pattern-' + rules + '")'; + return; + } else { // long syntax - rule array + for (var ruleKey in rules) { + var rule = rules[ruleKey]; + + var pass = true; + for (var criterion in rule) { + if (criterion !== 'pattern') { // reserved for pattern name + // The only rule is a required tag-value pair + var v = d.tags[criterion]; + if (!v || v !== rule[criterion]) { + pass = false; + break; + } + } + } + + if (pass) { + this.style.fill = this.style.stroke = 'url("#pattern-' + rule.pattern + '")'; + return; + } + } + } + } + } + } } } + this.style.fill = this.style.stroke = ''; } diff --git a/modules/svg/defs.js b/modules/svg/defs.js index da42f492a..f8a3b1e98 100644 --- a/modules/svg/defs.js +++ b/modules/svg/defs.js @@ -73,7 +73,11 @@ export function svgDefs(context) { .data([ // pattern name, pattern image name ['wetland', 'wetland'], - ['scrub', 'wetland'], + ['wetland_marsh', 'wetland_marsh'], + ['wetland_swamp', 'wetland_swamp'], + ['wetland_bog', 'wetland_bog'], + ['wetland_reedbed', 'wetland_reedbed'], + ['scrub', 'bushes'], ['construction', 'construction'], ['cemetery', 'cemetery'], ['orchard', 'orchard'], @@ -82,7 +86,9 @@ export function svgDefs(context) { ['meadow', 'grass'], ['grass', 'grass'], ['forest', 'forest'], - ['wood', 'forest'] + ['forest_broadleaved', 'forest_broadleaved'], + ['forest_needleleaved', 'forest_needleleaved'], + ['forest_leafless', 'forest_leafless'] ]) .enter() .append('pattern')