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

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