openlayers/lib/OpenLayers/Renderer/VML.js

   1 /* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
   2  * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the
   3  * full text of the license. */
   4
   5 /**
   6  * @requires OpenLayers/Renderer/Elements.js
   7  */
   8
   9 /**
  10  * Class: OpenLayers.Renderer.VML
  11  * Render vector features in browsers with VML capability.  Construct a new
  12  * VML renderer with the <OpenLayers.Renderer.VML> constructor.
  13  *
  14  * Note that for all calculations in this class, we use toFixed() to round a
  15  * float value to an integer. This is done because it seems that VML doesn't
  16  * support float values.
  17  *
  18  * Inherits from:
  19  *  - <OpenLayers.Renderer.Elements>
  20  */
  21 OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
  22
  23     /**
  24      * Property: xmlns
  25      * {String} XML Namespace URN
  26      */
  27     xmlns: "urn:schemas-microsoft-com:vml",
  28
  29     /**
  30      * Property: symbolCache
  31      * {DOMElement} node holding symbols. This hash is keyed by symbol name,
  32      *     and each value is a hash with a "path" and an "extent" property.
  33      */
  34     symbolCache: {},
  35
  36     /**
  37      * Property: offset
  38      * {Object} Hash with "x" and "y" properties
  39      */
  40     offset: null,
  41
  42     /**
  43      * Constructor: OpenLayers.Renderer.VML
  44      * Create a new VML renderer.
  45      *
  46      * Parameters:
  47      * containerID - {String} The id for the element that contains the renderer
  48      */
  49     initialize: function(containerID) {
  50         if (!this.supported()) {
  51             return;
  52         }
  53         if (!document.namespaces.olv) {
  54             document.namespaces.add("olv", this.xmlns);
  55             var style = document.createStyleSheet();
  56             var shapes = ['shape','rect', 'oval', 'fill', 'stroke', 'imagedata', 'group','textbox'];
  57             for (var i = 0, len = shapes.length; i < len; i++) {
  58
  59                 style.addRule('olv\\:' + shapes[i], "behavior: url(#default#VML); " +
  60                               "position: absolute; display: inline-block;");
  61             }
  62         }
  63
  64         OpenLayers.Renderer.Elements.prototype.initialize.apply(this,
  65                                                                 arguments);
  66         this.offset = {x: 0, y: 0};
  67     },
  68
  69     /**
  70      * APIMethod: destroy
  71      * Deconstruct the renderer.
  72      */
  73     destroy: function() {
  74         OpenLayers.Renderer.Elements.prototype.destroy.apply(this, arguments);
  75     },
  76
  77     /**
  78      * APIMethod: supported
  79      * Determine whether a browser supports this renderer.
  80      *
  81      * Returns:
  82      * {Boolean} The browser supports the VML renderer
  83      */
  84     supported: function() {
  85         return !!(document.namespaces);
  86     },
  87
  88     /**
  89      * Method: setExtent
  90      * Set the renderer's extent
  91      *
  92      * Parameters:
  93      * extent - {<OpenLayers.Bounds>}
  94      * resolutionChanged - {Boolean}
  95      *
  96      * Returns:
  97      * {Boolean} true to notify the layer that the new extent does not exceed
  98      *     the coordinate range, and the features will not need to be redrawn.
  99      */
 100     setExtent: function(extent, resolutionChanged) {
 101         OpenLayers.Renderer.Elements.prototype.setExtent.apply(this,
 102                                                                arguments);
 103         var resolution = this.getResolution();
 104
 105         var left = extent.left/resolution;
 106         var top = extent.top/resolution - this.size.h;
 107         if (resolutionChanged) {
 108             this.offset = {x: left, y: top};
 109             left = 0;
 110             top = 0;
 111         } else {
 112             left = left - this.offset.x;
 113             top = top - this.offset.y;
 114         }
 115
 116
 117         var org = left + " " + top;
 118         this.root.coordorigin = org;
 119         var roots = [this.root, this.vectorRoot, this.textRoot];
 120         var root;
 121         for(var i=0, len=roots.length; i<len; ++i) {
 122             root = roots[i];
 123
 124             var size = this.size.w + " " + this.size.h;
 125             root.coordsize = size;
 126
 127         }
 128         // flip the VML display Y axis upside down so it
 129         // matches the display Y axis of the map
 130         this.root.style.flip = "y";
 131
 132         return true;
 133     },
 134
 135
 136     /**
 137      * Method: setSize
 138      * Set the size of the drawing surface
 139      *
 140      * Parameters:
 141      * size - {<OpenLayers.Size>} the size of the drawing surface
 142      */
 143     setSize: function(size) {
 144         OpenLayers.Renderer.prototype.setSize.apply(this, arguments);
 145
 146         // setting width and height on all roots to avoid flicker which we
 147         // would get with 100% width and height on child roots
 148         var roots = [
 149             this.rendererRoot,
 150             this.root,
 151             this.vectorRoot,
 152             this.textRoot
 153         ];
 154         var w = this.size.w + "px";
 155         var h = this.size.h + "px";
 156         var root;
 157         for(var i=0, len=roots.length; i<len; ++i) {
 158             root = roots[i];
 159             root.style.width = w;
 160             root.style.height = h;
 161         }
 162     },
 163
 164     /**
 165      * Method: getNodeType
 166      * Get the node type for a geometry and style
 167      *
 168      * Parameters:
 169      * geometry - {<OpenLayers.Geometry>}
 170      * style - {Object}
 171      *
 172      * Returns:
 173      * {String} The corresponding node type for the specified geometry
 174      */
 175     getNodeType: function(geometry, style) {
 176         var nodeType = null;
 177         switch (geometry.CLASS_NAME) {
 178             case "OpenLayers.Geometry.Point":
 179                 if (style.externalGraphic) {
 180                     nodeType = "olv:rect";
 181                 } else if (this.isComplexSymbol(style.graphicName)) {
 182                     nodeType = "olv:shape";
 183                 } else {
 184                     nodeType = "olv:oval";
 185                 }
 186                 break;
 187             case "OpenLayers.Geometry.Rectangle":
 188                 nodeType = "olv:rect";
 189                 break;
 190             case "OpenLayers.Geometry.LineString":
 191             case "OpenLayers.Geometry.LinearRing":
 192             case "OpenLayers.Geometry.Polygon":
 193             case "OpenLayers.Geometry.Curve":
 194             case "OpenLayers.Geometry.Surface":
 195                 nodeType = "olv:shape";
 196                 break;
 197             default:
 198                 break;
 199         }
 200         return nodeType;
 201     },
 202
 203     /**
 204      * Method: setStyle
 205      * Use to set all the style attributes to a VML node.
 206      *
 207      * Parameters:
 208      * node - {DOMElement} An VML element to decorate
 209      * style - {Object}
 210      * options - {Object} Currently supported options include
 211      *                              'isFilled' {Boolean} and
 212      *                              'isStroked' {Boolean}
 213      * geometry - {<OpenLayers.Geometry>}
 214      */
 215     setStyle: function(node, style, options, geometry) {
 216         style = style  || node._style;
 217         options = options || node._options;
 218         var widthFactor = 1;
 219
 220         if (node._geometryClass == "OpenLayers.Geometry.Point") {
 221             if (style.externalGraphic) {
 222                         if (style.graphicTitle) {
 223                     node.title=style.graphicTitle;
 224                 }
 225                 var width = style.graphicWidth || style.graphicHeight;
 226                 var height = style.graphicHeight || style.graphicWidth;
 227                 width = width ? width : style.pointRadius*2;
 228                 height = height ? height : style.pointRadius*2;
 229
 230                 var resolution = this.getResolution();
 231                 var xOffset = (style.graphicXOffset != undefined) ?
 232                     style.graphicXOffset : -(0.5 * width);
 233                 var yOffset = (style.graphicYOffset != undefined) ?
 234                     style.graphicYOffset : -(0.5 * height);
 235
 236                 node.style.left = ((geometry.x/resolution - this.offset.x)+xOffset).toFixed();
 237                 node.style.top = ((geometry.y/resolution - this.offset.y)-(yOffset+height)).toFixed();
 238                 node.style.width = width + "px";
 239                 node.style.height = height + "px";
 240                 node.style.flip = "y";
 241
 242                 // modify style/options for fill and stroke styling below
 243                 style.fillColor = "none";
 244                 options.isStroked = false;
 245             } else if (this.isComplexSymbol(style.graphicName)) {
 246                 var cache = this.importSymbol(style.graphicName);
 247                 node.path = cache.path;
 248                 node.coordorigin = cache.left + "," + cache.bottom;
 249                 var size = cache.size;
 250                 node.coordsize = size + "," + size;
 251                 this.drawCircle(node, geometry, style.pointRadius);
 252                 node.style.flip = "y";
 253             } else {
 254                 this.drawCircle(node, geometry, style.pointRadius);
 255             }
 256         }
 257
 258         // fill
 259         if (options.isFilled) {
 260             node.fillcolor = style.fillColor;
 261         } else {
 262             node.filled = "false";
 263         }
 264         var fills = node.getElementsByTagName("fill");
 265         var fill = (fills.length == 0) ? null : fills[0];
 266         if (!options.isFilled) {
 267             if (fill) {
 268                 node.removeChild(fill);
 269             }
 270         } else {
 271             if (!fill) {
 272                 fill = this.createNode('olv:fill', node.id + "_fill");
 273             }
 274             fill.opacity = style.fillOpacity;
 275
 276             if (node._geometryClass == "OpenLayers.Geometry.Point" &&
 277                     style.externalGraphic) {
 278
 279                 // override fillOpacity
 280                 if (style.graphicOpacity) {
 281                     fill.opacity = style.graphicOpacity;
 282                 }
 283
 284                 fill.src = style.externalGraphic;
 285                 fill.type = "frame";
 286
 287                 if (!(style.graphicWidth && style.graphicHeight)) {
 288                   fill.aspect = "atmost";
 289                 }
 290             }
 291             if (fill.parentNode != node) {
 292                 node.appendChild(fill);
 293             }
 294         }
 295
 296         // additional rendering for rotated graphics or symbols
 297         if (typeof style.rotation != "undefined") {
 298             if (style.externalGraphic) {
 299                 this.graphicRotate(node, xOffset, yOffset);
 300                 // make the fill fully transparent, because we now have
 301                 // the graphic as imagedata element. We cannot just remove
 302                 // the fill, because this is part of the hack described
 303                 // in graphicRotate
 304                 fill.opacity = 0;
 305             } else {
 306                 node.style.rotation = style.rotation;
 307             }
 308         }
 309
 310         // stroke
 311         if (options.isStroked) {
 312             node.strokecolor = style.strokeColor;
 313             node.strokeweight = style.strokeWidth + "px";
 314         } else {
 315             node.stroked = false;
 316         }
 317         var strokes = node.getElementsByTagName("stroke");
 318         var stroke = (strokes.length == 0) ? null : strokes[0];
 319         if (!options.isStroked) {
 320             if (stroke) {
 321                 node.removeChild(stroke);
 322             }
 323         } else {
 324             if (!stroke) {
 325                 stroke = this.createNode('olv:stroke', node.id + "_stroke");
 326                 node.appendChild(stroke);
 327             }
 328             stroke.opacity = style.strokeOpacity;
 329             stroke.endcap = !style.strokeLinecap || style.strokeLinecap == 'butt' ? 'flat' : style.strokeLinecap;
 330             stroke.dashstyle = this.dashStyle(style);
 331         }
 332
 333         if (style.cursor != "inherit" && style.cursor != null) {
 334             node.style.cursor = style.cursor;
 335         }
 336         return node;
 337     },
 338
 339     /**
 340      * Method: graphicRotate
 341      * If a point is to be styled with externalGraphic and rotation, VML fills
 342      * cannot be used to display the graphic, because rotation of graphic
 343      * fills is not supported by the VML implementation of Internet Explorer.
 344      * This method creates a olv:imagedata element inside the VML node,
 345      * DXImageTransform.Matrix and BasicImage filters for rotation and
 346      * opacity, and a 3-step hack to remove rendering artefacts from the
 347      * graphic and preserve the ability of graphics to trigger events.
 348      * Finally, OpenLayers methods are used to determine the correct
 349      * insertion point of the rotated image, because DXImageTransform.Matrix
 350      * does the rotation without the ability to specify a rotation center
 351      * point.
 352      *
 353      * Parameters:
 354      * node    - {DOMElement}
 355      * xOffset - {Number} rotation center relative to image, x coordinate
 356      * yOffset - {Number} rotation center relative to image, y coordinate
 357      */
 358     graphicRotate: function(node, xOffset, yOffset) {
 359         var style = style || node._style;
 360         var options = node._options;
 361
 362         var aspectRatio, size;
 363         if (!(style.graphicWidth && style.graphicHeight)) {
 364             // load the image to determine its size
 365             var img = new Image();
 366             img.onreadystatechange = OpenLayers.Function.bind(function() {
 367                 if(img.readyState == "complete" ||
 368                         img.readyState == "interactive") {
 369                     aspectRatio = img.width / img.height;
 370                     size = Math.max(style.pointRadius * 2,
 371                         style.graphicWidth || 0,
 372                         style.graphicHeight || 0);
 373                     xOffset = xOffset * aspectRatio;
 374                     style.graphicWidth = size * aspectRatio;
 375                     style.graphicHeight = size;
 376                     this.graphicRotate(node, xOffset, yOffset);
 377                 }
 378             }, this);
 379             img.src = style.externalGraphic;
 380
 381             // will be called again by the onreadystate handler
 382             return;
 383         } else {
 384             size = Math.max(style.graphicWidth, style.graphicHeight);
 385             aspectRatio = style.graphicWidth / style.graphicHeight;
 386         }
 387
 388         var width = Math.round(style.graphicWidth || size * aspectRatio);
 389         var height = Math.round(style.graphicHeight || size);
 390         node.style.width = width + "px";
 391         node.style.height = height + "px";
 392
 393         // Three steps are required to remove artefacts for images with
 394         // transparent backgrounds (resulting from using DXImageTransform
 395         // filters on svg objects), while preserving awareness for browser
 396         // events on images:
 397         // - Use the fill as usual (like for unrotated images) to handle
 398         //   events
 399         // - specify an imagedata element with the same src as the fill
 400         // - style the imagedata element with an AlphaImageLoader filter
 401         //   with empty src
 402         var image = document.getElementById(node.id + "_image");
 403         if (!image) {
 404             image = this.createNode("olv:imagedata", node.id + "_image");
 405             node.appendChild(image);
 406         }
 407         image.style.width = width + "px";
 408         image.style.height = height + "px";
 409         image.src = style.externalGraphic;
 410         image.style.filter =
 411             "progid:DXImageTransform.Microsoft.AlphaImageLoader(" +
 412             "src='', sizingMethod='scale')";
 413
 414         var rotation = style.rotation * Math.PI / 180;
 415         var sintheta = Math.sin(rotation);
 416         var costheta = Math.cos(rotation);
 417
 418         // do the rotation on the image
 419         var filter =
 420             "progid:DXImageTransform.Microsoft.Matrix(M11=" + costheta +
 421             ",M12=" + (-sintheta) + ",M21=" + sintheta + ",M22=" + costheta +
 422             ",SizingMethod='auto expand')\n";
 423
 424         // set the opacity (needed for the imagedata)
 425         var opacity = style.graphicOpacity || style.fillOpacity;
 426         if (opacity && opacity != 1) {
 427             filter +=
 428                 "progid:DXImageTransform.Microsoft.BasicImage(opacity=" +
 429                 opacity+")\n";
 430         }
 431         node.style.filter = filter;
 432
 433         // do the rotation again on a box, so we know the insertion point
 434         var centerPoint = new OpenLayers.Geometry.Point(-xOffset, -yOffset);
 435         var imgBox = new OpenLayers.Bounds(0, 0, width, height).toGeometry();
 436         imgBox.rotate(style.rotation, centerPoint);
 437         var imgBounds = imgBox.getBounds();
 438
 439         node.style.left = Math.round(
 440             parseInt(node.style.left) + imgBounds.left) + "px";
 441         node.style.top = Math.round(
 442             parseInt(node.style.top) - imgBounds.bottom) + "px";
 443     },
 444
 445     /**
 446      * Method: postDraw
 447      * Some versions of Internet Explorer seem to be unable to set fillcolor
 448      * and strokecolor to "none" correctly before the fill node is appended to
 449      * a visible vml node. This method takes care of that and sets fillcolor
 450      * and strokecolor again if needed.
 451      *
 452      * Parameters:
 453      * node - {DOMElement}
 454      */
 455     postDraw: function(node) {
 456         var fillColor = node._style.fillColor;
 457         var strokeColor = node._style.strokeColor;
 458         if (fillColor == "none" &&
 459                 node.fillcolor != fillColor) {
 460             node.fillcolor = fillColor;
 461         }
 462         if (strokeColor == "none" &&
 463                 node.strokecolor != strokeColor) {
 464             node.strokecolor = strokeColor;
 465         }
 466     },
 467
 468
 469     /**
 470      * Method: setNodeDimension
 471      * Get the geometry's bounds, convert it to our vml coordinate system,
 472      * then set the node's position, size, and local coordinate system.
 473      *
 474      * Parameters:
 475      * node - {DOMElement}
 476      * geometry - {<OpenLayers.Geometry>}
 477      */
 478     setNodeDimension: function(node, geometry) {
 479
 480         var bbox = geometry.getBounds();
 481         if(bbox) {
 482             var resolution = this.getResolution();
 483
 484             var scaledBox =
 485                 new OpenLayers.Bounds((bbox.left/resolution - this.offset.x).toFixed(),
 486                                       (bbox.bottom/resolution - this.offset.y).toFixed(),
 487                                       (bbox.right/resolution - this.offset.x).toFixed(),
 488                                       (bbox.top/resolution - this.offset.y).toFixed());
 489
 490             // Set the internal coordinate system to draw the path
 491             node.style.left = scaledBox.left + "px";
 492             node.style.top = scaledBox.top + "px";
 493             node.style.width = scaledBox.getWidth() + "px";
 494             node.style.height = scaledBox.getHeight() + "px";
 495
 496             node.coordorigin = scaledBox.left + " " + scaledBox.top;
 497             node.coordsize = scaledBox.getWidth()+ " " + scaledBox.getHeight();
 498         }
 499     },
 500
 501     /**
 502      * Method: dashStyle
 503      *
 504      * Parameters:
 505      * style - {Object}
 506      *
 507      * Returns:
 508      * {String} A VML compliant 'stroke-dasharray' value
 509      */
 510     dashStyle: function(style) {
 511         var dash = style.strokeDashstyle;
 512         switch (dash) {
 513             case 'solid':
 514             case 'dot':
 515             case 'dash':
 516             case 'dashdot':
 517             case 'longdash':
 518             case 'longdashdot':
 519                 return dash;
 520             default:
 521                 // very basic guessing of dash style patterns
 522                 var parts = dash.split(/[ ,]/);
 523                 if (parts.length == 2) {
 524                     if (1*parts[0] >= 2*parts[1]) {
 525                         return "longdash";
 526                     }
 527                     return (parts[0] == 1 || parts[1] == 1) ? "dot" : "dash";
 528                 } else if (parts.length == 4) {
 529                     return (1*parts[0] >= 2*parts[1]) ? "longdashdot" :
 530                         "dashdot";
 531                 }
 532                 return "solid";
 533         }
 534     },
 535
 536     /**
 537      * Method: createNode
 538      * Create a new node
 539      *
 540      * Parameters:
 541      * type - {String} Kind of node to draw
 542      * id - {String} Id for node
 543      *
 544      * Returns:
 545      * {DOMElement} A new node of the given type and id
 546      */
 547     createNode: function(type, id) {
 548         var node = document.createElement(type);
 549         if (id) {
 550             node.id = id;
 551         }
 552
 553         // IE hack to make elements unselectable, to prevent 'blue flash'
 554         // while dragging vectors; #1410
 555         node.unselectable = 'on';
 556         node.onselectstart = function() { return(false); };
 557
 558         return node;
 559     },
 560
 561     /**
 562      * Method: nodeTypeCompare
 563      * Determine whether a node is of a given type
 564      *
 565      * Parameters:
 566      * node - {DOMElement} An VML element
 567      * type - {String} Kind of node
 568      *
 569      * Returns:
 570      * {Boolean} Whether or not the specified node is of the specified type
 571      */
 572     nodeTypeCompare: function(node, type) {
 573
 574         //split type
 575         var subType = type;
 576         var splitIndex = subType.indexOf(":");
 577         if (splitIndex != -1) {
 578             subType = subType.substr(splitIndex+1);
 579         }
 580
 581         //split nodeName
 582         var nodeName = node.nodeName;
 583         splitIndex = nodeName.indexOf(":");
 584         if (splitIndex != -1) {
 585             nodeName = nodeName.substr(splitIndex+1);
 586         }
 587
 588         return (subType == nodeName);
 589     },
 590
 591     /**
 592      * Method: createRenderRoot
 593      * Create the renderer root
 594      *
 595      * Returns:
 596      * {DOMElement} The specific render engine's root element
 597      */
 598     createRenderRoot: function() {
 599         return this.nodeFactory(this.container.id + "_vmlRoot", "div");
 600     },
 601
 602     /**
 603      * Method: createRoot
 604      * Create the main root element
 605      *
 606      * Parameters:
 607      * suffix - {String} suffix to append to the id
 608      *
 609      * Returns:
 610      * {DOMElement}
 611      */
 612     createRoot: function(suffix) {
 613         return this.nodeFactory(this.container.id + suffix, "olv:group");
 614     },
 615
 616     /**************************************
 617      *                                    *
 618      *     GEOMETRY DRAWING FUNCTIONS     *
 619      *                                    *
 620      **************************************/
 621
 622     /**
 623      * Method: drawPoint
 624      * Render a point
 625      *
 626      * Parameters:
 627      * node - {DOMElement}
 628      * geometry - {<OpenLayers.Geometry>}
 629      *
 630      * Returns:
 631      * {DOMElement} or false if the point could not be drawn
 632      */
 633     drawPoint: function(node, geometry) {
 634         return this.drawCircle(node, geometry, 1);
 635     },
 636
 637     /**
 638      * Method: drawCircle
 639      * Render a circle.
 640      * Size and Center a circle given geometry (x,y center) and radius
 641      *
 642      * Parameters:
 643      * node - {DOMElement}
 644      * geometry - {<OpenLayers.Geometry>}
 645      * radius - {float}
 646      *
 647      * Returns:
 648      * {DOMElement} or false if the circle could not ne drawn
 649      */
 650     drawCircle: function(node, geometry, radius) {
 651         if(!isNaN(geometry.x)&& !isNaN(geometry.y)) {
 652             var resolution = this.getResolution();
 653
 654             node.style.left = ((geometry.x /resolution - this.offset.x).toFixed() - radius) + "px";
 655             node.style.top = ((geometry.y /resolution - this.offset.y).toFixed() - radius) + "px";
 656
 657             var diameter = radius * 2;
 658
 659             node.style.width = diameter + "px";
 660             node.style.height = diameter + "px";
 661             return node;
 662         }
 663         return false;
 664     },
 665
 666
 667     /**
 668      * Method: drawLineString
 669      * Render a linestring.
 670      *
 671      * Parameters:
 672      * node - {DOMElement}
 673      * geometry - {<OpenLayers.Geometry>}
 674      *
 675      * Returns:
 676      * {DOMElement}
 677      */
 678     drawLineString: function(node, geometry) {
 679         return this.drawLine(node, geometry, false);
 680     },
 681
 682     /**
 683      * Method: drawLinearRing
 684      * Render a linearring
 685      *
 686      * Parameters:
 687      * node - {DOMElement}
 688      * geometry - {<OpenLayers.Geometry>}
 689      *
 690      * Returns:
 691      * {DOMElement}
 692      */
 693     drawLinearRing: function(node, geometry) {
 694         return this.drawLine(node, geometry, true);
 695     },
 696
 697     /**
 698      * Method: DrawLine
 699      * Render a line.
 700      *
 701      * Parameters:
 702      * node - {DOMElement}
 703      * geometry - {<OpenLayers.Geometry>}
 704      * closeLine - {Boolean} Close the line? (make it a ring?)
 705      *
 706      * Returns:
 707      * {DOMElement}
 708      */
 709     drawLine: function(node, geometry, closeLine) {
 710
 711         this.setNodeDimension(node, geometry);
 712
 713         var resolution = this.getResolution();
 714         var numComponents = geometry.components.length;
 715         var parts = new Array(numComponents);
 716
 717         var comp, x, y;
 718         for (var i = 0; i < numComponents; i++) {
 719             comp = geometry.components[i];
 720             x = (comp.x/resolution - this.offset.x);
 721             y = (comp.y/resolution - this.offset.y);
 722             parts[i] = " " + x.toFixed() + "," + y.toFixed() + " l ";
 723         }
 724         var end = (closeLine) ? " x e" : " e";
 725         node.path = "m" + parts.join("") + end;
 726         return node;
 727     },
 728
 729     /**
 730      * Method: drawPolygon
 731      * Render a polygon
 732      *
 733      * Parameters:
 734      * node - {DOMElement}
 735      * geometry - {<OpenLayers.Geometry>}
 736      *
 737      * Returns:
 738      * {DOMElement}
 739      */
 740     drawPolygon: function(node, geometry) {
 741         this.setNodeDimension(node, geometry);
 742
 743         var resolution = this.getResolution();
 744
 745         var path = [];
 746         var linearRing, i, j, len, ilen, comp, x, y;
 747         for (j = 0, len=geometry.components.length; j<len; j++) {
 748             linearRing = geometry.components[j];
 749
 750             path.push("m");
 751             for (i=0, ilen=linearRing.components.length; i<ilen; i++) {
 752                 comp = linearRing.components[i];
 753                 x = comp.x / resolution - this.offset.x;
 754                 y = comp.y / resolution - this.offset.y;
 755                 path.push(" " + x.toFixed() + "," + y.toFixed());
 756                 if (i==0) {
 757                     path.push(" l");
 758                 }
 759             }
 760             path.push(" x ");
 761         }
 762         path.push("e");
 763         node.path = path.join("");
 764         return node;
 765     },
 766
 767     /**
 768      * Method: drawRectangle
 769      * Render a rectangle
 770      *
 771      * Parameters:
 772      * node - {DOMElement}
 773      * geometry - {<OpenLayers.Geometry>}
 774      *
 775      * Returns:
 776      * {DOMElement}
 777      */
 778     drawRectangle: function(node, geometry) {
 779         var resolution = this.getResolution();
 780
 781         node.style.left = (geometry.x/resolution - this.offset.x) + "px";
 782         node.style.top = (geometry.y/resolution - this.offset.y) + "px";
 783         node.style.width = geometry.width/resolution + "px";
 784         node.style.height = geometry.height/resolution + "px";
 785
 786         return node;
 787     },
 788
 789     /**
 790      * Method: drawText
 791      * This method is only called by the renderer itself.
 792      *
 793      * Parameters:
 794      * featureId - {String}
 795      * style -
 796      * location - {<OpenLayers.Geometry.Point>}
 797      */
 798     drawText: function(featureId, style, location) {
 799         var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "olv:rect");
 800         var textbox = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_textbox", "olv:textbox");
 801
 802         var resolution = this.getResolution();
 803         label.style.left = (location.x/resolution - this.offset.x).toFixed() + "px";
 804         label.style.top = (location.y/resolution - this.offset.y).toFixed() + "px";
 805         label.style.flip = "y";
 806
 807         textbox.innerText = style.label;
 808
 809         if (style.fillColor) {
 810             textbox.style.color = style.fontColor;
 811         }
 812         if (style.fontFamily) {
 813             textbox.style.fontFamily = style.fontFamily;
 814         }
 815         if (style.fontSize) {
 816             textbox.style.fontSize = style.fontSize;
 817         }
 818         if (style.fontWeight) {
 819             textbox.style.fontWeight = style.fontWeight;
 820         }
 821         textbox.style.whiteSpace = "nowrap";
 822         // fun with IE: IE7 in standards compliant mode does not display any
 823         // text with a left inset of 0. So we set this to 1px and subtract one
 824         // pixel later when we set label.style.left
 825         textbox.inset = "1px,0px,0px,0px";
 826
 827         if(!label.parentNode) {
 828             label.appendChild(textbox);
 829             this.textRoot.appendChild(label);
 830         }
 831
 832         var align = style.labelAlign || "cm";
 833         var xshift = textbox.clientWidth *
 834             (OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(0,1)]);
 835         var yshift = textbox.clientHeight *
 836             (OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(1,1)]);
 837         label.style.left = parseInt(label.style.left)-xshift-1+"px";
 838         label.style.top = parseInt(label.style.top)+yshift+"px";
 839     },
 840
 841     /**
 842      * Method: drawSurface
 843      *
 844      * Parameters:
 845      * node - {DOMElement}
 846      * geometry - {<OpenLayers.Geometry>}
 847      *
 848      * Returns:
 849      * {DOMElement}
 850      */
 851     drawSurface: function(node, geometry) {
 852
 853         this.setNodeDimension(node, geometry);
 854
 855         var resolution = this.getResolution();
 856
 857         var path = [];
 858         var comp, x, y;
 859         for (var i=0, len=geometry.components.length; i<len; i++) {
 860             comp = geometry.components[i];
 861             x = comp.x / resolution - this.offset.x;
 862             y = comp.y / resolution - this.offset.y;
 863             if ((i%3)==0 && (i/3)==0) {
 864                 path.push("m");
 865             } else if ((i%3)==1) {
 866                 path.push(" c");
 867             }
 868             path.push(" " + x + "," + y);
 869         }
 870         path.push(" x e");
 871
 872         node.path = path.join("");
 873         return node;
 874     },
 875
 876     /**
 877      * Method: moveRoot
 878      * moves this renderer's root to a different renderer.
 879      *
 880      * Parameters:
 881      * renderer - {<OpenLayers.Renderer>} target renderer for the moved root
 882      * root - {DOMElement} optional root node. To be used when this renderer
 883      *     holds roots from multiple layers to tell this method which one to
 884      *     detach
 885      *
 886      * Returns:
 887      * {Boolean} true if successful, false otherwise
 888      */
 889     moveRoot: function(renderer) {
 890         var layer = this.map.getLayer(renderer.container.id);
 891         if(layer instanceof OpenLayers.Layer.Vector.RootContainer) {
 892             layer = this.map.getLayer(this.container.id);
 893         }
 894         layer && layer.renderer.clear();
 895         OpenLayers.Renderer.Elements.prototype.moveRoot.apply(this, arguments);
 896         layer && layer.redraw();
 897     },
 898
 899     /**
 900      * Method: importSymbol
 901      * add a new symbol definition from the rendererer's symbol hash
 902      *
 903      * Parameters:
 904      * graphicName - {String} name of the symbol to import
 905      *
 906      * Returns:
 907      * {Object} - hash of {DOMElement} "symbol" and {Number} "size"
 908      */
 909     importSymbol: function (graphicName)  {
 910         var id = this.container.id + "-" + graphicName;
 911
 912         // check if symbol already exists in the cache
 913         var cache = this.symbolCache[id];
 914         if (cache) {
 915             return cache;
 916         }
 917
 918         var symbol = OpenLayers.Renderer.symbol[graphicName];
 919         if (!symbol) {
 920             throw new Error(graphicName + ' is not a valid symbol name');
 921             return;
 922         }
 923
 924         var symbolExtent = new OpenLayers.Bounds(
 925                                     Number.MAX_VALUE, Number.MAX_VALUE, 0, 0);
 926
 927         var pathitems = ["m"];
 928         for (var i=0; i<symbol.length; i=i+2) {
 929             x = symbol[i];
 930             y = symbol[i+1];
 931             symbolExtent.left = Math.min(symbolExtent.left, x);
 932             symbolExtent.bottom = Math.min(symbolExtent.bottom, y);
 933             symbolExtent.right = Math.max(symbolExtent.right, x);
 934             symbolExtent.top = Math.max(symbolExtent.top, y);
 935
 936             pathitems.push(x);
 937             pathitems.push(y);
 938             if (i == 0) {
 939                 pathitems.push("l");
 940             }
 941         }
 942         pathitems.push("x e");
 943         var path = pathitems.join(" ");
 944
 945         var diff = (symbolExtent.getWidth() - symbolExtent.getHeight()) / 2;
 946         if(diff > 0) {
 947             symbolExtent.bottom = symbolExtent.bottom - diff;
 948             symbolExtent.top = symbolExtent.top + diff;
 949         } else {
 950             symbolExtent.left = symbolExtent.left - diff;
 951             symbolExtent.right = symbolExtent.right + diff;
 952         }
 953
 954         cache = {
 955             path: path,
 956             size: symbolExtent.getWidth(), // equals getHeight() now
 957             left: symbolExtent.left,
 958             bottom: symbolExtent.bottom
 959         };
 960         this.symbolCache[id] = cache;
 961
 962         return cache;
 963     },
 964
 965     CLASS_NAME: "OpenLayers.Renderer.VML"
 966 });
 967
 968 /**
 969  * Constant: OpenLayers.Renderer.VML.LABEL_SHIFT
 970  * {Object}
 971  */
 972 OpenLayers.Renderer.VML.LABEL_SHIFT = {
 973     "l": 0,
 974     "c": .5,
 975     "r": 1,
 976     "t": 0,
 977     "m": .5,
 978     "b": 1
 979 };