Features: repeat distance, allowCrop, multi-color labels, orientation 'auto' and 'flip', turnedText, ... #72

plepe · 2018-12-24T06:41:37Z

I have a christmas present for you!

I would have liked to create pull requests for each feature, but they all depend on each other, that's why I created a "features" pull request.

It includes the following features:

repeat distance: You can specify repeat as float to set the distance between each repetition in pixels (will be approximated by spaces). Replaces repeat: specify distance in pixels #70 .
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). This could improve performance on maps with short lines.
multi-color labels: (or better "labels with multiple tspans") A label can consist of several tspans, which can change all available attributes. See documentation of the extended text parameter. Fixes Flip upside down text on right to left lines...? #26 . (See the "Rainbow" in the screenshot below)
Orientation 'auto': Flip labels according to the orientation of the line (also for part of lines). Therefore labels can always be upright. (See the "Road" in the screenshot below)
Orientation 'flip': Fix Bug with orientation=flip #71 .
Option turnedText: When flipping a label because of orientation auto (for east-west line parts), use this text instead. Useful if a label includes directional characters like arrows.

Also:

for performance reasons, the length of labels will be cached.
Accept offset=0 (see bug Bug: offset=0 offsets text by width of stroke #73)

Tell me what you think about it.

Are the options named properly?
Is the documentation understandable?
Can you detect any regressions?

fixes makinacorpus#71

…'s stroke-width)

plepe · 2019-01-08T09:05:25Z

One big problem is browser support for rotated text on textpath.

Chrome-based browsers (Opera, ...): very good
Firefox: problems with fonts with variable width, also shifted by one character
IE / Edge: does not rotate labels

You can check how your browser behaves (first image) and compare with screenshots of other browser on this test page:
https://xover.mud.at/~skunk/svg-rotate-glyph

Please submit screenshots of other browsers!

I guess I should implement a browser detection and mitigate problems (e.g. select a fixed-width font on firefox, disable rotation on IE/Edge).

clementallen · 2019-01-13T20:51:18Z

Love this! Really hope it can get merged in soon 👍
If it helps, here is screenshot of the above website in Safari 12 on macOS Mojave:

plepe · 2019-01-14T08:17:45Z

Oh no, Safari does not seem to support textpath at all!

Do you see airplanes, labels and other markers on this webpage? https://makinacorpus.github.io/Leaflet.TextPath/

Apparently there seems to be a bug in Safari:
https://stackoverflow.com/questions/50937985/text-within-svg-textpath-not-visible-from-ios-browsers

clementallen · 2019-01-14T19:20:16Z

I can see the aircraft and other markers fine in safari:

plepe · 2019-01-14T19:55:53Z

That looks okay. I'll try to get my hands on a Mac soon, so I can test what's wrong with my test page ...

clementallen · 2019-01-14T20:09:06Z

Just cloned your fork and ran it on Safari. Everything seems to be fine apart from the turnText and orientation. Unfortunately I don't really know anything about SVG elements otherwise I'd try and fix it:

simon1tan · 2019-01-30T11:44:02Z

@plepe Thanks for the new options! I tried orientation:'auto' but getting multiple errors:
Error: attribute transform: Expected number, "rotate(auto 0 0)".
Error: attribute transform: Expected number, "rotate(auto 489.8046875…"

plepe · 2019-01-30T13:08:16Z

@plepe Thanks for the new options! I tried orientation:'auto' but getting multiple errors:
Error: attribute transform: Expected number, "rotate(auto 0 0)".
Error: attribute transform: Expected number, "rotate(auto 489.8046875…"

Oh. Hard to tell what is the problem without knowing further details. Could you create a test case?

simon1tan · 2019-01-30T18:26:15Z

Sorry @plepe. That was my error. Didn't refresh. Please ignore that error.

IvanSanchez · 2019-02-18T12:26:16Z

README.md

+```javascript
+layer.setText([
+  { fill: 'red', text: 'Red' },
+  ' '


I think there's a comma missing here

IvanSanchez · 2019-02-18T12:28:07Z

leaflet.textpath.js

+        var cacheId = JSON.stringify(text) + '|' + JSON.stringify(options.attributes)
+
+        if (cacheId in _getLengthCache) {
+          return _getLengthCache[cacheId]


Missing semicolon

IvanSanchez · 2019-02-18T12:28:16Z

leaflet.textpath.js

+        var length = pattern.getComputedTextLength();
+        svg.removeChild(pattern);
+
+        _getLengthCache[cacheId] = length


Missing semicolon

strixy · 2019-02-25T22:37:31Z

Good job! Thank you. I ran into one issue with the text not centering as expected, but otherwise super happy e-w text is displaying nicely now. As a fix I can propose the following solution, but I'm new here so I'll leave the final solution up to you.

Change line 109

from
if (!options.allowCrop) {
to
if (!options.allowCrop || options.center) {

strixy · 2019-02-25T22:39:34Z

leaflet.textpath.js

+        var finalText = [];
+        var dx = 0
+
+        if (!options.allowCrop) {


Fixes text center issue
if (!options.allowCrop || options.center) {

plepe · 2019-02-26T08:35:28Z

Thanks :-) The biggest problem right now is the browser incompatibilities. It will be necessary to implement some kind of switch, which mode to choose:

Full support: (Chromium)
Support with monospace font (Safari, Opera)
Support with monospace font, shifted by one character (Firefox)
No support (IE, Edge, possibly older browsers)

See: https://xover.mud.at/~skunk/svg-rotate-glyph/ (the relevant line is the "textpath with rotate=180" line)

(Safari also needs the deprecated 'xlink:' prefix when referencing the path)

plepe added 10 commits December 21, 2018 20:42

repeat: specify distance in pixels

6774792

Function _getLength() calculates length of text

903c390

Cache lengths of svg texts for performance reasons

825d7a9

Parameter 'allowCrop': whether a label may be cropped or not

5058035

Support labels which consist of several tspans

1047f3d

Prepare next step: separate rendering of single and repeated labels

239b1bd

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

d691920

Use same code as orientation=auto for orientation=flip

8e6a171

fixes makinacorpus#71

Enable option 'offset: 0' (would be replaced by the value of the path…

7244e43

…'s stroke-width)

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

7494e3d

plepe force-pushed the feature1 branch from 1f82d8c to 7494e3d Compare December 24, 2018 06:43

plepe mentioned this pull request Dec 25, 2018

Orientation of waterway labels plepe/OpenStreetBrowser#75

Open

IvanSanchez reviewed Feb 18, 2019

View reviewed changes

README.md

```javascript

layer.setText([

{ fill: 'red', text: 'Red' },

' '

Copy link

IvanSanchez Feb 18, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's a comma missing here

IvanSanchez reviewed Feb 18, 2019

View reviewed changes

strixy reviewed Feb 25, 2019

View reviewed changes

clementallen mentioned this pull request Apr 12, 2019

Bug fix for potential zero dived by zero #79

Merged

plepe mentioned this pull request Dec 31, 2019

Optimizing for speed / It's loading forever plepe/ptmap#8

Closed

plepe mentioned this pull request Jan 2, 2023

orientation auto issue on iOS plepe/Leaflet.TextPath#4

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Features: repeat distance, allowCrop, multi-color labels, orientation 'auto' and 'flip', turnedText, ... #72

Features: repeat distance, allowCrop, multi-color labels, orientation 'auto' and 'flip', turnedText, ... #72

plepe commented Dec 24, 2018 •

edited

Loading

plepe commented Jan 8, 2019 •

edited

Loading

clementallen commented Jan 13, 2019

plepe commented Jan 14, 2019 •

edited

Loading

clementallen commented Jan 14, 2019

plepe commented Jan 14, 2019

clementallen commented Jan 14, 2019 •

edited

Loading

simon1tan commented Jan 30, 2019 •

edited

Loading

plepe commented Jan 30, 2019

simon1tan commented Jan 30, 2019

IvanSanchez Feb 18, 2019

IvanSanchez Feb 18, 2019

IvanSanchez Feb 18, 2019

strixy commented Feb 25, 2019

strixy Feb 25, 2019

plepe commented Feb 26, 2019 •

edited

Loading

Features: repeat distance, allowCrop, multi-color labels, orientation 'auto' and 'flip', turnedText, ... #72

Are you sure you want to change the base?

Features: repeat distance, allowCrop, multi-color labels, orientation 'auto' and 'flip', turnedText, ... #72

Conversation

plepe commented Dec 24, 2018 • edited Loading

plepe commented Jan 8, 2019 • edited Loading

clementallen commented Jan 13, 2019

plepe commented Jan 14, 2019 • edited Loading

clementallen commented Jan 14, 2019

plepe commented Jan 14, 2019

clementallen commented Jan 14, 2019 • edited Loading

simon1tan commented Jan 30, 2019 • edited Loading

plepe commented Jan 30, 2019

simon1tan commented Jan 30, 2019

IvanSanchez Feb 18, 2019

Choose a reason for hiding this comment

IvanSanchez Feb 18, 2019

Choose a reason for hiding this comment

IvanSanchez Feb 18, 2019

Choose a reason for hiding this comment

strixy commented Feb 25, 2019

strixy Feb 25, 2019

Choose a reason for hiding this comment

plepe commented Feb 26, 2019 • edited Loading

plepe commented Dec 24, 2018 •

edited

Loading

plepe commented Jan 8, 2019 •

edited

Loading

plepe commented Jan 14, 2019 •

edited

Loading

clementallen commented Jan 14, 2019 •

edited

Loading

simon1tan commented Jan 30, 2019 •

edited

Loading

plepe commented Feb 26, 2019 •

edited

Loading