Preserve aspect ratio for custom symbols in the vml renderer. Original

patch by fredj, refactored by me, r=pgiraud. (closes #1836)


git-svn-id: http://svn.openlayers.org/trunk/openlayers@9026 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/graphic-name.html

@@ -5,13 +5,18 @@
     <link rel="stylesheet" href="style.css" type="text/css" />
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
+        // user custom graphicname
+        
+        OpenLayers.Renderer.symbol.lightning = [0,0, 4,2, 6,0, 10,5, 6,3, 4,5, 0,0];
+        OpenLayers.Renderer.symbol.rectangle = [0,0, 10,0, 10,4, 0,4, 0,0];
+            
         var map;
 
         function init() {
             map = new OpenLayers.Map('map');
 
             // list of well-known graphic names
-            var graphics = ["star", "cross", "x", "square", "triangle", "circle"];
+            var graphics = ["star", "cross", "x", "square", "triangle", "circle", "lightning", "rectangle"];
             
             // Create one feature for each well known graphic.
             // Give features a type attribute with the graphic name.

lib/OpenLayers/Renderer/VML.js

@@ -198,23 +198,7 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         
         if (node._geometryClass == "OpenLayers.Geometry.Point") {
             if (style.externalGraphic) {
-                var width = style.graphicWidth || style.graphicHeight;
+                this.drawGraphic(node, geometry, style);
-                var height = style.graphicHeight || style.graphicWidth;
-                width = width ? width : style.pointRadius*2;
-                height = height ? height : style.pointRadius*2;
-
-                var resolution = this.getResolution();
-                var xOffset = (style.graphicXOffset != undefined) ?
-                    style.graphicXOffset : -(0.5 * width);
-                var yOffset = (style.graphicYOffset != undefined) ?
-                    style.graphicYOffset : -(0.5 * height);
-                
-                node.style.left = ((geometry.x/resolution - this.offset.x)+xOffset).toFixed();
-                node.style.top = ((geometry.y/resolution - this.offset.y)-(yOffset+height)).toFixed();
-                node.style.width = width + "px";
-                node.style.height = height + "px";
-                node.style.flip = "y";
-                
                 // modify style/options for fill and stroke styling below
                 style.fillColor = "none";
                 options.isStroked = false;
@@ -227,13 +211,8 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
                 node.setAttribute("coordorigin", symbolExtent.left + "," +
                                                                 symbolExtent.bottom);
                 node.setAttribute("coordsize", width + "," + height);
-                node.style.left = symbolExtent.left + "px";
+                var ratio = width / height;
-                node.style.top = symbolExtent.bottom + "px";
+                this.drawGraphic(node, geometry, style, ratio);
-                node.style.width = width + "px";
-                node.style.height = height + "px";
-        
-                this.drawCircle(node, geometry, style.pointRadius);
-                node.style.flip = "y";
             } else {
                 this.drawCircle(node, geometry, style.pointRadius);
             }
@@ -644,6 +623,32 @@ OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, {
         return false;
     },
 
+    /**
+     * Method: drawGraphic
+     * 
+     * Parameters:
+     * node - {DOMElement}
+     * geometry - {<OpenLayers.Geometry>}
+     * style - {Object}
+     * ratio - {Number}
+     */
+    drawGraphic: function(node, geometry, style, ratio) {
+        var diameter = style.pointRadius * 2;
+        var width = style.graphicWidth || diameter;
+        var height = style.graphicHeight || (ratio ? diameter / ratio : diameter);
+
+        var resolution = this.getResolution();
+        var xOffset = (style.graphicXOffset != undefined) ?
+            style.graphicXOffset : -(0.5 * width);
+        var yOffset = (style.graphicYOffset != undefined) ?
+            style.graphicYOffset : -(0.5 * height);
+        
+        node.style.left = ((geometry.x/resolution - this.offset.x)+xOffset).toFixed();
+        node.style.top = ((geometry.y/resolution - this.offset.y)-(yOffset+height)).toFixed();
+        node.style.width = width + "px";
+        node.style.height = height + "px";
+        node.style.flip = "y";
+    },
     
     /**
      * Method: drawLineString