diff --git a/README.md b/README.md index 6ea5c9c..15a4e64 100644 --- 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 index a5610fe..e68ac32 100644 --- 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 index 5596153..4b0197e 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/ */ @@ -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 index 83cef4e..409f439 100644 --- 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",