Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I've been following this tutorial: http://workshop.pgrouting.org/chapters/geoext_client.html#select-the-start-and-final-destination

It contains an Openlayers.Control.DrawFeatures control defined in the following code sample. You can also see the lines where the author comments "if we want to apply a special style to the start point we should do this here". Problem is: I don't know how to apply a style in this setting and cannot find any examples using DrawFeatures control in this way.

How can I have the start point use a different style than the end point using this DrawFeatures control?

DrawPoints = OpenLayers.Class(OpenLayers.Control.DrawFeature, {

// this control is active by default
autoActivate: true,

initialize: function(layer, options) {
    // only points can be drawn
    var handler = OpenLayers.Handler.Point;
    OpenLayers.Control.DrawFeature.prototype.initialize.apply(
            this, [layer, handler, options]
        );
},

drawFeature: function(geometry) {
    OpenLayers.Control.DrawFeature.prototype.drawFeature.apply(
            this, arguments 
        );
    if (this.layer.features.length == 1) {
        // we just draw the startpoint
        // note: if we want to apply a special style to the 
        //       start point we should do this here
    } else if (this.layer.features.length == 2) {
        // we just draw the finalpoint
        // note: if we want to apply a special style to the 
        //       final point we should do this here

        // we have all what we need; we can deactivate ourself.
        this.deactivate();            
    }
}
});
share|improve this question
add comment

1 Answer 1

up vote 6 down vote accepted

add these lines and modify them to suit your style:

...
    if (this.layer.features.length == 1) {
        // we just draw the startpoint
        // note: if we want to apply a special style to the 
        //       start point we should do this here

        var myFirstPointStyle = OpenLayers.Util.applyDefaults(myFirstPointStyle, OpenLayers.Feature.Vector.style['default']);
        myFirstPointStyle.fillOpacity = 0.8;
        myFirstPointStyle.strokeWidth = 2;
        myFirstPointStyle.fillColor = "#ffffff";
        this.layer.features[this.layer.features.length - 1].style = myFirstPointStyle;

        this.layer.redraw();

    } else if (this.layer.features.length == 2) {
        // we just draw the finalpoint
        // note: if we want to apply a special style to the 
        //       final point we should do this here
        var mySecondPointStyle = OpenLayers.Util.applyDefaults(mySecondPointStyle, OpenLayers.Feature.Vector.style['default']);
        mySecondPointStyle.fillOpacity = 0.8;
        mySecondPointStyle.strokeWidth = 7;
        mySecondPointStyle.pointRadius = 12;
        mySecondPointStyle.fillColor = "#000000";
        this.layer.features[this.layer.features.length - 1].style = mySecondPointStyle;

        this.layer.redraw();


        // we have all what we need; we can deactivate ourself.
        this.deactivate();
    }
...

This will copy the default style and you can modify it from there. You should get something like this:

enter image description here

share|improve this answer
    
Great, thanks! Seems like calling redraw() is the key here. I never tried that :) –  underdark Feb 29 '12 at 16:28
    
You're welcome, it's always rewarding to help out a master :) –  CaptDragon Feb 29 '12 at 16:51
    
Thanks a lot as it solved my problem too which was related to the application of styles –  G.S.Tomar Apr 24 '12 at 8:38
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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