diff --git a/css/app.css b/css/app.css
index 2eccfbe2d..ad1690e84 100644
--- a/css/app.css
+++ b/css/app.css
@@ -2149,6 +2149,20 @@ img.wiki-image {
stroke-width: 5;
}
+/* Info Box
+------------------------------------------------------- */
+.infobox {
+ position: absolute;
+ overflow: hidden;
+ top: 220px;
+ width: 200px;
+ height: 150px;
+ z-index: 5;
+ background:rgba(0,0,0,.8);
+ border-radius: 0 0 0 4px;
+}
+
+
/* About Section
------------------------------------------------------- */
diff --git a/index.html b/index.html
index fd5e3aeba..fa0d704ab 100644
--- a/index.html
+++ b/index.html
@@ -76,6 +76,7 @@
+
diff --git a/js/id/ui.js b/js/id/ui.js
index e61c3160d..4e889fafe 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -37,6 +37,11 @@ iD.ui = function(context) {
.style('display', 'none')
.call(iD.ui.MapInMap(context));
+ content.append('div')
+ .attr('class', 'infobox')
+ .style('display', 'none')
+ .call(iD.ui.Info(context));
+
bar.append('div')
.attr('class', 'spacer col4');
diff --git a/js/id/ui/info.js b/js/id/ui/info.js
new file mode 100644
index 000000000..4f4d5fcc8
--- /dev/null
+++ b/js/id/ui/info.js
@@ -0,0 +1,55 @@
+iD.ui.Info = function(context) {
+ var key = 'I';
+
+ function info(selection) {
+
+ function redraw() {
+ if (hidden()) return;
+ }
+
+
+ function hidden() {
+ return selection.style('display') === 'none';
+ }
+
+
+ function toggle() {
+ if (d3.event) d3.event.preventDefault();
+
+ if (hidden()) {
+ selection
+ .style('display', 'block')
+ .style('opacity', 0)
+ .transition()
+ .duration(200)
+ .style('opacity', 1);
+
+ redraw();
+
+ } else {
+ selection
+ .style('display', 'block')
+ .style('opacity', 1)
+ .transition()
+ .duration(200)
+ .style('opacity', 0)
+ .each('end', function() {
+ d3.select(this).style('display', 'none');
+ });
+ }
+ }
+
+ context.map()
+ .on('drawn.info', redraw);
+
+ redraw();
+
+ var keybinding = d3.keybinding('info')
+ .on(key, toggle);
+
+ d3.select(document)
+ .call(keybinding);
+ }
+
+ return info;
+};