From d2c0182fd9ae46c923ee8d95aef714d787f01825 Mon Sep 17 00:00:00 2001
From: ahocevar <andreas.hocevar@gmail.com>
Date: Thu, 12 Mar 2009 13:19:06 +0000
Subject: [PATCH] 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     |  7 ++++-
 lib/OpenLayers/Renderer/VML.js | 53 +++++++++++++++++++---------------
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/examples/graphic-name.html b/examples/graphic-name.html
index 54649fc257..d45a0b11cc 100644
--- a/examples/graphic-name.html
+++ b/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.
diff --git a/lib/OpenLayers/Renderer/VML.js b/lib/OpenLayers/Renderer/VML.js
index 33d773322c..5cce601a48 100644
--- a/lib/OpenLayers/Renderer/VML.js
+++ b/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;
-                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";
-                
+                this.drawGraphic(node, geometry, style);
                 // 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";
-                node.style.top = symbolExtent.bottom + "px";
-                node.style.width = width + "px";
-                node.style.height = height + "px";
-        
-                this.drawCircle(node, geometry, style.pointRadius);
-                node.style.flip = "y";
+                var ratio = width / height;
+                this.drawGraphic(node, geometry, style, ratio);
             } else {
                 this.drawCircle(node, geometry, style.pointRadius);
             }
@@ -644,7 +623,33 @@ 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
      * Render a linestring.