From 33b1f4f23cea8aa2b3f5a51d11bc46a2d86c1b09 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Sun, 20 Jan 2013 09:39:01 -0800
Subject: [PATCH] Render more line features

---
 css/map.css              | 181 +++++++++++++++++++++++++++++++++------
 js/id/svg/tag_classes.js |   6 +-
 test/rendering.html      |  45 ++++++++--
 3 files changed, 193 insertions(+), 39 deletions(-)

diff --git a/css/map.css b/css/map.css
index 20d2d8f8f..a5259d909 100644
--- a/css/map.css
+++ b/css/map.css
@@ -100,10 +100,11 @@ path.stroke {
 
 path.stroke,
 path.casing {
-    shape-rendering: crispEdges;
+    shape-rendering: optimizeSpeed;
 }
 
 path.shadow {
+    pointer-events: stroke;
     stroke-width: 10;
     -webkit-transition: stroke 100ms linear;
 }
@@ -118,18 +119,6 @@ path.shadow.selected {
     stroke-opacity: 0.7;
 }
 
-path.stroke.tag-railway-rail {
-    stroke: white;
-    stroke-width: 3;
-    stroke-dasharray: 12,12;
-}
-
-path.stroke.tag-railway-subway {
-    stroke: #444;
-    stroke-width: 3;
-    stroke-dasharray: 8,8;
-}
-
 path.area,
 path.multipolygon {
     stroke-width:2;
@@ -218,57 +207,98 @@ svg[data-zoom="16"] path.stroke.tag-highway {
 }
 
 path.stroke.tag-highway-motorway,
-path.stroke.tag-highway-motorway_link {
+path.stroke.tag-highway-motorway_link,
+path.stroke.tag-construction-motorway {
     stroke:#809bc0;
 }
 path.casing.tag-highway-motorway,
-path.casing.tag-highway-motorway_link {
+path.casing.tag-highway-motorway_link,
+path.casing.tag-construction-motorway {
     stroke:#506077;
 }
 
 path.stroke.tag-highway-trunk,
-path.stroke.tag-highway-trunk_link {
+path.stroke.tag-highway-trunk_link,
+path.stroke.tag-construction-trunk {
     stroke:#97d397;
 }
 path.casing.tag-highway-trunk,
-path.casing.tag-highway-trunk_link {
+path.casing.tag-highway-trunk_link,
+path.casing.tag-construction-trunk {
     stroke:#477147;
 }
 
 path.stroke.tag-highway-primary,
-path.stroke.tag-highway-primary_link {
+path.stroke.tag-highway-primary_link,
+path.stroke.tag-construction-primary {
     stroke:#ec989a;
 }
 path.casing.tag-highway-primary,
-path.casing.tag-highway-primary_link {
+path.casing.tag-highway-primary_link,
+path.casing.tag-construction-primary {
     stroke:#8d4346;
 }
 
 path.stroke.tag-highway-secondary,
-path.stroke.tag-highway-secondary_link {
+path.stroke.tag-highway-secondary_link,
+path.stroke.tag-construction-secondary {
     stroke:#fecc8b;
 }
 path.casing.tag-highway-secondary,
-path.casing.tag-highway-secondary_link {
+path.casing.tag-highway-secondary_link,
+path.casing.tag-construction-secondary {
     stroke:#a37b48;
 }
 
 path.stroke.tag-highway-tertiary,
-path.stroke.tag-highway-tertiary_link {
+path.stroke.tag-highway-tertiary_link,
+path.stroke.tag-construction-tertiary {
     stroke:#ffffb3;
 }
 path.casing.tag-highway-tertiary,
-path.casing.tag-highway-tertiary_link {
+path.casing.tag-highway-tertiary_link,
+path.casing.tag-construction-tertiary {
     stroke:#bbb;
 }
 
-path.stroke.tag-highway-residential {
+path.stroke.tag-highway-unclassified,
+path.stroke.tag-construction-unclassified {
+    stroke:#eaeaea;
+}
+path.casing.tag-highway-unclassified,
+path.casing.tag-construction-unclassified {
+    stroke:#444;
+}
+
+path.stroke.tag-highway-residential,
+path.stroke.tag-construction-residential {
     stroke:#fff;
 }
-path.casing.tag-highway-residential {
+path.casing.tag-highway-residential,
+path.casing.tag-construction-residential {
     stroke:#444;
 }
 
+path.stroke.tag-highway-living_street {
+    stroke:#ccc;
+    stroke-width:4;
+}
+path.casing.tag-highway-living_street {
+    stroke:#fff;
+    stroke-width:6;
+}
+
+path.stroke.tag-highway-pedestrian {
+    stroke:#fff;
+    stroke-dasharray: 2, 8;
+    stroke-width:4 !important;
+    shapeRendering: auto;
+}
+path.casing.tag-highway-pedestrian {
+    stroke:#84C382;
+    stroke-width:6 !important;
+}
+
 path.stroke.tag-highway-service {
     stroke:#fff;
     stroke-width:4;
@@ -305,10 +335,10 @@ path.stroke.tag-highway-path {
     stroke: #000;
     stroke-width: 1 !important;
     stroke-linecap: butt;
-    stroke-dasharray: 12, 6;
+    stroke-dasharray: 8, 4;
 }
 path.casing.tag-highway-path {
-    stroke-width: 3 !important;
+    stroke-width: 1 !important;
     stroke: #fff;
 }
 
@@ -363,11 +393,108 @@ path.casing.tag-bridge-yes {
     stroke: #000;
 }
 
+path.stroke.tag-highway-construction,
+path.casing.tag-highway-construction {
+    stroke-linecap: butt;
+    stroke-dasharray: 7, 7;
+}
+
+svg[data-zoom="16"] path.stroke.tag-highway-construction,
+svg[data-zoom="16"] path.casing.tag-highway-construction {
+    stroke-linecap: butt;
+    stroke-dasharray: 5, 5;
+}
+
+/* railways */
+
+path.stroke.tag-railway {
+    stroke: #eee;
+    stroke-width: 2;
+    stroke-linecap: butt;
+    stroke-dasharray: 12,12;
+}
+path.casing.tag-railway {
+    stroke: #555;
+    stroke-width: 4;
+}
+
+path.stroke.tag-railway-abandoned {
+    stroke: #eee;
+}
+path.casing.tag-railway-abandoned {
+    stroke: #999;
+}
+
+path.stroke.tag-railway-subway {
+    stroke: #666;
+}
+path.casing.tag-railway-subway {
+    stroke: #222;
+}
+
+/* waterways */
+
 path.stroke.tag-waterway {
     stroke: #10539a;
+    stroke-width: 2;
+}
+path.casing.tag-waterway {
+    stroke: #6AA2FF;
+    stroke-width: 4;
+}
+
+path.stroke.tag-waterway-river {
+    stroke-width: 4;
+}
+path.casing.tag-waterway-river {
+    stroke-width: 6;
+}
+
+svg[data-zoom="16"] path.stroke.tag-waterway-river {
+    stroke-width: 4;
+}
+svg[data-zoom="16"] path.casing.tag-waterway-river {
+    stroke-width: 6;
+}
+
+path.stroke.tag-waterway-ditch {
+    stroke: #10539a;
+    stroke-width: 1;
+}
+path.casing.tag-waterway-ditch {
+    stroke: #999692;
     stroke-width: 3;
 }
 
+/* power */
+
+path.stroke.tag-power {
+    stroke: #939393;
+    stroke-width: 2;
+}
+path.casing.tag-power {
+    stroke: none;
+}
+
+/* boundary */
+
+path.stroke.tag-boundary {
+    stroke: #fff;
+    stroke-width: 2;
+    stroke-linecap: butt;
+    stroke-dasharray: 20, 5, 5, 5;
+}
+path.casing.tag-boundary {
+    stroke: #82B5FE;
+    stroke-width: 6;
+}
+
+path.casing.tag-boundary-protected_area,
+path.casing.tag-boundary-national_park {
+    stroke: #4D9849;
+}
+
+
 text {
     font-size:10px;
     pointer-events: none;
diff --git a/js/id/svg/tag_classes.js b/js/id/svg/tag_classes.js
index a7660e1f5..5ce585add 100644
--- a/js/id/svg/tag_classes.js
+++ b/js/id/svg/tag_classes.js
@@ -1,8 +1,8 @@
 iD.svg.TagClasses = function() {
     var keys = iD.util.trueObj([
-        'highway', 'railway', 'motorway', 'amenity', 'natural',
-        'landuse', 'building', 'oneway', 'bridge', 'boundary',
-        'leisure'
+        'highway', 'railway', 'waterway', 'power', 'motorway', 'amenity',
+        'natural', 'landuse', 'building', 'oneway', 'bridge', 'boundary',
+        'leisure', 'construction'
     ]), tagClassRe = /^tag-/;
 
     return function tagClassesSelection(selection) {
diff --git a/test/rendering.html b/test/rendering.html
index 948f4593f..ebefeaa4a 100644
--- a/test/rendering.html
+++ b/test/rendering.html
@@ -36,7 +36,6 @@
 
     <table>
         <thead>
-            <tr class="title"><th colspan="7">Highways</th></tr>
             <tr><th></th><th colspan="3">z16</th><th colspan="3">z17</th></tr>
             <tr><th></th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th></tr>
         </thead>
@@ -47,17 +46,45 @@
     <script>
         var zooms = [16, 17],
             modes = ['base', 'hover', 'selected'],
-            highways = [
-                '', 'motorway', 'trunk', 'primary', 'secondary', 'tertiary', 'residential',
-                'service', 'track', 'road', 'unclassified', 'living_street', 'pedestrian',
-                'path', 'footway', 'cycleway', 'bridleway', 'steps', 'proposed', 'construction'];
+            tags = [
+                {},
+                {highway: 'motorway'},
+                {highway: 'trunk'},
+                {highway: 'primary'},
+                {highway: 'secondary'},
+                {highway: 'tertiary'},
+                {highway: 'residential'},
+                {highway: 'service'},
+                {highway: 'track'},
+                {highway: 'road'},
+                {highway: 'unclassified'},
+                {highway: 'living_street'},
+                {highway: 'pedestrian'},
+                {highway: 'path'},
+                {highway: 'footway'},
+                {highway: 'cycleway'},
+                {highway: 'bridleway'},
+                {highway: 'steps'},
+                {highway: 'proposed'},
+                {highway: 'construction', construction: 'motorway'},
+                {highway: 'construction', construction: 'trunk'},
+                {railway: 'rail'},
+                {railway: 'abandoned'},
+                {railway: 'subway'},
+                {waterway: 'stream'},
+                {waterway: 'river'},
+                {waterway: 'ditch'},
+                {power: 'line'},
+                {boundary: 'administrative'},
+                {boundary: 'protected_area'},
+                {boundary: 'national_park'}];
 
         var row = d3.select('.highways').selectAll('tr')
-            .data(highways)
+            .data(tags)
           .enter().append('tr');
 
         row.append('th')
-            .text(function (d) { return d; });
+            .html(function (d) { return _.map(d, function (value, key) { return key + "=" + value;}).join("<br>"); });
 
         var projection = Object,
             filter = d3.functor(true),
@@ -72,7 +99,7 @@
             .data(function (d) {
                 return _.flatten(zooms.map(function (z) {
                     return modes.map(function (m) {
-                        return { zoom: z, mode: m, tag: d };
+                        return { zoom: z, mode: m, tags: d };
                     });
                 }));
             })
@@ -84,7 +111,7 @@
             .attr('data-zoom', function (d) { return d.zoom; })
             .call(iD.svg.Surface())
             .each(function (d) {
-                var highway = way.update({tags: d.tag ? {highway: d.tag} : {}}),
+                var highway = way.update({tags: d.tags}),
                     graph = iD.Graph([a, b, highway]);
 
                 d3.select(this)