Index: tests/Layer/test_Vector.html
===================================================================
--- tests/Layer/test_Vector.html (revision 4219)
+++ tests/Layer/test_Vector.html (working copy)
@@ -157,7 +157,7 @@
}
function test_Layer_Vector_externalGraphic(t) {
- t.plan(9);
+ t.plan(11);
// base layer is needed for getResolution() to return a value,
// otherwise VML test will fail because style.left and style.top
// cannot be set
@@ -168,12 +168,17 @@
format: 'image/png'});
var layer = new OpenLayers.Layer.Vector("Test Layer");
+ var renderer = layer.renderer;
var map = new OpenLayers.Map('map');
map.addLayers([baseLayer, layer]);
- var geometry = new OpenLayers.Geometry.Point(10, 10);
+ var geometryX = 10;
+ var geometryY = 10;
+ var geometry = new OpenLayers.Geometry.Point(geometryX, geometryY);
var feature = new OpenLayers.Feature.Vector(geometry);
+ map.zoomToMaxExtent();
+
var customStyle1 = new Object({
externalGraphic: 'test.png',
pointRadius: 10
@@ -196,8 +201,15 @@
graphicWidth: 24,
graphicOpacity: 1
});
+ var customStyle6 = new Object({
+ externalGraphic: 'test.png',
+ graphicWidth: 24,
+ graphicHeight: 16,
+ graphicXOffset: -24,
+ graphicYOffset: -16
+ });
- var root = layer.renderer.root;
+ var root = renderer.root;
if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.SVG') {
feature.style = customStyle1;
layer.drawFeature(feature);
@@ -236,6 +248,23 @@
t.eq(root.firstChild.getAttributeNS(null, 'style'),
'opacity: '+customStyle5.graphicOpacity.toString()+';',
"graphicOpacity correctly set");
+ feature.style = customStyle6;
+ layer.drawFeature(feature);
+ var x = geometryX / renderer.getResolution() + renderer.left;
+ var y = geometryY / renderer.getResolution() - renderer.top;
+ // SVG setStyle() gets x and y using getAttributeNS(), which returns
+ // a value with only 3 decimal digits. To mimic this we use toFixed(3) here
+ x = x.toFixed(3);
+ y = y.toFixed(3);
+ // toFixed() returns a string
+ x = parseFloat(x);
+ y = parseFloat(y);
+ t.eq(root.firstChild.getAttributeNS(null, 'x'),
+ (x + customStyle6.graphicXOffset).toFixed().toString(),
+ "graphicXOffset correctly set");
+ t.eq(root.firstChild.getAttributeNS(null, 'y'),
+ (-y + customStyle6.graphicYOffset).toFixed().toString(),
+ "graphicYOffset correctly set");
}
if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.VML') {
feature.style = customStyle1;
@@ -278,6 +307,16 @@
t.eq(opacity,
customStyle5.graphicOpacity,
"graphicOpacity correctly set");
+ feature.style = customStyle6;
+ layer.drawFeature(feature);
+ var x = geometryX / renderer.getResolution();
+ var y = geometryY / renderer.getResolution();
+ t.eq(root.firstChild.style.left,
+ (x + customStyle6.graphicXOffset).toFixed().toString()+'px',
+ "graphicXOffset correctly set");
+ t.eq(root.firstChild.style.top,
+ (y + customStyle6.graphicYOffset).toFixed().toString()+'px',
+ "graphicYOffset correctly set");
}
}
Index: lib/OpenLayers/Feature/Vector.js
===================================================================
--- lib/OpenLayers/Feature/Vector.js (revision 4219)
+++ lib/OpenLayers/Feature/Vector.js (working copy)
@@ -263,6 +263,8 @@
* - graphicWidth,
* - graphicHeight,
* - graphicOpacity
+ * - graphicXOffset
+ * - graphicYOffset
*/
OpenLayers.Feature.Vector.style = {
'default': {
Index: lib/OpenLayers/Renderer/VML.js
===================================================================
--- lib/OpenLayers/Renderer/VML.js (revision 4219)
+++ lib/OpenLayers/Renderer/VML.js (working copy)
@@ -182,8 +182,12 @@
width = width ? width : style.pointRadius*2;
height = height ? height : style.pointRadius*2;
var resolution = this.getResolution();
- node.style.left = (geometry.x/resolution-.5*width).toFixed();
- node.style.top = (geometry.y/resolution-.5*height).toFixed();
+ 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+xOffset).toFixed();
+ node.style.top = (geometry.y/resolution+yOffset).toFixed();
node.style.width = width;
node.style.height = height;
Index: lib/OpenLayers/Renderer/SVG.js
===================================================================
--- lib/OpenLayers/Renderer/SVG.js (revision 4219)
+++ lib/OpenLayers/Renderer/SVG.js (working copy)
@@ -184,8 +184,8 @@
if (style.externalGraphic) {
// remove old node
var id = node.getAttributeNS(null, "id");
- var x = node.getAttributeNS(null, "cx");
- var y = node.getAttributeNS(null, "cy");
+ var x = parseFloat(node.getAttributeNS(null, "cx"));
+ var y = parseFloat(node.getAttributeNS(null, "cy"));
var _featureId = node._featureId;
var _geometryClass = node._geometryClass;
var _style = node._style;
@@ -206,10 +206,14 @@
var height = style.graphicHeight || style.graphicWidth;
width = width ? width : style.pointRadius*2;
height = height ? height : style.pointRadius*2;
+ var xOffset = (style.graphicXOffset != undefined) ?
+ style.graphicXOffset : -(0.5 * width);
+ var yOffset = (style.graphicYOffset != undefined) ?
+ style.graphicYOffset : -(0.5 * height);
var opacity = style.graphicOpacity || style.fillOpacity;
- node.setAttributeNS(null, "x", x-(.5*width).toFixed());
- node.setAttributeNS(null, "y", -y-(.5*height).toFixed());
+ node.setAttributeNS(null, "x", (x + xOffset).toFixed());
+ node.setAttributeNS(null, "y", (-y + yOffset).toFixed());
node.setAttributeNS(null, "width", width);
node.setAttributeNS(null, "height", height);
node.setAttributeNS("http://www.w3.org/1999/xlink", "href", style.externalGraphic);
Index: examples/vector-features.html
===================================================================
--- examples/vector-features.html (revision 4219)
+++ examples/vector-features.html (working copy)
@@ -59,6 +59,8 @@
// of the image will be ignored
style_mark.graphicWidth = 24;
style_mark.graphicHeight = 20;
+ style_mark.graphicXOffset = -(style_mark.graphicWidth/2);
+ style_mark.graphicYOffset = -style_mark.graphicHeight;
style_mark.externalGraphic = "../img/marker.png";
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style});