Redraw vectors

css/app.css

@@ -607,6 +607,22 @@ div.typeahead a {
     overflow:auto;
 }
 
+/* Notices
+------------------------------------------------------- */
+
+.notice {
+    position:absolute;
+    top:60px;
+    left:70px;
+    width:250px;
+    height:50px;
+    padding:10px;
+    background:#fff;
+    font-size: 20px;
+    font-weight: bold;
+    line-height:30px;
+}
+
 /* Tooltips
 ------------------------------------------------------- */
 

index.html

@@ -43,6 +43,7 @@
         <script src='js/id/ui/loading.js'></script>
         <script src='js/id/ui/userpanel.js'></script>
         <script src='js/id/ui/layerswitcher.js'></script>
+        <script src='js/id/ui/notice.js'></script>
 
         <script src='js/id/actions.js'></script>
         <script src='js/id/actions/add_node.js'></script>

js/id/id.js

@@ -1,7 +1,6 @@
 window.iD = function(container) {
     var connection = iD.Connection()
             .url('http://api06.dev.openstreetmap.org'),
-            // .url('http://www.openstreetmap.org'),
         history = iD.History(),
         map = iD.Map()
             .connection(connection)
@@ -37,6 +36,16 @@ window.iD = function(container) {
             .call(bootstrap.tooltip().placement('bottom'))
             .on('click', function (mode) { controller.enter(mode); });
 
+
+        map.on('move.disable-buttons', function() {
+            if (map.zoom() < 16) {
+                buttons.attr('disabled', 'disabled');
+                controller.enter(iD.modes.Browse());
+            } else {
+                buttons.attr('disabled', null);
+            }
+        });
+
         buttons.append('span')
             .attr('class', function(d) {
                 return d.id + ' icon icon-pre-text';
@@ -138,8 +147,8 @@ window.iD = function(container) {
                     });
                     d3.select('.map-overlay input').node().focus();
             });
-        var gcForm = gc.append('form')
-            gcForm.attr('class','content map-overlay hide')
+        var gcForm = gc.append('form');
+        gcForm.attr('class','content map-overlay hide')
             .append('input')
                 .attr({
                     type: 'text',

js/id/renderer/map.js

@@ -14,6 +14,7 @@ iD.Map = function() {
         dblclickEnabled = true,
         dragging = false,
         fastEnabled = true,
+        notice,
         background = iD.Background()
             .projection(projection),
         class_stroke = iD.Style.styleClasses('stroke'),
@@ -56,6 +57,10 @@ iD.Map = function() {
         alength = arrow.node().getComputedTextLength();
         arrow.remove();
 
+        notice = iD.notice(d3.select('body')
+            .append('div')
+            .attr('class', 'notice'));
+
         map.size(this.size());
         map.surface = surface;
     }
@@ -90,7 +95,8 @@ iD.Map = function() {
             filter = function(d) { return d.accuracy ? d.way in only : d.id in only; };
         }
 
-        if (all.length > 200000) return hideVector();
+        if (all.length > 200000) return editOff();
+        else editOn();
 
         for (var i = 0; i < all.length; i++) {
             var a = all[i];
@@ -166,10 +172,15 @@ iD.Map = function() {
         }).classed('active', classActive);
     }
 
-    function hideVector() {
+    function editOff() {
+        notice.message('Zoom in to edit the map');
         surface.selectAll('.layer-g *').remove();
     }
 
+    function editOn() {
+        notice.message('');
+    }
+
     function drawLines(data, filter, group, class_gen) {
         var lines = group.selectAll('path')
             .filter(filter)
@@ -224,6 +235,7 @@ iD.Map = function() {
             }).data();
 
         var uses = defs.selectAll('path')
+            .filter(filter)
             .data(oneways, key);
         uses.exit().remove();
         uses.enter().append('path');
@@ -232,12 +244,14 @@ iD.Map = function() {
             .attr('d', getline);
 
         var labels = g.text.selectAll('text')
+            .filter(filter)
             .data(oneways, key);
         labels.exit().remove();
         var tp = labels.enter()
             .append('text').attr({ 'class': 'oneway', dy: 4 })
             .append('textPath').attr('class', 'textpath');
         g.text.selectAll('.textpath')
+            .filter(filter)
             .attr('xlink:href', function(d, i) { return '#shadow-' + d.id; })
             .text(function(d) {
                 return (new Array(Math.floor(lengths[d.id]))).join('►----');
@@ -246,14 +260,14 @@ iD.Map = function() {
 
     function connectionLoad(err, result) {
         history.merge(result);
-        drawVector(Object.keys(result.entities));
+        redraw(Object.keys(result.entities));
     }
 
     function hoverIn() {
         var datum = d3.select(d3.event.target).datum();
         if (datum instanceof iD.Entity) {
             hover = datum.id;
-            drawVector([hover]);
+            redraw([hover]);
             d3.select('.messages').text(datum.tags.name || '#' + datum.id);
         }
     }
@@ -262,7 +276,7 @@ iD.Map = function() {
         if (hover) {
             var oldHover = hover;
             hover = null;
-            drawVector([oldHover]);
+            redraw([oldHover]);
             d3.select('.messages').text('');
         }
     }
@@ -311,7 +325,7 @@ iD.Map = function() {
             connection.loadTiles(projection);
             drawVector(difference);
         } else {
-            hideVector();
+            editOff();
         }
         return map;
     }
@@ -421,7 +435,7 @@ iD.Map = function() {
             d3.select('div.inspector-wrap')
                 .append('div')
                 .attr('class','inspector-inner')
-                .text(_)
+                .text(_);
         }
     };
 
@@ -448,5 +462,5 @@ iD.Map = function() {
     map.projection = projection;
     map.redraw = redraw;
 
-    return d3.rebind(map, dispatch, 'on', 'move');
+    return d3.rebind(map, dispatch, 'on');
 };

js/id/ui/notice.js

@@ -0,0 +1,25 @@
+iD.notice = function(selection) {
+    var message = '',
+        notice = {};
+
+    notice.message = function(_) {
+        if (!arguments.length) return _;
+        if (!message && _) {
+            selection
+                .text(_)
+                .transition()
+                .style('opacity', 1);
+        } else if (_ && message !== _) {
+            selection.text(_);
+        } else if (!_) {
+            selection
+                .text('')
+                .transition()
+                .style('opacity', 0);
+        }
+        message = _;
+        return notice;
+    };
+
+    return notice;
+};