From 8a84dd4c8e2820b3d039185ad2ed707994f4ba96 Mon Sep 17 00:00:00 2001
From: Ansis Brammanis <ansis.brammanis@gmail.com>
Date: Thu, 17 Jan 2013 16:10:01 -0500
Subject: [PATCH] start label styles and positioning

---
 css/map.css         |  7 +++++++
 js/id/svg/labels.js | 16 ++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/css/map.css b/css/map.css
index b2929f149..af1ea9226 100644
--- a/css/map.css
+++ b/css/map.css
@@ -284,6 +284,13 @@ text.tag-oneway {
     pointer-events:none;
 }
 
+text.label {
+  font-size: 12px;
+  font-weight: bold;
+  fill: black;
+  text-shadow: 0 0 0.4em white, 1px 1px white, -1px -1px white, -1px 1px white, 1px -1px white;
+}
+
 /* Cursors */
 
 #map:hover {
diff --git a/js/id/svg/labels.js b/js/id/svg/labels.js
index 8ba1549e1..cf1d484d8 100644
--- a/js/id/svg/labels.js
+++ b/js/id/svg/labels.js
@@ -1,5 +1,10 @@
 iD.svg.Labels = function() {
 
+    var pointOffsets = [
+        [15, 3, 'start'], // right
+        [-15, 3, 'end'], // left
+    ];
+
     function drawTexts(group, labels, filter, classes, position) {
         var texts = group.selectAll('text')
             .filter(filter)
@@ -12,6 +17,7 @@ iD.svg.Labels = function() {
         texts.attr('x', position('x'))
             .attr('y', position('y'))
             .attr('transform', position('transform'))
+            .style('text-anchor', position('textAnchor'))
             .text(function(d) { return d.tags.name });
 
         texts.exit().remove();
@@ -38,9 +44,11 @@ iD.svg.Labels = function() {
             positions[i] = {};
             var l = labels[i];
             if (l.type === 'node') {
-                var coord = project(l.loc);
-                positions[i].x = coord[0];
-                positions[i].y = coord[1];
+                var coord = project(l.loc),
+                    offset = pointOffsets[1];
+                positions[i].x = coord[0] + offset[0];
+                positions[i].y = coord[1] + offset[1];
+                positions[i].textAnchor = offset[2];
             }
         }
 
@@ -49,7 +57,7 @@ iD.svg.Labels = function() {
         }
 
         var label = surface.select('.layer-label'),
-            texts = drawTexts(label, labels, filter, 'todo', position);
+            texts = drawTexts(label, labels, filter, 'label', position);
 
 
     };