Merge pull request #140 from aabt/outline

Add label outline to SVG and Canvas renderers

lib/OpenLayers/Renderer/Canvas.js

@@ -525,10 +525,6 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
      * style    - {Object}
      */
     drawText: function(location, style) {
-        style = OpenLayers.Util.extend({
-            fontColor: "#000000",
-            labelAlign: "cm"
-        }, style);
         var pt = this.getLocalXY(location);
 
         this.setCanvasStyle("reset");
@@ -560,6 +556,13 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
                 this.canvas.measureText('xx').width;
             pt[1] += lineHeight*vfactor*(numRows-1);
             for (var i = 0; i < numRows; i++) {
+                if (style.labelOutlineWidth) {
+                    this.canvas.save();
+                    this.canvas.strokeStyle = style.labelOutlineColor;
+                    this.canvas.lineWidth = style.labelOutlineWidth;
+                    this.canvas.strokeText(labelRows[i], pt[0], pt[1] + (lineHeight*i) + 1);
+                    this.canvas.restore();
+                }
                 this.canvas.fillText(labelRows[i], pt[0], pt[1] + (lineHeight*i));
             }
         } else if (this.canvas.mozDrawText) {

lib/OpenLayers/Renderer/Elements.js

@@ -415,6 +415,12 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
      */
     LABEL_ID_SUFFIX: "_label",
     
+    /**
+     * Constant: LABEL_OUTLINE_SUFFIX
+     * {String}
+     */
+    LABEL_OUTLINE_SUFFIX: "_outline",
+
     /**
      * Constructor: OpenLayers.Renderer.Elements
      * 
@@ -879,6 +885,10 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
         if (label) {
             this.textRoot.removeChild(label);
         }
+        var outline = document.getElementById(featureId + this.LABEL_OUTLINE_SUFFIX);
+        if (outline) {
+            this.textRoot.removeChild(outline);
+        }
     },
 
     /**

lib/OpenLayers/Renderer/SVG.js

@@ -643,12 +643,25 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
      * location - {<OpenLayers.Geometry.Point>}
      */
     drawText: function(featureId, style, location) {
+        var drawOutline = (!!style.labelOutlineWidth);
+        // First draw text in halo color and size and overlay the
+        // normal text afterwards
+        if (drawOutline) {
+            var outlineStyle = OpenLayers.Util.extend({}, style);
+            outlineStyle.fontColor = outlineStyle.labelOutlineColor;
+            outlineStyle.fontStrokeColor = outlineStyle.labelOutlineColor;
+            outlineStyle.fontStrokeWidth = style.labelOutlineWidth;
+            delete outlineStyle.labelOutlineWidth;
+            this.drawText(featureId, outlineStyle, location);
+        }
+
         var resolution = this.getResolution();
 
         var x = ((location.x - this.featureDx) / resolution + this.left);
         var y = (location.y / resolution - this.top);
 
-        var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "text");
+        var suffix = (drawOutline)?this.LABEL_OUTLINE_SUFFIX:this.LABEL_ID_SUFFIX;
+            label = this.nodeFactory(featureId + suffix, "text");
 
         label.setAttributeNS(null, "x", x);
         label.setAttributeNS(null, "y", -y);
@@ -656,6 +669,12 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         if (style.fontColor) {
             label.setAttributeNS(null, "fill", style.fontColor);
         }
+        if (style.fontStrokeColor) {
+            label.setAttributeNS(null, "stroke", style.fontStrokeColor);
+        }
+        if (style.fontStrokeWidth) {
+            label.setAttributeNS(null, "stroke-width", style.fontStrokeWidth);
+        }
         if (style.fontOpacity) {
             label.setAttributeNS(null, "opacity", style.fontOpacity);
         }
@@ -677,7 +696,7 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         } else {
             label.setAttributeNS(null, "pointer-events", "none");
         }
-        var align = style.labelAlign || "cm";
+        var align = style.labelAlign;
         label.setAttributeNS(null, "text-anchor",
             OpenLayers.Renderer.SVG.LABEL_ALIGN[align[0]] || "middle");
 
@@ -692,7 +711,7 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
             label.removeChild(label.lastChild);
         }
         for (var i = 0; i < numRows; i++) {
-            var tspan = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_tspan_" + i, "tspan");
+            var tspan = this.nodeFactory(featureId + suffix + "_tspan_" + i, "tspan");
             if (style.labelSelect === true) {
                 tspan._featureId = featureId;
                 tspan._geometry = location;

lib/OpenLayers/Renderer/SVG2.js

@@ -584,7 +584,7 @@ OpenLayers.Renderer.SVG2 = OpenLayers.Class(OpenLayers.Renderer.NG, {
         } else {
             text.setAttributeNS(null, "pointer-events", "none");
         }
-        var align = style.labelAlign || "cm";
+        var align = style.labelAlign;
         text.setAttributeNS(null, "text-anchor",
             OpenLayers.Renderer.SVG2.LABEL_ALIGN[align[0]] || "middle");