diff --git a/css/app.css b/css/app.css index cd6abd044..49e6c9314 100644 --- a/css/app.css +++ b/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 ------------------------------------------------------- */ diff --git a/index.html b/index.html index 4cf24afff..94543bf93 100644 --- a/index.html +++ b/index.html @@ -43,6 +43,7 @@ + diff --git a/js/id/id.js b/js/id/id.js index a0677dab7..f879a803f 100644 --- a/js/id/id.js +++ b/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', diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index cbe7fcdb7..846849844 100644 --- a/js/id/renderer/map.js +++ b/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'); }; diff --git a/js/id/ui/notice.js b/js/id/ui/notice.js new file mode 100644 index 000000000..34ab460cd --- /dev/null +++ b/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; +};