From 65072ad6f27b23a6f99353bc76854d93f8a88c7e Mon Sep 17 00:00:00 2001 From: kirkau Date: Mon, 13 Apr 2015 11:37:07 +1000 Subject: [PATCH 1/5] Added option flipvertical Rotates a label to the correct orientation when line runs east-> west. Needs to be integrated with direction check (via bearing) --- leaflet.textpath.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/leaflet.textpath.js b/leaflet.textpath.js index ac30f23..b71ff05 100755 --- a/leaflet.textpath.js +++ b/leaflet.textpath.js @@ -120,6 +120,12 @@ var PolylineTextPath = { textNode.setAttribute('dx', ((pathWidth / 2) - (textWidth / 2))); } + 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 + ')'); + } + /* Initialize mouse events for the additional nodes */ if (this.options.clickable) { if (L.Browser.svg || !L.Browser.vml) { From eeb0ef037d6c38433a1279e86083a8c84590e290 Mon Sep 17 00:00:00 2001 From: kirkau Date: Mon, 13 Apr 2015 20:38:08 +1000 Subject: [PATCH 2/5] Update leaflet.textpath.js --- leaflet.textpath.js | 51 +++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 47 insertions(+), 4 deletions(-) diff --git a/leaflet.textpath.js b/leaflet.textpath.js index b71ff05..8577d4e 100755 --- a/leaflet.textpath.js +++ b/leaflet.textpath.js @@ -1,4 +1,5 @@ /* + * Leaflet.TextPath - Shows text along a polyline * Inspired by Tom Mac Wright article : * http://mapbox.com/osmdev/2012/11/20/getting-serious-about-svg/ */ @@ -121,10 +122,10 @@ var PolylineTextPath = { } 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 + ')'); - } + var rotatecenterX = (textNode.getBBox().x + textNode.getBBox().width / 2); + var rotatecenterY = (textNode.getBBox().y + textNode.getBBox().height / 2); + textNode.setAttribute('transform', 'rotate(180 ' + rotatecenterX + ' ' + rotatecenterY + ')'); + } /* Initialize mouse events for the additional nodes */ if (this.options.clickable) { @@ -158,4 +159,46 @@ L.LayerGroup.include({ } }); +/* Functions to compute line direction to correct text orientation + * Note: only generic, in future could check each line segment. + */ + +/* Calculate bearing between start and end of line */ +function getBearing(Lat1, Lon1, Lat2, Lon2) { + var dLon = Lon2.toRadians() - Lon1.toRadians(); + var dPhi = Math.log(Math.tan(Lat2.toRadians() / 2 + Math.PI/4) / Math.tan(Lat1.toRadians()/2 + Math.PI/4)); + if (Math.abs(dLon) > Math.PI){ + if (dLon > 0.0) { + dLon = -(2.0 * Math.PI - dLon); + } else { + dLon = (2.0 * Math.PI + dLon); + } + } + + return (Math.atan2(dLon, dPhi)) + 360).toDegrees() % 360; +} + +/* Convert bearing into a generic direction. Lines heading North or East should have their labels flipped */ +function correctLabelOrientation (b) { + if (b >= 45 && b =< 135) { + return true; /* North */ + } else if (b >= 136 && b =< 225) { + return true; /* East */ + } else if (b >= 226 && b =< 315) { + return false; /* South */ + } else { + return false; /* West */ + } +} + +/* Convert Degrees to Radians */ +Number.prototype.toRadians = function() { + return (this.valueOf() * Math.PI) / 180; +} + +/* Convert Radians to Degrees */ +Number.prototype.toDegrees = function() { + return this.valueOf() * (180 * Math.PI); +} + })(); From 46d7df237695cca15874759a70ed31cb7779d663 Mon Sep 17 00:00:00 2001 From: kirkau Date: Mon, 13 Apr 2015 20:56:07 +1000 Subject: [PATCH 3/5] Update leaflet.textpath.js --- leaflet.textpath.js | 60 +++++++++++++-------------------------------- 1 file changed, 17 insertions(+), 43 deletions(-) diff --git a/leaflet.textpath.js b/leaflet.textpath.js index 8577d4e..c15b685 100755 --- a/leaflet.textpath.js +++ b/leaflet.textpath.js @@ -121,12 +121,26 @@ var PolylineTextPath = { textNode.setAttribute('dx', ((pathWidth / 2) - (textWidth / 2))); } - if (options.flipvertical) { + /* Change label rotation (if required) */ + if (options.hasOwnProperty(orientation)) { + var rotateAngle = 0; + switch (options.orientation) + { + case "flip": + rotateAngle = 180; + break; + case "perpendicular" + rotateAngle = 90; + break; + default: + rotateAngle = options.orientation; + } + var rotatecenterX = (textNode.getBBox().x + textNode.getBBox().width / 2); var rotatecenterY = (textNode.getBBox().y + textNode.getBBox().height / 2); - textNode.setAttribute('transform', 'rotate(180 ' + rotatecenterX + ' ' + rotatecenterY + ')'); + textNode.setAttribute('transform', 'rotate(' + rotateAngle + ' ' + rotatecenterX + ' ' + rotatecenterY + ')'); } - + /* Initialize mouse events for the additional nodes */ if (this.options.clickable) { if (L.Browser.svg || !L.Browser.vml) { @@ -159,46 +173,6 @@ L.LayerGroup.include({ } }); -/* Functions to compute line direction to correct text orientation - * Note: only generic, in future could check each line segment. - */ - -/* Calculate bearing between start and end of line */ -function getBearing(Lat1, Lon1, Lat2, Lon2) { - var dLon = Lon2.toRadians() - Lon1.toRadians(); - var dPhi = Math.log(Math.tan(Lat2.toRadians() / 2 + Math.PI/4) / Math.tan(Lat1.toRadians()/2 + Math.PI/4)); - if (Math.abs(dLon) > Math.PI){ - if (dLon > 0.0) { - dLon = -(2.0 * Math.PI - dLon); - } else { - dLon = (2.0 * Math.PI + dLon); - } - } - - return (Math.atan2(dLon, dPhi)) + 360).toDegrees() % 360; -} - -/* Convert bearing into a generic direction. Lines heading North or East should have their labels flipped */ -function correctLabelOrientation (b) { - if (b >= 45 && b =< 135) { - return true; /* North */ - } else if (b >= 136 && b =< 225) { - return true; /* East */ - } else if (b >= 226 && b =< 315) { - return false; /* South */ - } else { - return false; /* West */ - } -} - -/* Convert Degrees to Radians */ -Number.prototype.toRadians = function() { - return (this.valueOf() * Math.PI) / 180; -} -/* Convert Radians to Degrees */ -Number.prototype.toDegrees = function() { - return this.valueOf() * (180 * Math.PI); -} })(); From c36ad9377883e0b4821efccca2c7c699503d5221 Mon Sep 17 00:00:00 2001 From: kirkau Date: Mon, 13 Apr 2015 20:59:36 +1000 Subject: [PATCH 4/5] Update README.md --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index df421aa..0548f02 100644 --- a/README.md +++ b/README.md @@ -44,8 +44,13 @@ With a GeoJSON containing lines, it becomes: * `repeat` Specifies if the text should be repeated along the polyline (Default: `false`) * `center` Centers the text according to the polyline's bounding box (Default: `false`) -* `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: `{}`) * `below` Show text below the path (Default: false) +* `orientation` Rotate text. (Default: 0) + - orientation: - 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. + +* `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: `{}`) Screenshot ---------- From e7955d8e43ca76704214d926bc935920e4dd589c Mon Sep 17 00:00:00 2001 From: kirkau Date: Mon, 13 Apr 2015 21:00:40 +1000 Subject: [PATCH 5/5] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0548f02..32a0097 100644 --- a/README.md +++ b/README.md @@ -46,9 +46,9 @@ With a GeoJSON containing lines, it becomes: * `center` Centers the text according to the polyline's bounding box (Default: `false`) * `below` Show text below the path (Default: false) * `orientation` Rotate text. (Default: 0) - - orientation: - 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: 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. * `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: `{}`)