Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 cant make work is both of them at the same time. The hoverselect seems to overide the popup select. I've based my code on 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 ("<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) {

//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;
share|improve this question

Also set the


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

share|improve this answer

Your Answer


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.