Option 'turnedText': alternative text for east-west lines

makinacorpus · Dec 24, 2018 · 7494e3d · 7494e3d
1 parent 7244e43
commit 7494e3d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,7 @@ The `text` parameter of `setText()` can either be:
     - {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 too short to display the whole text, crop the text. If false, don't show the text at all. (Default: true).
+* `turnedText` When orientation=auto is used, use this text for east -> west lines.
 
 * `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
@@ -411,13 +411,18 @@
         L.geoJson(road, {
             onEachFeature: function (feature, layer) {
                 layer.setText(
-                    'Road',
+                    [ 'Road', { text: ' ⯈', fill: 'red' } ],
                     {
                         repeat: 20,
                         center: true,
-                        offset: 4,
+                        offset: 0,
                         orientation: 'auto',
-                        attributes: { 'font-size': '8pt', 'font-weight': 'bold' }
+                        attributes: {
+                          'font-size': '8pt',
+                          'font-weight': 'bold',
+                          'dominant-baseline': 'middle',
+                        },
+                        turnedText: [ { text: '⯇ ', fill: 'blue' }, 'Road' ],
                     }
                 );
             },

diff --git a/leaflet.textpath.js b/leaflet.textpath.js
@@ -146,14 +146,16 @@ var PolylineTextPath = {
                 finalText = [ text ];
             }
         } else {
-            if (options.orientation === 'auto' || options.orientation === 'flip') {
-                var textTurned = turnText(text)
-            }
-
             /* Compute single pattern length */
             if (textLength === null) {
               textLength = this._getLength(text, options);
             }
+
+            if (options.orientation === 'auto' || options.orientation === 'flip') {
+                var textTurned = turnText(options.turnedText || text)
+                var textLengthTurned = this._getLength(options.turnedText || text, options)
+            }
+
             if (pathLength === null) {
                 pathLength = this._path.getTotalLength();
             }
@@ -173,7 +175,8 @@ var PolylineTextPath = {
                 dx = Math.max(0, (pathLength - textLength * repeatCount - repeatDistance * (repeatCount - 1))  / 2);
             }
 
-            for (var i = 0; i < repeatCount; i++) {
+            var i = 0;
+            do {
                 var spacesCount = 0
                 if (i > 0) {
                     spacesCount = Math.round((repeatDistance + spacingBalance) / slength);
@@ -189,17 +192,21 @@ var PolylineTextPath = {
 
                     if (leftToRight) {
                         finalText.push(text);
+                        pos += textLength
                     } else {
                         finalText.push({ text: textTurned, rotate: 180 });
+                        pos += textLengthTurned
                     }
                 } else if (options.orientation === 'flip') {
                     finalText.push({ text: textTurned, rotate: 180 });
+                    pos += textLengthTurned
                 } else {
                     finalText.push(text);
+                    pos += textLength
                 }
 
-                pos += textLength
-            }
+                i++
+            } while (pos + repeatDistance + textLength < pathLength);
         }
 
         /* Put it along the path using textPath */