Merge pull request #5491 from RudyTheDev/pattern-tag-use

Forest and wetland sub-type fill patterns

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 {

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

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