diff --git a/documentation/md/style.md b/documentation/md/style.md index 4f9f6d236..d369f3237 100644 --- a/documentation/md/style.md +++ b/documentation/md/style.md @@ -102,6 +102,7 @@ Labels: * **`text-outline-color`** : The colour of the outline around the element's label text. * **`text-outline-opacity`** : The opacity of the outline on label text. * **`text-outline-width`** : The size of the outline on label text. + * **`text-rotation`** : The angle to rotate the label text, may be specified in degrees or radians (e.g. `180deg` or `3.14rad`). * **`min-zoomed-font-size`** : If zooming makes the effective font size of the label smaller than this, then no label is shown. Size & visibility: diff --git a/src/extensions/renderer.canvas.drawing-label-text.js b/src/extensions/renderer.canvas.drawing-label-text.js index 3ab48443e..f4984c6bf 100644 --- a/src/extensions/renderer.canvas.drawing-label-text.js +++ b/src/extensions/renderer.canvas.drawing-label-text.js @@ -155,6 +155,19 @@ var text = this.setupTextStyle( context, element ); if ( text != null && !isNaN(textX) && !isNaN(textY) ) { + var rotationAngle = style['text-rotation'].value; + + if(rotationAngle != 0) { + //If specified in degrees, convert to radians: + if(style['text-rotation'].units == 'deg') { + rotationAngle = rotationAngle * Math.PI/180; + } + + context.translate(textX,textY); + context.rotate(rotationAngle); + context.translate(-textX,-textY); + } + var lineWidth = 2 * style['text-outline-width'].value; // *2 b/c the stroke is drawn centred on the middle if (lineWidth > 0) { context.lineWidth = lineWidth; @@ -162,6 +175,12 @@ } context.fillText(text, textX, textY); + + if(rotationAngle != 0) { + context.translate(textX,textY); + context.rotate(-rotationAngle); + context.translate(-textX,-textY); + } } }; diff --git a/src/style.js b/src/style.js index 92100494c..84ece55a1 100644 --- a/src/style.js +++ b/src/style.js @@ -79,7 +79,8 @@ mapData: { mapping: true, regex: mapData('mapData') }, mapLayoutData: { mapping: true, regex: mapData('mapLayoutData') }, url: { regex: '^url\\s*\\(\\s*([^\\s]+)\\s*\\s*\\)|none|(.+)$' }, - propList: { propList: true } + propList: { propList: true }, + angle: { number: true, units: 'deg|rad'} }; // define visual style properties @@ -96,6 +97,7 @@ { name: 'text-opacity', type: t.zeroOneNumber }, { name: 'text-decoration', type: t.textDecoration }, { name: 'text-transform', type: t.textTransform }, + { name: 'text-rotation', type: t.angle }, { name: 'font-family', type: t.fontFamily }, { name: 'font-style', type: t.fontStyle }, { name: 'font-variant', type: t.fontVariant }, @@ -244,6 +246,7 @@ 'text-opacity': 1, 'text-decoration': 'none', 'text-transform': textTransform, + 'text-rotation': '0deg', 'font-family': fontFamily, 'font-style': fontStyle, 'font-variant': fontVariant,