Using openlayers I have two vector layers. One layer is called lineLayer consisting of vector lines, and the other is called pointLayer consisting of points. When I hover on the lines I want to be able to highlight the line, and identify the vector object when I click on it. When I hover on the point I want to highlight the point and be able to drag it. My code works separately for lines and points, but not when I put it together.

This is how I manage the line layer:

// handle interactions with lines
var highlightCtrl = new OpenLayers.Control.SelectFeature(lineLayer, {
    hover: true,
    highlightOnly: true,            
    renderIntent: "temporary"


var selectCtrl = new OpenLayers.Control.SelectFeature(lineLayer, {      
    clickout: true, 
    onSelect: function(feature){console.log(feature)}       


And this is how I manage the points:

// handle interactions with points 
var highlightpoint = new OpenLayers.Control.SelectFeature(pointLayer, {
    hover: true,
    highlightOnly: true,
    renderIntent: "temporary",


var dragStart = new OpenLayers.Control.DragFeature(pointLayer, {
    autoActivate: true


From reading other examples I have noticed that the order seems to matter when a control is added. However, I've tried all the possible combinations of layer adding, and it does not seem to make a difference.

Is there some way to do this that I am overlooking?

2 Answers 2


You can pass an array of layers to the select control

selectControl = new OpenLayers.Control.SelectFeature(
    [lineLayer, pointLayer],
        clickout: true, toggle: false,
        multiple: false, hover: false,
        toggleKey: "ctrlKey", // ctrl key removes from selection
        multipleKey: "shiftKey" // shift key adds to selection


See the openlayers documentation

To add different behavior for each layer, you could use the "featureselected" and "featureunselected" like in this example


How to handle both click and hover control? I didn't try, but following this example should be done easily. Notice that the "hover" control is nothing else that a select control with 'hover': true. So, just add another control passing to it the array of layers.

  • Yes, but I want to have different functionality for each layer which is why I separated them.
    – djq
    Commented Oct 16, 2012 at 19:27
  • 2
    You can register a "featureselected" and "featureunselected" event for each layer....I attach another link in the answer
    – Tommaso
    Commented Oct 16, 2012 at 19:32
  • Thank you, this works well for selected features when clicked. I'm still not managing to make it work for a feature that is highlighted, as I want to call a function when this occurs. Is this possible?
    – djq
    Commented Oct 16, 2012 at 21:32

You can even do it all in 1 function and just differentiate between layers by checking which one it is: To decide what to do with the selected feature, you can use this in your callback

function onFeatureSelect(event) {
var feature = event.feature;
// Now you know what to do since you know what layer this fired.
 if ( strcmp ('BadLayer', feature.layer.name) == 0 ) {
   // Do nothing for this layer !
   return true;

Btw, that strcmp is not a standard javascript, just in case you use it, you'll need this too:

function strcmp (str1, str2) {
     return ((str1 == str2) ? 0 : ((str1 > str2) ? 1 : -1));

The point is that you cannot use more than 1 OpenLayers.Control.SelectFeature and expect them to function 'per layer'.

It's actually intented not to work anymore, apparently you cannot create 2 Control features. Instead you need to create one and apply this to both layers. The support for this was removed in 2.7 as stated in the docs. There is a good example of how to do this with 2 different Vector Layers. This took me days to realise.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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