Render more line features

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)