Rotating Labels OpenLayers 2.11

Readme.md

Rotating Labels OpenLayers 2.11

This is an old post from my blog

To rotate your text labels do the following (using OpenLayers 2.11):

1. Create a CustomSVG.js or modify the existing SVG.js and add the following lines to the Method drawText

/**
* Method: drawText
* This method is only called by the renderer itself.
*
* Parameters:
* featureId - {String}
* style -
* location - {<OpenLayers.Geometry.Point>}
*/
drawText: function(featureId, style, location) {
  var resolution = this.getResolution();
  
  //add this for rotation----------------------------------------
  var layer = this.map.getLayer(this.container.id);
  var feature = layer.getFeatureById(featureId);
  location = (feature.attributes.centroid ? feature.attributes.centroid : location);
  /////////////////////////----------------------------------------
  
  var x = (location.x / resolution + this.left);
  var y = (location.y / resolution - this.top);
  
  var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "text");
  
  label.setAttributeNS(null, "x", x);
  label.setAttributeNS(null, "y", -y);
  
  //add this for rotation----------------------------------------
  if (style.angle || style.angle == 0) {
    var rotate = 'rotate(' + style.angle + ',' + x + "," + -y + ')';
    label.setAttributeNS(null, "transform", rotate);
  }
  /////////////////////////----------------------------------------
  
  if (style.fontColor) {
    label.setAttributeNS(null, "fill", style.fontColor);
  }
  if (style.fontOpacity) {
    label.setAttributeNS(null, "opacity", style.fontOpacity);
  }
  if (style.fontFamily) {
    label.setAttributeNS(null, "font-family", style.fontFamily);
  }
  
  .
  .
  .

2. Create a StyleMap with the angle-option

var styleMap = new OpenLayers.StyleMap({
  label : "${label}",
  cursor: "pointer",
  labelXOffset: 0,
  labelYOffset: 0,
  fontColor: "black",
  fontSize: "24px",
  fontFamily: "Arial",
  labelSelect: true,
  labelAlign: "cm",
  angle: "${angle}"
});

3. When creating your layers add the renderers-option

var vectorLayer = new OpenLayers.Layer.Vector("newLayer", {
  styleMap: myStylemap,
  strategies: [myStrategy],
  renderers: ["CustomSVG", "VML"], //VML only for IE <= 8, labels are not rotated
  protocol: new OpenLayers.Protocol.HTTP({
    url: "gml/myGML.gml",               // or some other source
    format: new OpenLayers.Format.GML()
  })
});

All credits to thachun

RotateSVG.patch

*** lib/OpenLayers/Renderer/SVG.js	2011-06-06 04:02:12.000000000 +0200
--- lib/OpenLayers/CustomRenderer/SVG.js	2012-04-02 12:41:06.000000000 +0200
***************
*** 680,694 ****
       */
      drawText: function(featureId, style, location) {
          var resolution = this.getResolution();
! 
          var x = (location.x / resolution + this.left);
          var y = (location.y / resolution - this.top);
! 
          var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "text");
  
          label.setAttributeNS(null, "x", x);
          label.setAttributeNS(null, "y", -y);
! 
          if (style.fontColor) {
              label.setAttributeNS(null, "fill", style.fontColor);
          }
--- 680,707 ----
       */
      drawText: function(featureId, style, location) {
          var resolution = this.getResolution();
! 		
! 		//add this for rotation----------------------------------------
! 		var layer = this.map.getLayer(this.container.id);
!         var feature = layer.getFeatureById(featureId);        
!         location = (feature.attributes.centroid ? feature.attributes.centroid : location);
! 		/////////////////////////----------------------------------------
! 		
          var x = (location.x / resolution + this.left);
          var y = (location.y / resolution - this.top);
!         
          var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "text");
  
          label.setAttributeNS(null, "x", x);
          label.setAttributeNS(null, "y", -y);
! 		
! 		//add this for rotation----------------------------------------
! 		if (style.angle || style.angle == 0) {        
!         	var rotate = 'rotate(' + style.angle + ',' + x + "," + -y + ')'; 
!         	label.setAttributeNS(null, "transform", rotate);
!         }
! 		/////////////////////////----------------------------------------
! 		
          if (style.fontColor) {
              label.setAttributeNS(null, "fill", style.fontColor);
          }