Support drawing areas when you start out with ways

css/map.css

@@ -79,6 +79,13 @@ path.stroke.railway-subway {
     stroke-dasharray: 8,8;
 }
 
+path.area {
+    stroke-width:2;
+    stroke:red;
+    fill:#fff;
+    fill-opacity:0.3;
+}
+
 path.area.active {
     stroke-width:3 !important;
 }
@@ -87,14 +94,12 @@ path.area.natural {
     stroke: #ADD6A5;
     fill: #ADD6A5;
     stroke-width:1;
-    fill-opacity:0.3;
 }
 
 path.area.building {
     stroke: #9E176A;
     stroke-width: 1;
     fill: #ff6ec7;
-    fill-opacity: 0.3;
 }
 
 path.area.landuse,

js/id/actions/modes.js

@@ -166,7 +166,8 @@ iD.modes.DrawRoad = function(way_id, direction) {
             var nextnode_id = nextnode.id;
 
             var way = this.map.history.graph().entity(way_id);
-            var lastnode_id = (direction === 'forward') ? _.last(way.nodes) : way.nodes[0];
+            var firstNode = way.nodes[0];
+            var lastNode = _.last(way.nodes);
             way.nodes[push](nextnode_id);
             this.map.perform(iD.actions.addWayNode(way, nextnode));
 
@@ -185,9 +186,20 @@ iD.modes.DrawRoad = function(way_id, direction) {
                 var t = d3.select(d3.event.target);
                 d3.event.stopPropagation();
                 if (t.data() && t.data()[0] && t.data()[0].type === 'node') {
-                    if (t.data()[0].id == lastnode_id) {
+                    if (t.data()[0].id == firstNode || t.data()[0].id == lastNode) {
                         var l = this.map.history.graph().entity(way.nodes[pop]());
                         this.map.perform(iD.actions.removeWayNode(way, l));
+                        // If this is drawing a loop and this is not the drawing
+                        // end of the stick, finish the circle
+                        if (direction === 'forward' && t.data()[0].id == firstNode) {
+                            way.nodes[push](firstNode);
+                            this.map.perform(iD.actions.addWayNode(way,
+                                this.map.history.graph().entity(firstNode)));
+                        } else if (direction === 'backward' && t.data()[0].id == lastNode) {
+                            way.nodes[push](lastNode);
+                            this.map.perform(iD.actions.addWayNode(way,
+                                this.map.history.graph().entity(lastNode)));
+                        }
                         delete way.tags.elastic;
                         this.map.perform(iD.actions.changeTags(way, way.tags));
                         // End by clicking on own tail

js/id/id.js

@@ -145,7 +145,7 @@ var iD = function(container) {
     });
 
     var hash = iD.Hash().map(map);
-    if (!hash.hadHash) map.setZoom(18).center([-92.0198, 38.8796]);
+    if (!hash.hadHash) map.setZoom(20).center([-77.02405, 38.87952]);
     d3.select('.user').call(iD.userpanel(connection)
         .on('logout', connection.logout)
         .on('login', connection.authenticate));

js/id/renderer/map.js

@@ -51,7 +51,6 @@ iD.Map = function(elem, connection) {
             .attr('clip-path', 'url(#clip)'),
         g = ['fill', 'casing', 'stroke', 'text', 'hit', 'temp'].reduce(function(mem, i) {
             return (mem[i] = r.append('g').attr('class', 'layer-g')) && mem;
-            return mem;
         }, {}),
         class_stroke = iD.Style.styleClasses('stroke'),
         class_fill = iD.Style.styleClasses('stroke'),
@@ -326,7 +325,7 @@ iD.Map = function(elem, connection) {
 
     function nameHoverIn() {
         var entity = d3.select(d3.event.target).data();
-        if (entity) d3.select('.messages').text(entity[0].tags.name || '(unknown)');
+        if (entity) d3.select('.messages').text(entity[0].tags.name || '#' + entity[0].id);
     }
 
     function nameHoverOut(d) { d3.select('.messages').text(''); }