Add backgrounds to area icons

css/app.css

@@ -687,6 +687,16 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     left: 10px; right: 10px; top: 10px; bottom: 10px;
     border-radius: 4px;
 }
+.grid-entry .grid-inner .preset-icon-fill.area {
+    position: absolute;
+    opacity: 0.4;
+    left: 0; right: 0; top: 0; bottom: 0;
+    border-radius: 4px;
+    margin: auto;
+    width: 40px;
+    height: 40px;
+}
+
 .preset-grid .grid-entry .icon {
     left: 0; right: 0; top: 0; bottom: 0;
     position: absolute;
@@ -715,6 +725,31 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
   height: 20px;
 }
 
+/* Preset icon colors */
+
+.preset-icon-fill.tag-amenity,
+.preset-icon-fill.tag-shop,
+.preset-icon-fill.tag-building {
+    background-color: #e06e5f;
+}
+
+.preset-icon-fill.tag-natural-water {
+    background-color: #77d3de;
+}
+
+.preset-icon-fill.tag-landuse,
+.preset-icon-fill.tag-natural-wood,
+.preset-icon-fill.tag-natural-tree,
+.preset-icon-fill.tag-natural-grassland,
+.preset-icon-fill.tag-leisure-park {
+    background-color: #8cd05f;
+}
+
+.preset-icon-fill.tag-amenity-parking {
+    background-color: #aaa;
+}
+
+
 /* Map Controls */
 
 .map-control {

js/id/ui/presetgrid.js

@@ -53,10 +53,18 @@ iD.ui.PresetGrid = function() {
                 event.choose(d);
             });
 
-        entered.append('div')
-            .attr('class','grid-inner fillL')
-            .append('div')
-                .attr('class', function(d) { return 'maki-' + d.icon + '-24 icon'; });
+        var inner = entered.append('div')
+            .attr('class','grid-inner fillL');
+        inner.append('div')
+            .attr('class', function(d) {
+                var s = 'preset-icon-fill ' + d.match.type.join(' ');
+                for (var i in d.match.tags) {
+                    s += ' tag-' + i + ' tag-' + i + '-' + d.match.tags[i];
+                }
+                return s;
+            });
+        inner.append('div')
+            .attr('class', function(d) { return 'maki-' + d.icon + '-24 icon'; });
         entered.append('span').attr('class','label').text(name);
 
         entries.exit().remove();

presets/presets.json

@@ -26,6 +26,30 @@
             }
         ]
     },
+    {
+        "title": "Park",
+        "name": "park",
+        "match": {
+            "type": ["node", "area"],
+            "tags": {
+                "leisure": "park"
+            }
+        },
+        "icon": "park",
+        "form": []
+    },
+    {
+        "title": "Water",
+        "name": "water",
+        "match": {
+            "type": ["node", "area"],
+            "tags": {
+                "natural": "water"
+            }
+        },
+        "icon": "",
+        "form": []
+    },
     {
         "title": "Supermarket",
         "name": "supermarket",