Do not fully fill certain landuse values, e.g. landuse=residential

residential, retail, commercial and industrial landuse tags
typically cover large, dense areas with many overlapping
features. The large click targets of filled areas have proven
to be very good for usability in the general case, but are
a common source of accidental mistagging in this case.

We may add additional tags to this list, but these are the
obvious first step — especially landuse=residential.

Fixes #542.

css/map.css

@@ -261,15 +261,24 @@ path.fill.tag-leisure-park {
     background-color: rgba(140, 208, 95, 0.2);
 }
 
+path.fill.tag-landuse-residential,
+path.fill.tag-landuse-retail,
+path.fill.tag-landuse-commercial,
+path.fill.tag-landuse-industrial {
+    fill: none;
+    stroke-width: 60px;
+}
+
 path.stroke.tag-landuse-residential {
     stroke: rgb(224, 110, 95);
 }
 path.fill.tag-landuse-residential {
-    fill: rgba(224, 110, 95, 0.1);
+    stroke: rgba(224, 110, 95, 0.3);
 }
 .preset-icon-fill-area.tag-landuse-residential {
     border-color: rgb(224, 110, 95);
-    background-color: rgba(224, 110, 95, 0.1);
+    background: none;
+    box-shadow: inset 0 0 0 5px rgba(224, 110, 95, 0.3);
 }
 
 path.stroke.tag-landuse-retail,
@@ -278,23 +287,25 @@ path.stroke.tag-landuse-commercial {
 }
 path.fill.tag-landuse-retail,
 path.fill.tag-landuse-commercial {
-    fill: rgba(234, 176, 86, 0.1);
+    stroke: rgba(234, 176, 86, 0.3);
 }
 .preset-icon-fill-area.tag-landuse-retail,
 .preset-icon-fill-area.tag-landuse-commercial {
     border-color: rgb(234, 176, 86);
-    background-color: rgba(234, 176, 86, 0.1);
+    background: none;
+    box-shadow: inset 0 0 0 5px rgba(234, 176, 86, 0.3);
 }
 
 path.stroke.tag-landuse-industrial {
     stroke: rgb(228, 164, 245);
 }
 path.fill.tag-landuse-industrial {
-    fill: rgba(228, 164, 245, 0.1);
+    stroke: rgba(228, 164, 245, 0.3);
 }
 .preset-icon-fill-area.tag-landuse-industrial {
     border-color: rgb(228, 164, 245);
-    background-color: rgba(228, 164, 245, 0.1);
+    background: none;
+    box-shadow: inset 0 0 0 5px rgba(228, 164, 245, 0.3);
 }
 
 path.stroke.tag-landuse-basin,

js/id/svg/areas.js

@@ -17,6 +17,12 @@ iD.svg.Areas = function(projection) {
 
     var patternKeys = ['landuse', 'natural', 'amenity'];
 
+    var clipped = ['residential', 'commercial', 'retail', 'industrial'];
+
+    function clip(entity) {
+        return clipped.indexOf(entity.tags.landuse) !== -1;
+    }
+
     function setPattern(d) {
         for (var i = 0; i < patternKeys.length; i++) {
             if (patterns.hasOwnProperty(d.tags[patternKeys[i]])) {
@@ -59,11 +65,28 @@ iD.svg.Areas = function(projection) {
         });
 
         var data = {
+            clip: areas.filter(clip),
             shadow: strokes,
             stroke: strokes,
             fill: areas
         };
 
+        var clipPaths = surface.selectAll('defs').selectAll('.clipPath')
+           .filter(filter)
+           .data(data.clip, iD.Entity.key);
+
+        clipPaths.enter()
+           .append('clipPath')
+           .attr('class', 'clipPath')
+           .attr('id', function(entity) { return entity.id + '-clippath'; })
+           .append('path');
+
+        clipPaths.selectAll('path')
+           .attr('d', path);
+
+        clipPaths.exit()
+           .remove();
+
         var areagroup = surface
             .select('.layer-areas')
             .selectAll('g.areagroup')
@@ -102,6 +125,10 @@ iD.svg.Areas = function(projection) {
 
                 this.setAttribute('class', entity.type + ' area ' + layer + ' ' + entity.id);
 
+                if (layer === 'fill' && clip(entity)) {
+                    this.setAttribute('clip-path', 'url(#' + entity.id + '-clippath)');
+                }
+
                 if (layer === 'fill') {
                     setPattern.apply(this, arguments);
                 }

js/id/svg/surface.js

@@ -1,5 +1,10 @@
 iD.svg.Surface = function() {
     return function (selection) {
+        selection.selectAll('defs')
+            .data([0])
+            .enter()
+            .append('defs');
+
         var layers = selection.selectAll('.layer')
             .data(['areas', 'lines', 'hit', 'halo', 'label']);