Merge pull request #4678 from nnodot/increase-gpxlabels-readability

Increase GPX labels readability

css/20_map.css

@@ -214,6 +214,7 @@ text.pointlabel {
   dominant-baseline: auto;
 }
 
+text.gpxlabel-halo,
 .layer-labels-halo text {
     opacity: 0.7;
     stroke: #fff;
@@ -271,6 +272,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;
+}

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);
+        
+        var 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);