Ticket #736: externalGraphic.3.diff

/mnt/d/eclipse/workspace/openlayers/examples/vector-features.html

@@ -7 +7 @@
-            border: 1px solid black;
-        }
-    </style>
-
+ type="text/javascript"
-    <script type="text/javascript">
-        <!--
-        var map;
@@ -21 +21 @@
-            var style_blue = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
-            style_blue.strokeColor = "blue"; 
-            style_blue.fillColor = "blue"; 
+            style_blue.externalGraphic = "../img/marker.png";
+            
+            // each of the three lines below means the same, if only one of
+            // them is active: the image will have a size of 24px, and the
+            // aspect ratio will be kept
+            style_blue.pointRadius = 12;
+            //style_blue.graphicWidth = 24;
+            //style_blue.graphicHeight = 24;
+            
+            style_blue.fillOpacity = 1;
-            var style_green = {
-                strokeColor: "#00FF00",
-                strokeOpacity: 1,
@@ -28 +38 @@
-                pointRadius: 6,
-                pointerEvents: "visiblePainted"
-            };
+            var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
+            
+            // if graphicWidth and graphicHeight are both set, the aspect ratio
+            // of the image will be ignored
+            style_mark.graphicWidth = 24;
+            style_mark.graphicHeight = 20;
+            
+            style_mark.externalGraphic = "../img/marker.png";
-            
-            var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry");
-            
@@ -34 +52 @@
-            // create a point feature
-            var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
-            var pointFeature = new OpenLayers.Feature.Vector(point,null,style_blue);
+            var point2 = new OpenLayers.Geometry.Point(-105.04, 49.68);
+            var pointFeature2 = new OpenLayers.Feature.Vector(point2,null,style_green);
+            var point3 = new OpenLayers.Geometry.Point(-105.04, 49.68);
+            var pointFeature3 = new OpenLayers.Feature.Vector(point3,null,style_mark);
-            
-            // create a line feature from a list of points
-            var pointList = [];
@@ -64 +86 @@
-            
-            map.addLayer(vectorLayer);
-            map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
-
+pointFeature3, pointFeature2, 
-        }
-        // -->
-    </script>
@@ -75 +97 @@
-       in different styles, created 'manually', by constructing the entire style
-       object, via 'copy', extending the default style object, and by 
-       inheriting the default style from the layer.</p>
+    <p>It also shows how to use external graphic files for point features
+       and how to set their size: If either graphicWidth or graphicHeight is set,
+       the aspect ratio of the image will be respected. If both graphicWidth and
+       graphicHeight are set, it will be ignored. Alternatively, if graphicWidth
+       and graphicHeight are omitted, pointRadius will be used to set the size
+       of the image, which will then be twice the value of pointRadius with the
+       original aspect ratio.</p>
-  </body>
-</html>

/mnt/d/eclipse/workspace/openlayers/lib/OpenLayers/Renderer/SVG.js

@@ -165 +165 @@
-        options = options || node._options;
-
-        if (node._geometryClass == "OpenLayers.Geometry.Point") {
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        }
-        
-        if (options.isFilled) {

/mnt/d/eclipse/workspace/openlayers/lib/OpenLayers/Renderer/VML.js

@@ -129 +129 @@
-        options = options || node._options;
-        
-        if (node._geometryClass == "OpenLayers.Geometry.Point") {
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        }
-
-      //fill
@@ -146 +188 @@
-                fill = this.createNode('v:fill', node.id + "_fill");
-                node.appendChild(fill);
-            }
-
+
+
+
-        }
-
-

/mnt/d/eclipse/workspace/openlayers/tests/Layer/test_Vector.html

@@ -106 +106 @@
-             "given a custom style, renders with that");
-        
-    }
-
+
-    function test_Layer_Vector_eraseFeatures(t) {
-        t.plan(2);
-        var layer = new OpenLayers.Layer.Vector("Test Layer");
@@ -156 +156 @@
-        t.eq(layer.map, null, "layer.map is null after destroy");
-    }
-
+    function test_Layer_Vector_externalGraphic(t) {
+            t.plan(8);
+            // base layer is needed for getResolution() to return a value,
+            // otherwise VML test will fail because style.left and style.top
+            // cannot be set
+            var baseLayer = new OpenLayers.Layer.WMS("Base Layer",
+                    "http://octo.metacarta.com/cgi-bin/mapserv",
+                    { map: '/mapdata/vmap_wms.map', 
+                   layers: 'basic', 
+                   format: 'image/png'});
+            
+        var layer = new OpenLayers.Layer.Vector("Test Layer");
+        var map = new OpenLayers.Map('map');
+        map.addLayers([baseLayer, layer]);
+
+        var geometry = new OpenLayers.Geometry.Point(10, 10);
+        var feature = new OpenLayers.Feature.Vector(geometry);
+
+        var customStyle1 = new Object({
+                externalGraphic: 'test.png',
+                pointRadius: 10
+        });
+        var customStyle2 = new Object({
+                externalGraphic: 'test.png',
+                graphicWidth: 12
+        });
+        var customStyle3 = new Object({
+                externalGraphic: 'test.png',
+                graphicHeight: 14
+        });
+        var customStyle4 = new Object({
+                externalGraphic: 'test.png',
+                graphicWidth: 24,
+                graphicHeight: 16
+        });
+               
+        var root = layer.renderer.root;
+        if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.SVG') {
+                feature.style = customStyle1;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                            (2*customStyle1.pointRadius).toString(),
+                            "given a pointRadius, width equals 2*pointRadius");
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                            (2*customStyle1.pointRadius).toString(),
+                            "given a pointRadius, height equals 2*pointRadius");
+                feature.style = customStyle2;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                            root.firstChild.getAttributeNS(null, 'height'),
+                            "given a graphicWidth, width equals height");
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                            customStyle2.graphicWidth.toString(),
+                            "width is set correctly");
+                feature.style = customStyle3;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                            root.firstChild.getAttributeNS(null, 'width'),
+                            "given a graphicHeight, height equals width");
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                            customStyle3.graphicHeight.toString(),
+                            "height is set correctly");
+                feature.style = customStyle4;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                            customStyle4.graphicHeight.toString(),
+                            "given graphicHeight and graphicWidth, both are set: height")
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                            customStyle4.graphicWidth.toString(),
+                            "given graphicHeight and graphicWidth, both are set: width")
+        }
+        if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.VML') {
+                feature.style = customStyle1;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.style.width,
+                            (2*customStyle1.pointRadius).toString()+'px',
+                            "given a pointRadius, width equals 2*pointRadius");
+                t.eq(root.firstChild.style.height,
+                            (2*customStyle1.pointRadius).toString()+'px',
+                            "given a pointRadius, height equals 2*pointRadius");
+                feature.style = customStyle2;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.style.width,
+                            root.firstChild.style.height,
+                            "given a graphicWidth, width equals height");
+                t.eq(root.firstChild.style.width,
+                            customStyle2.graphicWidth.toString()+'px',
+                            "width is set correctly");
+                feature.style = customStyle3;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.style.height,
+                            root.firstChild.style.width,
+                            "given a graphicHeight, height equals width");
+                t.eq(root.firstChild.style.height,
+                            customStyle3.graphicHeight.toString()+'px',
+                            "height is set correctly");
+                feature.style = customStyle4;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.style.height,
+                            customStyle4.graphicHeight.toString()+'px',
+                            "given graphicHeight and graphicWidth, both are set: height")
+                t.eq(root.firstChild.style.width,
+                            customStyle4.graphicWidth.toString()+'px',
+                            "given graphicHeight and graphicWidth, both are set: width")
+        }
+    }
+
-  // -->
-  </script>
-</head>