Merge pull request #5606 from RudyTheDev/additional-styles

Standing water fill pattern and water "barriers"

css/25_areas.css

@@ -80,7 +80,9 @@ path.stroke.tag-natural-water,
 path.stroke.tag-landuse-aquaculture,
 path.stroke.tag-landuse-basin,
 path.stroke.tag-landuse-harbour,
-path.stroke.tag-landuse-reservoir {
+path.stroke.tag-landuse-reservoir,
+path.stroke.tag-man_made-groyne,
+path.stroke.tag-man_made-breakwater {
     stroke: rgb(119, 211, 222);
 }
 path.fill.tag-amenity-swimming_pool,
@@ -93,6 +95,9 @@ path.fill.tag-natural-water {
     stroke: rgba(119, 211, 222, 0.3);
     fill: rgba(119, 211, 222, 0.3);
 }
+path.fill.tag-amenity-fountain {
+    fill: rgba(119, 211, 222, 0.3);
+}
 .preset-icon-fill-area.tag-amenity-swimming_pool,
 .preset-icon-fill-area.tag-leisure-swimming_pool,
 .preset-icon-fill-area.tag-landuse-aquaculture,
@@ -104,6 +109,7 @@ path.fill.tag-natural-water {
     background-color: rgba(119, 211, 222, 0.3);
 }
 .pattern-color-waves,
+.pattern-color-water_standing,
 .pattern-color-pond {
     fill: rgba(119, 211, 222, 0.3);
 }

css/50_misc.css

@@ -96,16 +96,20 @@ path.line.stroke.tag-natural-tree_row {
 }
 
 
-/* barriers */
+/* barriers and similar */
 path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
     stroke: #ddd;
 }
-path.line.stroke.tag-barrier {
+path.line.stroke.tag-barrier,
+path.stroke.tag-man_made-groyne,
+path.stroke.tag-man_made-breakwater {
     stroke-width: 3px;
     stroke-linecap: round;
     stroke-dasharray: 15, 5, 1, 5;
 }
-.low-zoom path.line.stroke.tag-barrier {
+.low-zoom path.line.stroke.tag-barrier,
+.low-zoom path.stroke.tag-man_made-groyne,
+.low-zoom path.stroke.tag-man_made-breakwater {
     stroke-width: 2px;
     stroke-linecap: butt;
     stroke-dasharray: 8, 2, 2, 2;

modules/svg/areas.js

@@ -11,12 +11,15 @@ 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 = {
+        // tag - pattern name
+        // -or-
         // 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'
+            grave_yard: 'cemetery',
+            fountain: 'water_standing'
         },
         landuse: {
             cemetery: [
@@ -41,6 +44,7 @@ export function svgAreas(projection, context) {
             meadow: 'meadow',
             military: 'construction',
             orchard: 'orchard',
+            reservoir: 'water_standing',
             quarry: 'quarry',
             vineyard: 'vineyard'
         },
@@ -51,6 +55,7 @@ export function svgAreas(projection, context) {
             scrub: 'scrub',
             water: [
                 { water: 'pond', pattern: 'pond' },
+                { water: 'reservoir', pattern: 'water_standing' },
                 { pattern: 'waves' }
             ],
             wetland: [
@@ -91,33 +96,38 @@ export function svgAreas(projection, context) {
             var entityValue = entity.tags[tag];
             if (!entityValue) continue;
 
-            var values = patterns[tag];
-            for (var value in values) {
-                if (entityValue !== value) continue;
-
-                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 = entity.tags[criterion];
-                                if (!v || v !== rule[criterion]) {
-                                    pass = false;
-                                    break;
+            if (typeof patterns[tag] === 'string') { // extra short syntax (just tag) - pattern name
+                this.style.fill = this.style.stroke = 'url("#pattern-' + patterns[tag] + '")';
+                return;
+            } else {
+                var values = patterns[tag];
+                for (var value in values) {
+                    if (entityValue !== value) continue;
+
+                    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 = entity.tags[criterion];
+                                    if (!v || v !== rule[criterion]) {
+                                        pass = false;
+                                        break;
+                                    }
                                 }
                             }
-                        }
 
-                        if (pass) {
-                            this.style.fill = this.style.stroke = 'url("#pattern-' + rule.pattern + '")';
-                            return;
+                            if (pass) {
+                                this.style.fill = this.style.stroke = 'url("#pattern-' + rule.pattern + '")';
+                                return;
+                            }
                         }
                     }
                 }

modules/svg/defs.js

@@ -125,6 +125,7 @@ export function svgDefs(context) {
                 ['quarry', 'quarry'],
                 ['scrub', 'bushes'],
                 ['vineyard', 'vineyard'],
+                ['water_standing', 'lines'],
                 ['waves', 'waves'],
                 ['wetland', 'wetland'],
                 ['wetland_marsh', 'wetland_marsh'],