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;
+};