From c796a9de1288990ddfbe6668c0fc467a7dabb2c6 Mon Sep 17 00:00:00 2001
From: Nicolas Decoster <zk-github@ouvaton.org>
Date: Wed, 10 Jan 2018 15:42:56 +0100
Subject: [PATCH] Increase GPX labels readability

---
 css/20_map.css     | 10 +++++++++-
 modules/svg/gpx.js | 33 +++++++++++++++++++++------------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/css/20_map.css b/css/20_map.css
index f5d8e168a..8c3296b34 100644
--- a/css/20_map.css
+++ b/css/20_map.css
@@ -202,6 +202,7 @@ text.pointlabel {
   dominant-baseline: auto;
 }
 
+text.gpxlabel-halo,
 .layer-labels-halo text {
     opacity: 0.7;
     stroke: #fff;
@@ -259,6 +260,13 @@ path.gpx {
     fill: none;
 }
 
-text.gpx {
+text.gpxlabel {
     fill: #ff26d4;
 }
+
+text.gpxlabel-halo,
+text.gpxlabel {
+    font-size: 12px;
+    font-weight: bold;
+    dominant-baseline: middle;
+}
\ No newline at end of file
diff --git a/modules/svg/gpx.js b/modules/svg/gpx.js
index f1274203c..3d273986a 100644
--- a/modules/svg/gpx.js
+++ b/modules/svg/gpx.js
@@ -57,7 +57,6 @@ export function svgGpx(projection, context, dispatch) {
         svgGpx.initialized = true;
     }
 
-
     function drawGpx(selection) {
         var geojson = svgGpx.geojson,
             enabled = svgGpx.enabled;
@@ -93,16 +92,26 @@ export function svgGpx(projection, context, dispatch) {
             .attr('d', path);
 
 
-        var labels = layer.selectAll('text')
-            .data(showLabels && geojson.features ? geojson.features : []);
-
-        labels.exit()
-            .remove();
-
-        labels = labels.enter()
-            .append('text')
-            .attr('class', 'gpx')
-            .merge(labels);
+        function createLabels(layer, textClass, data) {
+            var labels = layer.selectAll('text.' + textClass)
+                .data(data);
+    
+            labels.exit()
+                .remove();
+    
+            labels = labels.enter()
+                .append('text')
+                .attr('class', textClass)
+                .merge(labels);
+    
+            return labels;
+        }
+        
+        var labelsData = showLabels && geojson.features ? geojson.features : [];
+        createLabels(layer, 'gpxlabel-halo', labelsData);
+        createLabels(layer, 'gpxlabel', labelsData);
+        
+        labels = layer.selectAll('text');
 
         labels
             .text(function(d) {
@@ -110,7 +119,7 @@ export function svgGpx(projection, context, dispatch) {
             })
             .attr('x', function(d) {
                 var centroid = path.centroid(d);
-                return centroid[0] + 7;
+                return centroid[0] + 11;
             })
             .attr('y', function(d) {
                 var centroid = path.centroid(d);