CODEWITHSUNDEEP
javascriptselecthoveropenlayersmouseover
pawelforums
pawelforums

Reputation: 35

Using select and hover listener in openlayers 2 - hover change style

I am having some problem with styling feature on mouseover. I am able to get event, but changing style simply does not work. For selection it does, but for hover/mouseover it does not at all. Can anyone please help me with that. Here is my code:

var map, vectorLayer, wmsLayer, selectControl;

window.onload = function() {

    map = new OpenLayers.Map('map');

    wmsLayer = new OpenLayers.Layer.WMS("OpenLayers WMS",
        "http://vmap0.tiles.osgeo.org/wms/vmap0?", {
            layers: 'basic'
        }, {
            'attribution': 'Provided by OSGeo'
        }
    );

    vectorLayer = new OpenLayers.Layer.Vector("My Layer Name", {
        styleMap: new OpenLayers.StyleMap({
            "default": new OpenLayers.Style({
                strokeColor: "#ff0000",
                strokeOpacity: .7,
                strokeWidth: 1,
                fillColor: "#ff0000",
                fillOpacity: 0,

                'pointRadius': 30
            }),
            "temporary": new OpenLayers.Style({
                strokeColor: "#ffff33",
                strokeOpacity: .9,
                strokeWidth: 2,
                fillColor: "#ffff33",
                fillOpacity: .3,
                cursor: "pointer",
                'pointRadius': 20
            }),
            "select": new OpenLayers.Style({
                strokeColor: "#0033ff",
                strokeOpacity: .7,
                strokeWidth: 2,
                fillColor: "#0033ff",
                fillOpacity: 0,
                graphicZIndex: 2,

                'pointRadius': 10
            })
        })
    });


    map.addLayers([wmsLayer, vectorLayer]);
    map.zoomToMaxExtent();

    vectorLayer.addFeatures([
        new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point(10, 10)
        )
    ]);


    var selectControlClicks = new OpenLayers.Control.SelectFeature(vectorLayer, {
        onSelect: function(feature) {
            console.log('select: number of selected features: ' + vectorLayer.selectedFeatures.length);
        },
        onUnselect: function(feature) {
            console.log('unselect: number of selected features: ' + vectorLayer.selectedFeatures.length);
        }
    });
    var selectControlHover = new OpenLayers.Control.SelectFeature(vectorLayer, {
        hover: true,
        highlightOnly: true,
        renderIntent: 'temporary',
        overFeature: function(feature) {
            console.log('hover: number of selected features: ' + vectorLayer.selectedFeatures.length);
        },
        outFeature: function(feature) {
            console.log('hover out: number of selected features: ' + vectorLayer.selectedFeatures.length);
        },
    });
    map.addControl(selectControlHover);
    selectControlHover.activate();
    map.addControl(selectControlClicks);
    selectControlClicks.activate();

}

http://jsfiddle.net/eW8DV/80/

Maybe my hole approach is wrong, maybe I should use just one SelectControl ?

cheers

Upvotes: 0

Views: 1071

Answers (1)

fradal83
fradal83

Reputation: 2022

I think your problem is with the declaration of overFeature and outFeature.

Actually, while onSelect and onUnselect are template methods, designed to be overriden, overFeature and outFeature are not. Overriding those methods cause the override of the default behaviour ( layer.drawFeature(feature, style); ).

Anyway, I'd suggest you to use events instead. Try with

selectControlHover.events.register('featurehighlighted', null, function(e) {
console.log('feature selected ', e.feature);
});

Also, I'm quite sure that you can use one single control instead of two, but not knowing what you're trying to do, I can't suggest you another approach.

Upvotes: 1

Related Questions