[OpenLayers-Users] ModifyFeatureControl - vertices styling

[soatley]

I just went through this myself.

In my case, I was already taking advantage of using vector styling context
(similar to this example: 
http://www.openlayers.org/dev/examples/styles-context.html
http://www.openlayers.org/dev/examples/styles-context.html )

I found that the points that are used for the vertices have a property
called _sketch.  This allowed me to pick out those particular points and
style them accordingly.  

This solution may be overkill for what you are looking for though....

 /* styling for the vector layers */

        /* different styles to apply depending on the type of vector */
        vectorTypeLookup["normal"] = { fillColor: '#ee9900', fillOpacity:
0.4, strokeWidth: 1.0, strokeColor: '#ee9900', pointRadius: 6 };
        vectorTypeLookup["polygon"] = { fillColor: '#ee9900', fillOpacity:
0.4, strokeWidth: 1.0, strokeColor: '#ee9900', pointRadius: 6 };
        vectorTypeLookup["point"] = { fillColor: '#ee9900', fillOpacity:
0.4, strokeWidth: 2.0, strokeColor: '#ee9900', pointRadius: 8 };
        vectorTypeLookup["line"] = { fillColor: '#ee9900', fillOpacity: 0.4,
strokeWidth: 3.0, strokeColor: '#ee9900', pointRadius: 6 };
        vectorTypeLookup["label"] = { fillColor: '#ee9900', fillOpacity:
0.4, strokeWidth: 1.0, strokeColor: '#ee9900', pointRadius: 3,
            labelAlign: "tr", fontSize: "12px", fontColor: "#005596",
fontWeight: "bold", labelSelect: true
        };
        vectorTypeLookup["sketch"] = { fillColor: '#005596', fillOpacity:
0.4, strokeWidth: 3.0, strokeColor: '#005596', pointRadius: 6 };

        /* create a template that will use the functions to get the
appropriate colour */
        var vectorTemplate = { fillColor: "${getFillColour}", fillOpacity:
"${getFillOpacity}", strokeWidth: "${getStrokeWidth}", strokeColor:
"${getStrokeColour}", pointRadius: "${getPointRadius}",
            labelAlign: "${getLabelAlign}", fontSize: "${getFontSize}",
fontColor: "${getFontColour}", fontWeight: "${getFontWeight}", labelSelect:
"${getLabelSelect}", label: "${getLabel}"
        };

        /* 
        the style will use the context when determining the appropriate
style - see the vectorStyle declaration
        - ex.  drawing a polygon on the drawLayer.
        1) drawLayer is assigned the vectorStyleMap to detrmine the style
        2) The vectorStyleMap uses the vectorStyle rule to know what style
properties are available
        3) The vectorStyle refers to vectorTemplate to configure the
different properties (fillColor, strokeWidth).  The vectorContext is used to
evaluate the ${...} items
        4) Each function in vectorContext returns the appropriate property
value
            
        */
        var vectorContext = {
            getVectorType: function(feature) {
                try {
                    if (typeof (feature._sketch) !== "undefined") {
                        return vectorTypeLookup["sketch"]; /* used when
modifying items */
                    } else if
(feature.geometry.CLASS_NAME.search(/polygon$/i) >= 0) {
                        return vectorTypeLookup["polygon"];
                    } else if (feature.geometry.CLASS_NAME.search(/point$/i)
>= 0 && typeof (feature.attributes.label) !== "undefined") { /* labels are
point vectors */
                        return vectorTypeLookup["label"];
                    } else if (feature.geometry.CLASS_NAME.search(/point$/i)
>= 0) {
                        return vectorTypeLookup["point"];
                    } else if
(feature.geometry.CLASS_NAME.search(/linestring$/i) >= 0) {
                        return vectorTypeLookup["line"];
                    } else {
                        /*who knows.... */
                        return vectorTypeLookup["normal"];
                    }
                } catch (e) { return vectorTypeLookup["normal"]; }
            },
            getFillColour: function(feature) { return
vectorContext.getVectorType(feature).fillColor; },
            getFillOpacity: function(feature) { return
vectorContext.getVectorType(feature).fillOpacity; },
            getStrokeWidth: function(feature) { return
vectorContext.getVectorType(feature).strokeWidth; },
            getStrokeColour: function(feature) { return
vectorContext.getVectorType(feature).strokeColor; },
            getPointRadius: function(feature) { return
vectorContext.getVectorType(feature).pointRadius; },
            getLabel: function(feature) {
                if (typeof (feature.attributes.label) != "undefined") {
                    /* return the label */
                    return feature.attributes.label;
                } else {
                    return ""; /* nothing */
                }
            },
            getLabelAlign: function(feature) {
                try {
                    return vectorContext.getVectorType(feature).labelAlign;
                } catch (e) { return ""; }
            },
            getFontSize: function(feature) {
                try {
                    return vectorContext.getVectorType(feature).fontSize;
                } catch (e) { return ""; }
            },
            getFontColour: function(feature) {
                try {
                    return vectorContext.getVectorType(feature).fontColor;
                } catch (e) { return ""; }
            },
            getFontWeight: function(feature) {
                try {
                    return vectorContext.getVectorType(feature).fontWeight;
                } catch (e) { return ""; }
            },
            getLabelSelect: function(feature) {
                try {
                    return vectorContext.getVectorType(feature).labelSelect;
                } catch (e) { return false; }
            }
        };

        var vectorStyle = new OpenLayers.Style(vectorTemplate, { context:
vectorContext });
        var vectorSelected = new OpenLayers.Style({ fillColor: "#ff0000",
fillOpacity: "0.4", strokeWidth: "2.0", strokeColor: "#ff0000", pointRadius:
"8" });

        vectorStyleMap = new OpenLayers.StyleMap({ "default": vectorStyle,
"select": vectorSelected });

 drawLayer = new OpenLayers.Layer.Vector("Drawing", { protocol:
gearsProtocol, visibility: false, styleMap: vectorStyleMap });




That is the code that styles all my vectors.  Depending on the vector type,
I style it differently.  You can see how in the getVectorType it checks to
see if _sketch is not undefined (meaning it is assigned) and if so, it must
be a modify vertex.

Hope that helps!

Shawn


Alexandre Dube wrote:
> 
> Hi,
> 
>   Is there a simple way (without changing the code) to have a specific 
> style for the vertices when modifying a feature with the 
> ModifyFeatureControl ?  There's such a possibility for the 
> virtualVertices already, but doesn't seem to have any for the normal 
> ones : they always have the 'default' style applied.
> 
>   Is there a recipe for this ?
> 
> Many thanks,
> 
> -- 
> Alexandre Dubé
> Mapgears
> www.mapgears.com
> 
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
> 
> 

-- 
View this message in context: http://n2.nabble.com/ModifyFeatureControl-vertices-styling-tp4175625p4175770.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.