From b4fa085663ec34ed923a36a369ca3a0f130986d3 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Tue, 27 May 2014 13:53:09 -0700
Subject: [PATCH] Do not fully fill certain landuse values, e.g.
 landuse=residential
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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          | 23 +++++++++++++++++------
 js/id/svg/areas.js   | 27 +++++++++++++++++++++++++++
 js/id/svg/surface.js |  5 +++++
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/css/map.css b/css/map.css
index ba026debf..c4a0ddc84 100644
--- a/css/map.css
+++ b/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,
diff --git a/js/id/svg/areas.js b/js/id/svg/areas.js
index d2ed972d4..12070f993 100644
--- a/js/id/svg/areas.js
+++ b/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);
                 }
diff --git a/js/id/svg/surface.js b/js/id/svg/surface.js
index c489ea0df..fbd7ba99d 100644
--- a/js/id/svg/surface.js
+++ b/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']);