Add zoom-to button in notice.

css/app.css

@@ -425,6 +425,8 @@ button[disabled] .label {
 .icon.nearby     { background-position: -340px 0px;}
 .icon.geolocate  { background-position: -360px 0px;}
 
+.icon.invert.zoom-in    { background-position: -240px -40px;}
+
 .icon.browse     { background-position:   0px 0px;}
 .icon.add-point  { background-position: -20px 0px;}
 .icon.add-line   { background-position: -40px 0px;}
@@ -996,12 +998,11 @@ div.typeahead a:first-child {
     float:left;
     width:33.333%;
     padding-right: 10px;
+    text-align:center;
 }
 
-.notice .notice-text {
+.notice .notice-inner {
     height: 40px;
-    text-align: center;
-    font-weight: normal;
     border-radius: 5px;
     line-height: 40px;
     background: #fff;
@@ -1009,6 +1010,12 @@ div.typeahead a:first-child {
     opacity: 0.9;
 }
 
+.notice .notice-inner .zoom-to {
+    width:40px;
+    height:40px;
+    margin-right:10px;
+}
+
 /* Tooltips
 ------------------------------------------------------- */
 

js/id/id.js

@@ -46,16 +46,18 @@ window.iD = function(container) {
 
         function disableTooHigh() {
             if (map.editable()) {
-                notice.message('');
+                notice.message(false);
                 buttons.attr('disabled', null);
             } else {
                 buttons.attr('disabled', 'disabled');
-                notice.message('Zoom in to edit the map');
+                notice.message(true);
                 controller.enter(iD.modes.Browse());
             }
         }
 
-        var notice = iD.ui.notice(limiter).message(null);
+        var notice = iD.ui.notice(limiter)
+            .message(false)
+            .on('zoom', function() { map.zoom(16); });
 
         map.on('move.editor', _.debounce(function() {
             disableTooHigh();

js/id/ui/notice.js

@@ -1,45 +1,35 @@
 iD.ui.notice = function(selection) {
-    var message = '',
+    var event = d3.dispatch('zoom'),
+        message = '',
         notice = {};
 
     var div = selection.append('div')
         .attr('class', 'notice')
-        .style('display', 'none');
+        .append('div')
+        .attr('class', 'notice-inner');
 
-    var txt = div.append('div')
-        .attr('class', 'notice-text');
+    div.append('button')
+        .attr('class', 'zoom-to')
+        .on('click', function() {
+            event.zoom();
+        })
+        .append('span')
+        .attr('class', 'icon invert zoom-in');
 
-    function replace(a, b) {
-        a.style('opacity', 1)
-            .transition()
-            .each('end', function() {
-                a.style('display', 'none');
-                b.style('display', 'inline-block')
-                    .style('opacity', 0)
-                    .transition()
-                    .style('opacity', 1);
-            })
-            .style('opacity', 0);
-    }
+    div.append('span')
+        .attr('class', 'notice-text')
+        .text('zoom in to edit the map');
 
     notice.message = function(_) {
-        div.attr('class', 'notice inner');
-        if (!arguments.length) return _;
-        if (!message && _) {
-            txt.text(_);
-            replace(selection.select('.button-wrap'), div);
-        } else if (_ && message !== _) {
-            txt.text(_);
+        if (_) {
             selection.select('.button-wrap').style('display', 'none');
-        } else if (!_) {
-            txt.text('');
-            if (message) {
-                replace(div, selection.select('.button-wrap'));
-            }
+            div.style('display', 'block');
+        } else {
+            selection.select('.button-wrap').style('display', 'block');
+            div.style('display', 'none');
         }
-        message = _;
         return notice;
     };
 
-    return notice;
+    return d3.rebind(notice, event, 'on');
 };