Add fill patterns for landuse, natural areas

Not working in Firefox. To get it to work in Firefox,
styles need to be directly applied to the path, or
set in an embedded stylesheet (not sure whats going on there).

css/map.css

@@ -289,11 +289,33 @@ path.fill.tag-leisure-park {
 
 path.fill.tag-landuse-residential,
 path.fill.tag-landuse-commercial,
-path.fill.tag-landuse-industrial,
-path.fill.tag-landuse-construction {
+path.fill.tag-landuse-industrial {
     fill-opacity: 0.1;
 }
 
+path.fill.tag-natural-wetland,
+path.fill.tag-natural-beach,
+path.fill.tag-natural-scrub,
+path.fill.tag-landuse-cemetery,
+path.fill.tag-landuse-meadow,
+path.fill.tag-landuse-farmland,
+path.fill.tag-landuse-construction,
+path.fill.tag-landuse-orchard {
+    /* background color is applied a further opacity later */
+    fill-opacity: 0.8;
+}
+
+.pattern-color-beach,
+.pattern-color-scrub,
+.pattern-color-meadow,
+.pattern-color-wetland,
+.pattern-color-cemetery,
+.pattern-color-farmland,
+.pattern-color-construction,
+.pattern-color-orchard {
+    fill-opacity: 0.2;
+}
+
 path.fill.tag-landuse-basin,
 path.fill.tag-landuse-reservoir { 
     fill: #77d3de;
@@ -308,38 +330,59 @@ path.fill.tag-landuse-residential {
 }
 
 path.fill.tag-landuse-farmland { 
-    fill: url(#) #8cd05f;
+    fill: url(#pattern-farmland) #8cd05f;
+}
+.pattern-color-farmland {
+    fill: url(#pattern-farmland) #8cd05f;
 }
 
 path.fill.tag-landuse-meadow { 
-    /* Use the dots pattern here */
-    fill: url(#) #b6e199;
+    fill: url(#pattern-meadow) #b6e199;
+}
+.pattern-color-meadow {
+    fill: #b6e199;
 }
 
 path.fill.tag-natural-wetland { 
-    fill: url(#) #b6e199;
+    fill: url(#pattern-wetland) #b6e199;
+}
+.pattern-color-wetland {
+    fill: #B6E199;
 }
 
 path.fill.tag-natural-beach {
-    /* Use the dots pattern here */
-    fill: url(#) #ffff7e;
+    fill: url(#pattern-beach) #ffff7e;
+}
+.pattern-color-beach {
+    fill: #ffff7e;
 }
 
 path.fill.tag-natural-scrub {
-    /* Use the dots pattern here */
-    fill: url(#) #dbf08b;
+    fill: url(#pattern-scrub) #dbf08b;
+}
+.pattern-color-scrub {
+    fill: #dbf08b;
 }
 
 path.fill.tag-landuse-cemetery { 
-    fill: url(#) #8cd05f;
+    fill: url(#pattern-cemetery) #8cd05f;
+}
+.pattern-color-cemetery {
+    fill: #8cd05f
 }
 
 path.fill.tag-landuse-orchard { 
-    fill: url(#) #8cd05f;
+    fill: url(#pattern-orchard) #8cd05f;
+}
+.pattern-color-orchard {
+    fill: #8cd05f
 }
 
 path.fill.tag-landuse-construction { 
-    fill: url(#) #e06e5f;
+    fill: url(#pattern-construction) #e06e5f;
+}
+.pattern-color-construction {
+    fill: #e06e5f;
 }
 
 path.fill.tag-landuse-commercial { 

js/id/svg/surface.js

@@ -13,6 +13,45 @@ iD.svg.Surface = function() {
             .append('path')
             .attr('d', 'M 0 0 L 5 2.5 L 0 5 z');
 
+        var patterns = defs.selectAll('pattern')
+            .data([
+                // pattern name, pattern image name
+                ['wetland', 'wetland'],
+                ['construction', 'construction'],
+                ['cemetery', 'cemetery'],
+                ['orchard', 'orchard'],
+                ['farmland', 'farmland'],
+                ['beach', 'dots'],
+                ['scrub', 'dots'],
+                ['meadow', 'dots']])
+            .enter()
+            .append('pattern')
+                .attr({
+                    id: function(d) { return 'pattern-' + d[0]; },
+                    width: 32,
+                    height: 32,
+                    patternUnits: 'userSpaceOnUse'
+                });
+
+        patterns.append('rect')
+            .attr({
+                x: 0,
+                y: 0,
+                width: 32,
+                height: 32,
+                'class': function(d) { return 'pattern-color-' + d[0]; }
+            });
+
+        patterns.append('image')
+            .attr({
+                x: 0,
+                y: 0,
+                width: 32,
+                height: 32
+            })
+            .attr('xlink:href', function(d) { return 'img/pattern/' + d[1] + '.png'; });
+
+
         var layers = selection.selectAll('.layer')
             .data(['fill', 'shadow', 'casing', 'stroke', 'text', 'hit', 'halo', 'label']);