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 });

small grips

Meanwhile the following has a pointRadius of 50:

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

large grips

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?


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:


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).

| improve this answer | |
  • Very helpful advice, thank you for a detailed explanation. My ModifyFeature constructor was not exhibiting this behaviour, then after looking closer I found my OpenLayers.js was version Release 2.14 dev. After rolling back to 2.13.1 I am receiving the expected behaviour. Odd that I was running a dev version without realising it but I'm happy to have learnt about the virtualStyle property. Most of the style functionality seems to be attached to the layers; It is good to know that checking the controls may offer more further customisation. – Kelly Thomas Dec 3 '13 at 5:22
  • Thanks. Critical for me was that I was adding the style map after creation of the modify control. – andyb Sep 16 '15 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.