Flip upside down text on right to left lines...? about leaflet.textpath HOT 8 OPEN

There is no built-in or automatic way to do this.
However, you can play with the attributes option to rotate your text : https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text#Attributes

from leaflet.textpath.

Thanks for the quick reply. I'm guessing that the way to go would be to work out the line's direction, then do a label transform based on the result (i.e. only labels on lines that head east are flipped?)

Here's some code to determine a (very rough) line direction (N, E, S or W) https://raw.githubusercontent.com/kirkau/leaflet.GISTools/master/generalLineDirection.js

I'm not well versed in SVG... you may be able to get to the next step much more quickly than I can?

maybe something like

if (getGeneralDirection(getBearing(lat1,lon1,lat2,lon2)) == "E") {
this.setText('some text', {attributes: { ?? }});
}

I'm putting text and an arrow in the label. The arrow is in the correct direction - it's just the text that needs correcting, so may run into problems rotating the whole string? Are you able to attach two strings to a line?

Cheers

from leaflet.textpath.

this.setText('some text', {attributes: { ?? }});

I guess you can find some hints here http://tutorials.jenkov.com/svg/text-element.html#rotating-text

Are you able to attach two strings to a line?

Could you reproduce a small example in a jsfiddle or similar so that we can give a look ?

If you use the arrow feature of this plugin, it won't be a problem since it relies on line endings and not proper text...

from leaflet.textpath.

Cheers for the link.

I've made a patch and submitted a PR

if (options.flipvertical) {   
        var rotatecenterX = (textNode.getBBox().x + textNode.getBBox().width / 2);
        var rotatecenterY = (textNode.getBBox().y + textNode.getBBox().height / 2);         
        textNode.setAttribute('transform', 'rotate(90 ' + rotatecenterX + ' ' + rotatecenterY + ')');           
    }

I'd like to integrate the directional check and also perhaps provide a specific rotation angle/allow for perpendicular labels. Any input on structure? I've linked bearing and direction code above...

from leaflet.textpath.

sorry should have been

textNode.setAttribute('transform', 'rotate(180 ' + rotatecenterX + ' ' + rotatecenterY + ')');

copied the wrong text block :(

from leaflet.textpath.

Well, you can add an option with the rotation angle...

If you'd like to keep your previous PR it could become :

if (options.flipvertical) {
    options.rotation = 90;
}

If you add some code for the bearing/directional check, make sure it remains super easy to use. IHMO it should remain internal stuff.
You can also add a small example in the demo (index.html).

from leaflet.textpath.

This would be very useful!

from leaflet.textpath.

Well, since this is still open, here's an approach I've been trying

var pos1 = textNode.getStartPositionOfChar(0);
var pos2 = textNode.getEndPositionOfChar(0);
if( pos2.x < pos1.x ){
    textPath.setAttribute('side','right');
}

from leaflet.textpath.