From 555fefc47c758a8ea013f98b51fbee912ac9ea61 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Thu, 15 Nov 2012 10:07:57 -0500
Subject: [PATCH] Mouseover previews of feature names

---
 css/app.css           | 7 +++++++
 index.html            | 1 +
 js/iD/renderer/Map.js | 9 +++++++++
 3 files changed, 17 insertions(+)

diff --git a/css/app.css b/css/app.css
index d51ee574f..19453cce9 100644
--- a/css/app.css
+++ b/css/app.css
@@ -96,6 +96,13 @@ table td {
     margin:0;
 }
 
+#bar .messages {
+    position:absolute;
+    right:200px;
+    top:0;
+    padding:10px;
+}
+
 #bar button:hover {
     background:#eee;
 }
diff --git a/index.html b/index.html
index 5ba7914bf..2d8fb7c88 100755
--- a/index.html
+++ b/index.html
@@ -17,6 +17,7 @@
                 +&nbsp;Area</button><button class='mini' id='undo'>
                 &larr;<small></small></button><button class='mini' id='redo'>
                 &rarr;</button><input type='text' id='geocode-location' placeholder='find a place' />
+                <div class='messages'></div>
                 <button id='save'>Save</button>
                 <div class='zoombuttons'>
                     <button class='zoom-in'>+</button><button class='zoom-out'>&ndash;</button>
diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js
index d80a50a0f..375fb3b69 100755
--- a/js/iD/renderer/Map.js
+++ b/js/iD/renderer/Map.js
@@ -55,6 +55,9 @@ iD.Map = function(elem) {
         },
         key = function(d) { return d.id; };
 
+    d3.select('.inspector-wrap').style('display', 'none');
+    var messages = d3.select('.messages');
+
     // Containers
     // ----------
     // The map uses SVG groups in order to restrict
@@ -161,6 +164,8 @@ iD.Map = function(elem) {
         var marker = markers.enter().append('g')
             .attr('class', 'marker')
             .on('click', selectClick)
+            .on('mouseover', function(d) { messages.text(d.tags.name || '(unknown)'); })
+            .on('mouseout', function(d) { messages.text(''); })
             .call(dragbehavior);
         marker.append('circle')
             .attr({ r: 10, cx: 8, cy: 8 });
@@ -181,6 +186,8 @@ iD.Map = function(elem) {
         strokes.exit().remove();
         strokes.enter().append('path')
             .on('click', selectClick)
+            .on('mouseover', function(d) { messages.text(d.tags.name || '(unknown)'); })
+            .on('mouseout', function(d) { messages.text(''); })
             .attr('class', class_stroke)
             .classed('active', classActive);
         strokes.order()
@@ -195,6 +202,8 @@ iD.Map = function(elem) {
         casings.exit().remove();
         casings.enter().append('path')
             .on('click', selectClick)
+            .on('mouseover', function(d) { messages.text(d.tags.name || '(unknown)'); })
+            .on('mouseout', function(d) { messages.text(''); })
             .attr('class', class_casing)
             .classed('active', classActive);
         casings.order()