First ability to actually propagate edits to the map.

css/map.css

@@ -18,6 +18,7 @@ circle.handle {
 
 .casing {
     stroke: #111;
+    stroke-linecap:round;
     stroke-width: 3;
 }
 
@@ -29,6 +30,7 @@ circle.handle {
 
 .stroke {
     stroke: #555;
+    stroke-linecap:round;
     stroke-width: 2;
 }
 
@@ -69,15 +71,6 @@ circle.handle {
     opacity:0.2;
 }
 
-/*
-.stroke.highway {
-    stroke-opacity:0.7;
-}
-.casing.highway {
-    stroke-opacity:0.7;
-}
-*/
-
 /* highways */
 .stroke.highway-residential {
     stroke:#E8E8E8;
@@ -124,7 +117,7 @@ circle.handle {
 }
 
 .stroke.highway-primary, .stroke.highway-primary_link {
-    stroke:#E46D71;
+    stroke:#FD969A;
     stroke-width:10;
 }
 .casing.highway-primary, .casing.highway-primary_link {

js/iD/renderer/Map.js

@@ -15,6 +15,8 @@ iD.Map = function(obj) {
         connection = obj.connection,
         layers = {};
 
+    var inspector = iD.Inspector();
+
     var tagclasses = [
         'highway', 'railway', 'motorway', 'amenity', 'landuse', 'building', 'bridge'];
 
@@ -150,9 +152,14 @@ iD.Map = function(obj) {
     function selectClick(d) {
         select(d);
         drawVector();
-        d3.select('.inspector-wrap').datum(d).call(iD.Inspector);
+        d3.select('.inspector-wrap').datum(d).call(inspector);
     }
 
+    inspector.on('update', function(way, tags) {
+        connection.entities[way.id].tags = tags;
+        drawVector();
+    });
+
     function nodeline(d) {
         return linegen(d.nodes);
     }
@@ -192,7 +199,7 @@ iD.Map = function(obj) {
 
         var ways = all.filter(function(a) {
                 return a.entityType === 'way' && !a.isClosed();
-            }),
+            }).sort(waystack),
             areas = all.filter(function(a) {
                 return a.entityType === 'way' && a.isClosed();
             }),
@@ -244,14 +251,14 @@ iD.Map = function(obj) {
             .attr('class', classes('area'));
 
         casings.enter().append('use');
-        casings.sort(waystack)
+        casings.order()
             .attr('xlink:href', usehref)
             .attr('class', classes('casing'));
 
         strokes.enter().append('use')
             .on('click', selectClick);
 
-        strokes.sort(waystack).attr('xlink:href', usehref)
+        strokes.order().attr('xlink:href', usehref)
             .attr('class', classes('stroke'));
 
         markers.enter().append('image');
@@ -271,15 +278,11 @@ iD.Map = function(obj) {
         });
     }
 
-    // -------------
-    // Zoom handling
     function zoomIn() {
-        // summary:	Zoom in by one level (unless maximum reached).
         return setZoom(getZoom() + 1);
     }
 
     function zoomOut() {
-        // summary:	Zoom out by one level (unless minimum reached).
         return setZoom(getZoom() - 1);
     }
 

js/iD/ui/Inspector.js

@@ -1,41 +1,66 @@
 iD.Inspector = function(selection) {
-    var inspector = {};
+    var event = d3.dispatch('change', 'update');
 
-    // http://jsfiddle.net/7WQjr/
-    selection.each(function(d, i) {
-        d3.select(this).selectAll('table').remove();
+    function inspector(selection) {
+        // http://jsfiddle.net/7WQjr/
+        selection.each(function(d, i) {
+            d3.select(this).selectAll('table,button').remove();
 
-        var table = d3.select(this)
-            .append('table')
-            .attr('class', 'inspector');
+            var table = d3.select(this)
+                .append('table')
+                .attr('class', 'inspector');
 
-        var tbody = table.append('tbody');
+            var tbody = table.append('tbody');
 
-        table.append('thead').append('tr').selectAll('th')
-            .data(['tag', 'value'])
-            .enter()
-            .append('th')
-                .text(String);
+            table.append('thead').append('tr').selectAll('th')
+                .data(['tag', 'value'])
+                .enter()
+                .append('th')
+                    .text(String);
 
-        var row = tbody.selectAll('tr')
-            .data(d3.entries(d.tags))
-            .enter()
-            .append('tr');
+            var row = tbody.selectAll('tr')
+                .data(d3.entries(d.tags))
+                .enter()
+                .append('tr');
 
-        row.append('td').append('input')
-            .property('value', function(d) { return d.key; });
+            row.append('td').append('input')
+                .property('value', function(d) { return d.key; })
+                .on('change', function(row) {
+                    row.key = this.key;
+                    event.update(d, newtags());
+                });
 
-        row.append('td').append('input')
-            .attr('class', 'tag-value')
-            .property('value', function(d) { return d.value; });
+            row.append('td').append('input')
+                .attr('class', 'tag-value')
+                .property('value', function(d) { return d.value; })
+                .on('change', function(row) {
+                    row.value = this.value;
+                    event.update(d, newtags());
+                });
 
-        var save = d3.select(this)
-            .append('button')
-            .text('Save')
-            .on('click', function(d, i) {
+            // TODO: there must be a function for this
+            function unentries(x) {
+                var obj = {};
+                for (var i = 0; i < x.length; i++) {
+                    obj[x[i].key] = x[i].value;
+                }
+                return obj;
+            }
+
+            function newtags() {
                 var inputs = table.selectAll('input.tag-value')
                     .data();
-                console.log(inputs);
-            });
-    });
+                return unentries(inputs);
+            }
+
+            var save = d3.select(this)
+                .append('button')
+                .text('Save')
+                .on('click', function(d, i) {
+                    event.change(d, newtags());
+                });
+        });
+    }
+
+    return d3.rebind(inspector, event, 'on');
 };