I am trying to highlight features of a vector layer as the mouse moves over them. I can make this work.

I'm also trying to make the features selectable and have a popup box when they're clicked. this works too.

What I can't make work is both of them at the same time. The hoverselect seems to override the popup select. I've based my code on http://dev.openlayers.org/releases/OpenLayers-2.11/examples/highlight-feature.html but with a few differences. Does anyone know why the hover select and select can't coexist?

select = new OpenLayers.Control.SelectFeature(vector_Layer, {clickout: true}); 
            "featureselected": onFeatureSelect,
            "featureunselected": onFeatureUnselect

        select.handlers['feature'].stopDown = false; 
        select.handlers['feature'].stopUp = false;

//REMOVED AS OVERRODE SELECT selectHover = new OpenLayers.Control.SelectFeature(vector_Layer, {hover: true});

function onPopupClose(event) {

function onFeatureSelect(event) {
        var feature = event.feature;
        var content = "<p>"+feature.attributes.SHEET.value + "</p>" + feature.attributes.description;
        if (content.search("<script") != -1) {
            content = "Content contained Javascript! Escaped content below.<br>" + content.replace(/</g, "&lt;");
        popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                 new OpenLayers.Size(100,100),
                                 null, true, onPopupClose);
        feature.popup = popup;

function onFeatureUnselect(event) {
        var feature = event.feature;
        if(feature.popup) {
            delete feature.popup;

var info = function(evt) {
            OpenLayers.Console.log(evt.type, evt.feature.id);

//REMOVED OF OVERODE SELECT var highlight = new OpenLayers.Control.SelectFeature(vector_Layer, {
//                hover: true,
//                highlightOnly: true,
//                renderIntent: "temporary",
//                eventListeners: {
//                    beforefeaturehighlighted: info ,
//                    featurehighlighted: info ,
//                    featureunhighlighted: info 
//                }
//            });

var vector_style_d = new OpenLayers.Style({
    'fillColor': '#669933',
    'fillOpacity': .5,
    'strokeColor': '#aaee77',
    'strokeWidth': 3,
    'cursor': 'pointer'

var vector_style_s = new OpenLayers.Style({
    'fillColor': '#FE2E2E',
    'fillOpacity': .8,
    'strokeColor': '#aaee47',
    'strokeWidth': 4,
    'cursor': 'pointer'

var vector_style_t = new OpenLayers.Style({
    'fillColor': '#FE2E2E',
    'fillOpacity': .8,
    'strokeColor': '#aaee47',
    'strokeWidth': 3,
    'cursor': 'pointer'

var vector_style_map = new OpenLayers.StyleMap({
    'default': vector_style_d,
    'select': vector_style_s,
    'temporary': vector_style_t,

vector_Layer.styleMap = vector_style_map;

Also set the


in your highlight control. This way, the highlighted feature will not be added to list of selected features.

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.