Merge pull request #5499 from RudyTheDev/more-fill-patterns

Add fill patterns for various areas

css/25_areas.css

@@ -94,6 +94,10 @@ path.fill.tag-natural-water {
     border-color: rgb(119, 211, 222);
     background-color: rgba(119, 211, 222, 0.3);
 }
+.pattern-color-waves,
+.pattern-color-pond {
+    fill: rgba(119, 211, 222, 0.3);
+}
 
 /* Yellow things */
 .pattern-color-beach,
@@ -181,6 +185,11 @@ path.fill.tag-landuse-military {
     border-color: rgb(214, 136, 26);
     background-color: rgba(214, 136, 26, 0.3);
 }
+.pattern-color-landfill
+{
+    fill: rgba(214, 136, 26, 0.3);
+}
+
 
 /* Pink things */
 path.stroke.tag-landuse-industrial,
@@ -216,23 +225,27 @@ path.stroke.tag-natural-wetland {
 
 /* Light Green things */
 .pattern-color-cemetery,
+.pattern-color-cemetery_christian,
+.pattern-color-cemetery_buddhist,
+.pattern-color-cemetery_muslim,
+.pattern-color-cemetery_jewish,
 .pattern-color-orchard,
+.pattern-color-vineyard,
 .pattern-color-meadow,
-.pattern-color-farm,
 .pattern-color-farmland {
     fill: rgba(191, 232, 63, 0.2);
 }
 path.stroke.tag-landuse-cemetery,
 path.stroke.tag-landuse-orchard,
+path.stroke.tag-landuse-vineyard,
 path.stroke.tag-landuse-meadow,
-path.stroke.tag-landuse-farm,
 path.stroke.tag-landuse-farmland {
     stroke: rgb(191, 232, 63);
 }
 .preset-icon-fill-area.tag-landuse-cemetery,
 .preset-icon-fill-area.tag-landuse-orchard,
+.preset-icon-fill-area.tag-landuse-vineyard,
 .preset-icon-fill-area.tag-landuse-meadow,
-.preset-icon-fill-area.tag-landuse-farm,
 .preset-icon-fill-area.tag-landuse-farmland {
     background-color: rgba(191, 232, 63, 0.2);
 }
@@ -249,6 +262,9 @@ path.fill.tag-landuse-farmyard {
     border-color: rgb(226, 177, 111);
     background: rgba(245, 220, 186, 0.3);
 }
+.pattern-color-farmyard {
+    fill: rgba(245, 220, 186, 0.3);
+}
 
 /* Dark Gray things */
 path.stroke.tag-amenity-parking,
@@ -280,6 +296,10 @@ path.fill.tag-landuse-quarry {
     border-color: rgb(170, 170, 170);
     background-color: rgba(140, 140, 140, 0.5);
 }
+.pattern-color-quarry
+{
+    fill: rgba(140, 140, 140, 0.5);
+}
 
 /* Light gray overrides */
 path.stroke.tag-natural-cave_entrance,

modules/svg/areas.js

@@ -19,10 +19,16 @@ export function svgAreas(projection, context) {
             grave_yard: 'cemetery'
         },
         landuse: {
-            cemetery: 'cemetery',
+            cemetery: [
+                { religion: 'christian', pattern: 'cemetery_christian' },
+                { religion: 'buddhist', pattern: 'cemetery_buddhist' },
+                { religion: 'muslim', pattern: 'cemetery_muslim' },
+                { religion: 'jewish', pattern: 'cemetery_jewish' },
+                { pattern: 'cemetery' }
+            ],
             construction: 'construction',
-            farm: 'farmland',
             farmland: 'farmland',
+            farmyard: 'farmyard',
             forest: [
                 { leaf_type: 'broadleaved', pattern: 'forest_broadleaved' },
                 { leaf_type: 'needleleaved', pattern: 'forest_needleleaved' },
@@ -31,15 +37,22 @@ export function svgAreas(projection, context) {
             ],
             grave_yard: 'cemetery',
             grass: 'grass',
+            landfill: 'landfill',
             meadow: 'meadow',
             military: 'construction',
-            orchard: 'orchard'
+            orchard: 'orchard',
+            quarry: 'quarry',
+            vineyard: 'vineyard'
         },
         natural: {
             beach: 'beach',
             grassland: 'grass',
             sand: 'beach',
             scrub: 'scrub',
+            water: [
+                { water: 'pond', pattern: 'pond' },
+                { pattern: 'waves' }
+            ],
             wetland: [
                 { wetland: 'marsh', pattern: 'wetland_marsh' },
                 { wetland: 'swamp', pattern: 'wetland_swamp' },
@@ -56,16 +69,16 @@ export function svgAreas(projection, context) {
         }
     };
 
-    function setPattern(d) {
+    function setPattern(entity) {
         // Skip pattern filling if this is a building (buildings don't get patterns applied)
-        if (d.tags.building && d.tags.building !== 'no') {
+        if (entity.tags.building && entity.tags.building !== 'no') {
             this.style.fill = this.style.stroke = '';
             return;
         }
 
         for (var tag in patterns) {
             if (patterns.hasOwnProperty(tag)) {
-                var entityValue = d.tags[tag];
+                var entityValue = entity.tags[tag];
                 if (entityValue) {
 
                     var values = patterns[tag];
@@ -84,7 +97,7 @@ export function svgAreas(projection, context) {
                                     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];
+                                            var v = entity.tags[criterion];
                                             if (!v || v !== rule[criterion]) {
                                                 pass = false;
                                                 break;
@@ -261,7 +274,7 @@ export function svgAreas(projection, context) {
 
                 if (layer === 'fill') {
                     this.setAttribute('clip-path', 'url(#' + entity.id + '-clippath)');
-                    setPattern.apply(this, arguments);
+                    setPattern.call(this, entity);
                 }
             })
             .call(svgTagClasses())

modules/svg/defs.js

@@ -72,23 +72,33 @@ export function svgDefs(context) {
         var patterns = defs.selectAll('pattern')
             .data([
                 // pattern name, pattern image name
+                ['beach', 'dots'],
+                ['construction', 'construction'],
+                ['cemetery', 'cemetery'],
+                ['cemetery_christian', 'cemetery_christian'],
+                ['cemetery_buddhist', 'cemetery_buddhist'],
+                ['cemetery_muslim', 'cemetery_muslim'],
+                ['cemetery_jewish', 'cemetery_jewish'],
+                ['farmland', 'farmland'],
+                ['farmyard', 'farmyard'],
+                ['forest', 'forest'],
+                ['forest_broadleaved', 'forest_broadleaved'],
+                ['forest_needleleaved', 'forest_needleleaved'],
+                ['forest_leafless', 'forest_leafless'],
+                ['grass', 'grass'],
+                ['landfill', 'landfill'],
+                ['meadow', 'grass'],
+                ['orchard', 'orchard'],
+                ['pond', 'pond'],
+                ['quarry', 'quarry'],
+                ['scrub', 'bushes'],
+                ['vineyard', 'vineyard'],
+                ['waves', 'waves'],
                 ['wetland', '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'],
-                ['farmland', 'farmland'],
-                ['beach', 'dots'],
-                ['meadow', 'grass'],
-                ['grass', 'grass'],
-                ['forest', 'forest'],
-                ['forest_broadleaved', 'forest_broadleaved'],
-                ['forest_needleleaved', 'forest_needleleaved'],
-                ['forest_leafless', 'forest_leafless']
+                ['wetland_reedbed', 'wetland_reedbed']
             ])
             .enter()
             .append('pattern')