[OpenLayers-Users] How does a renderer draw features ?

[Alexandre Dube]

Hi Yvan,

Well, I actually copied/pasted it from an OL example and modified a few 
things.  If anyone has a better idea or find something bad in my code, 
feel free to let me know.  It has been a long time since I last 
programmed.  I just restarted two months ago and still re-learning.

Here's a few explanations first :

I create a costumed control which is activated only when my 
modifyFeature and selectFeature controls are active.  But, as soon as a 
feature is selected, it is deactivated ( because we'll be working on the 
selected feature, we don't need to highlight it and anyway, it was 
changing the style of the vertices also, which was bad. )

The wfs layer is named olWFSRoads.  It contains lines features ( roads 
).  Their color comes from an array and depending on one attribute 
value, each has a specific color ( among 10, I think ).  Like : highways 
are red, regional roads oranges, etc...

"Parse current road attributes" : at the same time we move the mouse 
over a feature, some of its attributes are displayed inside html 
elements ( roadForm ).

Well, that's it.  Here's some snippet :

OpenLayers.Control.Hover = OpenLayers.Class(OpenLayers.Control, {
    defaultHandlerOptions: {
          'delay': 0,
          'pixelTolerance': null,
          'stopMove': false
    },

    initialize: function(options) {
        this.handlerOptions = OpenLayers.Util.extend(
            {}, this.defaultHandlerOptions
        );
        OpenLayers.Control.prototype.initialize.apply( this, arguments );
        this.handler = new OpenLayers.Handler.Hover(
            this, {
                //'pause': this.onPause,
                'move': this.onMove
            },
            this.handlerOptions
        );
    },

    //onPause: function(evt) {},

    onMove: function(evt) {
        oFeature = olWFSRoads.getFeatureFromEvent(evt);
        oStyle = { strokeColor : "blue", strokeWidth : 5 };

        // if a road was previously over the mouse, reset its
        // style to its original value
        if (oLastHoverFeature)
        {
            if (oFeature)
            {
                if (oLastHoverFeature.fid != oFeature.fid)
                {
                    // reset last hover feature
                    szRoadCla = oLastHoverFeature.attributes['ROL_CO_CLA'];
                    olWFSRoads.drawFeature(
                        oLastHoverFeature, aRoadType[szRoadCla]);

                    // change color of current feature, it becomes "last"
                    olWFSRoads.drawFeature( oFeature, oStyle );
                                        oLastHoverFeature = oFeature;

                    // parse current road attributes
                    parseRoadAttributes(oFeature);
                }
            }
            else // no current feature, but last hover feature exist
            {
                // reset last hover feature
                szRoadCla = oLastHoverFeature.attributes['ROL_CO_CLA'];
                olWFSRoads.drawFeature(
                    oLastHoverFeature, aRoadType[szRoadCla]);
                document.getElementById('roadForm').reset();
                                    // no current feature, next time 
last will be null
                oLastHoverFeature = null;
            }
        }
        else // no last feature
        {
            if (oFeature)
            {
                // change color of current feature, it becomes "last"
                olWFSRoads.drawFeature( oFeature, oStyle );
                oLastHoverFeature = oFeature;
                                // parse current road attributes
                parseRoadAttributes(oFeature);
            }
            else // no current feature
            {
                oLastHoverFeature = null;
                document.getElementById('roadForm').reset();
            }
        }
    }
});

var oLastHoverFeature = null;

// inside init() function :

oHoverRoadControl = new OpenLayers.Control.Hover();

Cheers,

Alexandre

Ivan Grcic wrote:
> Hi Alex, can you please show me ur code for this, i also want to do
> that but didnt have time these days..maybe ur way will give me some
> ideas in the future!
> Tnx
>
> Ivan
> On Mon, Aug 25, 2008 at 10:48 PM, Alexandre Dube <adube at mapgears.com> wrote:
>   
>> Hi Eric,
>>
>>  I've not been able to work on my little project until recently.  I
>> tried what you suggested and and worked fine.  When the mouse is over a
>> feature, its color changes without selecting it.  And when the mouse is
>> out, it regain its original color.
>>
>>  Thank you very much for your hint, it helped me a lot.
>>
>>  If anybody wants to see how I made it, you're welcomed to ask.
>>
>> Alexandre
>>
>> Eric Lemoine wrote:
>>     
>>> On Fri, Aug 1, 2008 at 3:48 PM, Alexandre Dube <adube at mapgears.com> wrote:
>>>
>>>       
>>>> Hi list,
>>>>
>>>>    I was wondering something : when we select a feature using a select
>>>> or modify control, the feature changes its color...  In fact, I saw that
>>>> it the renderer that draws a feature ( which draw geometry ) using a
>>>> given style.
>>>>
>>>>    My question is : does the renderer actually draw a new feature over
>>>> the original one or it really changes the color ?
>>>>
>>>>         
>>> It changes its color.
>>>
>>>
>>>       
>>>> The renderer does not
>>>> contain any feature, but it can draw features ?
>>>>
>>>>         
>>> Yes.
>>>
>>>
>>>
>>>       
>>>>    I'm trying to figure out how it works because I am able to "change"
>>>> color when my mouse is over a feature without selecting it, but I'm
>>>> trying to undo the changes as soon as the mouse isn't over anymore and
>>>> it's not working.
>>>>
>>>>    Here's a code snippet :
>>>>
>>>>    var drawnGeometry = null;
>>>>
>>>>    var styleBlue = OpenLayers.Util.extend(
>>>>        {},
>>>>        OpenLayers.Feature.Vector.style['default']);
>>>>    styleBlue.strokeColor = "blue";
>>>>    styleBlue.strokeWidth = 4;
>>>>
>>>> function changeColorOnOverFeature(e){
>>>>    // if no feature is selected, then we want to change the color of a
>>>>    // feature when over it
>>>>    if (!getSelectedFeature(this)){
>>>>        if (drawnGeometry != null){
>>>>            this.renderer.eraseGeometry(drawnGeometry);  // I'm pretty
>>>> sure this is wrong
>>>>            drawnGeometry = null;
>>>>        }
>>>>        else {
>>>>            oFeature = this.getFeatureFromEvent(e);
>>>>            if(oFeature){
>>>>                this.renderer.drawFeature(oFeature, styleBlue);
>>>>                drawnGeometry = oFeature.geometry;
>>>>            }
>>>>        }
>>>>    }
>>>> }
>>>>
>>>> // inside my init()
>>>> oMap.events.register("mousemove", olWFSRoads, changeColorOnOverFeature);
>>>>
>>>>
>>>> Erasing the geometry makes the feature disappear, but it's still in the
>>>> layer features, with no changes of its geometry and all...  I'm quite
>>>> sure this is not the best way to do it.  Any clues ?
>>>>
>>>>         
>>> You should use a feature handler (Handler.Feature) to detect
>>> mouseover/mouseout on features. Look at the select feature control to
>>> understand how to use it.
>>>
>>> --
>>> Eric
>>>
>>>       
>> --
>> Alexandre Dubé
>> Mapgears
>> www.mapgears.com
>>
>> _______________________________________________
>> Users mailing list
>> Users at openlayers.org
>> http://openlayers.org/mailman/listinfo/users
>>
>>     


-- 
Alexandre Dubé
Mapgears
www.mapgears.com