How to style virtual vertices when using the ModifyFeature control with OpenLayers?

Question

I am building an Android application that uses OpenLayers embedded in a WebView. Being mindful of the imprecision of touch interfaces I am trying to style all controls to be large and easy to operate.

I have followed the documentation on feature styling but have been unable to control the size of the virtual vertices when using the createVertices mode of the ModifyFeature control.

By way of example consider the following style with a pointRadius of 5:

var customStyle = new OpenLayers.Style({
                    fillColor: "black",
                    strokeColor: "red",
                    pointRadius: 5,
                    strokeWidth: 30
                });

var customStyles = new OpenLayers.StyleMap({
                    "default": customStyle,
                    "select": customStyle,
                    "temporary": customStyle
                });

var polyLayer = new OpenLayers.Layer.Vector("Polygon_Layer", {styleMap: customStyles });

Meanwhile the following has a pointRadius of 50:

var customStyle = new OpenLayers.Style({
                    fillColor: "black",
                    strokeColor: "red",
                    pointRadius: 50,
                    strokeWidth: 30
                });

As you can see this has no impact on the size of the virtual vertices midway along each edge.

Does anyone know a technique to control their size?

Answer 1

I suspect you have a bug in your application or you didn't provide the right part of your code. Here's an example that use OL2.13:

http://jsfiddle.net/Z22tE/

Simply draw a polygon and try to modify it. In my example, the style of the virtualVertex is the same as the layer's style.

Long story:

The style of the virtualVertex will always be the same as the layer's style at the moment of the control creation. The ModifyFeature control has a virtualStyle property where it stores the style of the virtual vertices. If you change the layer style after the ModifyFeature control creation, the virtual vertices won't get the new style.

Now if you want to style the virtual vertices separately, you can define the virtualStyle property after creating your ModifyFeature control. Example:

var myModify =  new OpenLayers.Control.ModifyFeature(vectors, 
    {
        virtualStyle: OpenLayers.Util.extend(
            {},
            vectors.style ||
            vectors.styleMap.createSymbolizer(null, null)
        )
    }
)

myModify.virtualStyle.fillColor = 'red';

Note that if you use this, you will have to manually set fillOpacity and strokeOpacity. Otherwise, you will ignore the default values (which is 0.3).