[OpenLayers-Trac] Re: [OpenLayers] #2193: Allow line breaks/newline in SVG vector labels

[OpenLayers]

#2193: Allow line breaks/newline in SVG vector labels
--------------------------------------------+-------------------------------
 Reporter:  Lucent                          |       Owner:  ahocevar    
     Type:  feature                         |      Status:  new         
 Priority:  minor                           |   Milestone:  2.11 Release
Component:  Renderer.SVG                    |     Version:  2.8         
 Keywords:  newline, linebreak, line break  |       State:              
--------------------------------------------+-------------------------------

Comment(by PadovaBoy):

 Hi, i suggest this snipplet (it works well for me)

 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);
                                 }
                                 if (style.fontOpacity) {
                                         label.setAttributeNS(null,
 "opacity", style.fontOpacity);
                                 }
                                 if (style.fontFamily) {
                                         label.setAttributeNS(null, "font-
 family", style.fontFamily);
                                 }
                                 if (style.fontSize) {
                                         label.setAttributeNS(null, "font-
 size", style.fontSize);
                                 }
                                 if (style.fontWeight) {
                                         label.setAttributeNS(null, "font-
 weight", style.fontWeight);
                                 }
                                 var align = style.labelAlign || "cm";
                                 label.setAttributeNS(null, "text-anchor",
 OpenLayers.Renderer.SVG.LABEL_ALIGN[align[0]] || "middle");


                                 var rows = [];
                                 if (style.label.indexOf('\n')) {
                                         rows = style.label.split('\n');
                                 } else {
                                         rows.push(style.label);
                                 }

 var fontSize = parseFloat(style.fontSize.replace('px',''));

                                 for (var i = 0; i < rows.length; i++) {
                                         var tspan =
 this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_tspan_"+i, "tspan");
                                         if (style.labelSelect === true) {
                                                 label.setAttributeNS(null,
 "pointer-events", "visible");
                                                 label._featureId =
 featureId;
                                                 tspan._featureId =
 featureId;
                                                 tspan._geometry =
 location;
                                                 tspan._geometryClass =
 location.CLASS_NAME;
                                         } else {
                                                 label.setAttributeNS(null,
 "pointer-events", "none");
                                         }
                                         if (this.isGecko) {
                                                 label.setAttributeNS(null,
 "dominant-baseline",
 OpenLayers.Renderer.SVG.LABEL_ALIGN[align[1]] || "central");
                                         } else {
                                                 tspan.setAttributeNS(null,
 "baseline-shift",
 OpenLayers.Renderer.SVG.LABEL_VSHIFT[align[1]] || "-35%");
                                         }
                                         tspan.textContent = rows[i];
                                         tspan.setAttribute("x",x);
                                         tspan.setAttribute("y", -(y -
 (fontSize*i)));
                                         if (!label.parentNode) {
                                                 label.appendChild(tspan);

                                         }
                                 }
                                 this.textRoot.appendChild(label);

                         };

-- 
Ticket URL: <http://trac.openlayers.org/ticket/2193#comment:1>
OpenLayers <http://openlayers.org/>
A free AJAX map viewer