Merge branch 'patch-1' of https://github.com/kirkau/Leaflet.TextPath …

…into kirkau-patch-1
makinacorpus · May 19, 2016 · 2f739ec · 2f739ec
2 parents 9346e0e + e7955d8
commit 2f739ec
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -44,9 +44,14 @@ 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)
 * `offset` Set an offset to position text relative to the polyline (Default: 0)
+* `orientation` Rotate text.  (Default: 0)
+    - {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: `{}`)
 
 Screenshot
 ----------
@@ -66,6 +71,10 @@ Changelog
 
 * Nothing changed yet.
 
+### 1.1.0 ###
+
+* Add the orientation option (#27, thanks @kirkau)
+
 ### 1.0.2 ###
 
 * Allow HTTP and HTTPS to access the demo (#39, thanks @sonny89 and @leplatrem)

diff --git a/index.html b/index.html
@@ -88,7 +88,7 @@
                                       attributes: {'font-weight': 'bold',
                                                    'font-size': '24'}});
 
-        var flights = {
+        var flightsWE = {
           "type": "FeatureCollection",
           "features": [
             {
@@ -148,7 +148,13 @@
                   ]
                 ]
               }
-            },
+            }
+          ]
+        };
+
+        var flightsEW = {
+          "type": "FeatureCollection",
+          "features": [
             {
               "type": "Feature",
               "properties": {
@@ -179,7 +185,7 @@
           ]
         };
 
-        L.geoJson(flights, {
+        L.geoJson(flightsWE, {
             onEachFeature: function (feature, layer) {
                 layer.setText(feature.properties.flight, {offset: -5});
             },
@@ -190,6 +196,17 @@
             }
         }).addTo(map);
 
+        L.geoJson(flightsEW, {
+            onEachFeature: function (feature, layer) {
+                layer.setText(feature.properties.flight, {offset: -5, orientation: 'flip'});
+            },
+            style: {
+                weight: 3,
+                color: 'purple',
+                dashArray: '4, 4'
+            }
+        }).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
@@ -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/
  */
@@ -120,6 +121,26 @@ var PolylineTextPath = {
             textNode.setAttribute('dx', ((pathLength / 2) - (textLength / 2)));
         }
 
+        /* Change label rotation (if required) */
+        console.log(options.orientation)
+        if (options.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(' + rotateAngle + ' '  + rotatecenterX + ' ' + rotatecenterY + ')');
+        }
+
         /* Initialize mouse events for the additional nodes */
         if (this.options.clickable) {
             if (L.Browser.svg || !L.Browser.vml) {
@@ -152,4 +173,6 @@ L.LayerGroup.include({
     }
 });
 
+
+
 })();
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "leaflet-textpath",
-    "version": "1.0.2",
+    "version": "1.1.0",
     "description": "Shows a text (or a pattern) along a Polyline",
     "keywords": ["Leaflet", "GIS", "SVG"],
     "main": "leaflet.textpath.js",