New option orientation=auto: auto-flip labels, even for part of lines

plepe · Dec 23, 2018 · 9835d90 · 9835d90
1 parent 44d05d5
commit 9835d90
Show file tree

Hide file tree

Showing 3 changed files with 198 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -64,6 +64,7 @@ The `text` parameter of `setText()` can either be:
     - {orientation: angle} - rotate to a specified angle (e.g. {orientation: 15})
     - {orientation: flip} - filps the text 180deg correction for upside down text placement on west -> east lines
     - {orientation: perpendicular} - places text at right angles to the line.
+    - {orientation: auto} - flips the text on (part of) ways running west to east, so that they are readable upside down.
 * `allowCrop` If the line is short to display the whole text, crop the text. If false, don't show the text at all. (Default: true).
 
 * `attributes` Object containing the attributes applied to the `text` tag. Check valid attributes [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text#Attributes) (Default: `{}`)

diff --git a/index.html b/index.html
@@ -281,6 +281,152 @@
             }
         }).addTo(map);
 
+	var road = {
+          "type": "FeatureCollection",
+          "features": [
+            {
+              "type": "Feature",
+              "properties": {},
+              "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                  [
+                    33.3984375,
+                    29.53522956294847
+                  ],
+                  [
+                    26.894531249999996,
+                    28.613459424004414
+                  ],
+                  [
+                    24.960937499999996,
+                    27.994401411046148
+                  ],
+                  [
+                    23.5546875,
+                    25.3241665257384
+                  ],
+                  [
+                    23.291015625,
+                    22.836945920943855
+                  ],
+                  [
+                    23.642578125,
+                    20.3034175184893
+                  ],
+                  [
+                    25.13671875,
+                    18.729501999072138
+                  ],
+                  [
+                    28.4765625,
+                    18.145851771694467
+                  ],
+                  [
+                    33.75,
+                    17.811456088564483
+                  ],
+                  [
+                    40.95703125,
+                    16.636191878397664
+                  ],
+                  [
+                    41.748046875,
+                    14.774882506516272
+                  ],
+                  [
+                    41.572265625,
+                    11.695272733029402
+                  ],
+                  [
+                    36.73828124999999,
+                    10.574222078332806
+                  ],
+                  [
+                    31.113281249999996,
+                    9.362352822055605
+                  ],
+                  [
+                    24.521484375,
+                    8.494104537551882
+                  ],
+                  [
+                    22.67578125,
+                    11.609193407938953
+                  ],
+                  [
+                    19.599609375,
+                    13.496472765758952
+                  ],
+                  [
+                    15.8203125,
+                    11.26461221250444
+                  ],
+                  [
+                    15.908203125,
+                    5.7908968128719565
+                  ],
+                  [
+                    18.720703125,
+                    1.7575368113083254
+                  ],
+                  [
+                    22.8515625,
+                    -0.5273363048115043
+                  ],
+                  [
+                    27.421875,
+                    -0.17578097424708533
+                  ],
+                  [
+                    30.05859375,
+                    4.039617826768437
+                  ],
+                  [
+                    31.201171875,
+                    6.664607562172573
+                  ],
+                  [
+                    36.650390625,
+                    7.536764322084078
+                  ],
+                  [
+                    39.7265625,
+                    4.653079918274051
+                  ]
+                ]
+              }
+            }
+          ]
+        };
+
+        // casing
+        L.geoJson(road, {
+            style: {
+                weight: 13,
+                color: 'black'
+            }
+        }).addTo(map);
+        // road + label
+        L.geoJson(road, {
+            onEachFeature: function (feature, layer) {
+                layer.setText(
+                    'Road',
+                    {
+                        repeat: 20,
+                        center: true,
+                        offset: 4,
+                        orientation: 'auto',
+                        attributes: { 'font-size': '8pt', 'font-weight': 'bold' }
+                    }
+                );
+            },
+            style: {
+                weight: 10,
+                color: 'white'
+            }
+        }).addTo(map);
+
         var pos1 = [40.418075, -3.704643],
             pos2 = [40.413119, -3.702369];
         var line = L.polyline([pos1, pos2]);

diff --git a/leaflet.textpath.js b/leaflet.textpath.js
@@ -120,8 +120,6 @@ var PolylineTextPath = {
         }
 
         if (options.repeat === false) {
-            finalText = [ text ];
-
             /* Center text according to the path's bounding box */
             if (options.center) {
                 if (textLength === null) {
@@ -131,9 +129,23 @@ var PolylineTextPath = {
                 /* Set the position for the left side of the textNode */
                 dx = Math.max(0, (pathLength / 2) - (textLength / 2));
             }
+
+            if (options.orientation === 'auto') {
+                var poiBegin = this._path.getPointAtLength(dx)
+                var poiEnd = this._path.getPointAtLength(dx + textLength)
+                var leftToRight = poiEnd.x >= poiBegin.x
+
+                if (leftToRight) {
+                    finalText.push(text);
+                } else {
+                    finalText.push({ text: turnText(text), rotate: 180 });
+                }
+            } else {
+                finalText = [ text ];
+            }
         } else {
-            if (!Array.isArray(text)) {
-                text = [ text ]
+            if (options.orientation === 'auto') {
+                var textTurned = turnText(text)
             }
 
             /* Compute single pattern length */
@@ -149,8 +161,10 @@ var PolylineTextPath = {
 
             /* Create string as long as path */
             var repeatDistance = parseFloat(options.repeat) || 0
+            var pos = 0
             var spacingBalance = 0
             var repeatCount = Math.floor((pathLength + repeatDistance) / (textLength + repeatDistance)) || 1;
+            var finalText = []
 
             /* Calculate the position for the left side of the textNode */
             if (options.center) {
@@ -162,10 +176,25 @@ var PolylineTextPath = {
                 if (i > 0) {
                     spacesCount = Math.round((repeatDistance + spacingBalance) / slength);
                     spacingBalance = repeatDistance - (spacesCount * slength);
+                    pos += spacesCount * slength
                     finalText.push('\u00A0'.repeat(spacesCount));
                 }
 
-                finalText.push(text);
+                if (options.orientation === 'auto') {
+                    var poiBegin = this._path.getPointAtLength(pos)
+                    var poiEnd = this._path.getPointAtLength(pos + textLength)
+                    var leftToRight = poiEnd.x >= poiBegin.x
+
+                    if (leftToRight) {
+                        finalText.push(text);
+                    } else {
+                        finalText.push({ text: textTurned, rotate: 180 });
+                    }
+                } else {
+                    finalText.push(text);
+                }
+
+                pos += textLength
             }
         }
 
@@ -204,6 +233,9 @@ var PolylineTextPath = {
                 case 'perpendicular':
                     rotateAngle = 90;
                     break;
+                case 'auto':
+                    rotateAngle = 0;
+                    break;
                 default:
                     rotateAngle = options.orientation;
             }
@@ -267,6 +299,19 @@ L.LayerGroup.include({
     }
 });
 
-
+function turnText (text) {
+    if (Array.isArray(text)) {
+        return text.reverse()
+    } else if (typeof text === 'object' && text !== null) {
+        var ret = {}
+        for (var attr in text) {
+            ret[attr] = text[attr]
+        }
+        ret.text = turnText(ret.text)
+        return ret
+    } else {
+        return text.split('').reverse().join('')
+    }
+}
 
 })();