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 can specify event callbacks in an OpenLayers layer:

var vectorA=new OpenLayers.Layer.Vector("A");{
  "featureselected": callback

and I can specify event callbacks in a control's constructor:

highlightControl = new OpenLayers.Control.SelectFeature(vectorA, {
  renderIntent: "temporary",
  hover: true,
  highlightOnly: true,
  eventListeners: {
    featurehighlighted: hoverFeatureCallback,
    featureunhighlighted: unhoverFeatureCallback

Can I mix them properly?

Basically, one layer needs both select and hover events, so I'd have two controls, one that hovers, and give each their own callbacks (like the second example above.)

AND I have multiple layers that need select events, so in that case I'd define the events in the layers themselves, like the first example. However, I can't use the first example with hover and select because, in OL's infinite wisdom, hover events are really just select events.

How can I have two layers respond to hover events and one of them also respond to select events?

share|improve this question
Is this answer useful?… – Tommaso May 14 '14 at 20:56
Maybe. Would I define two select controls (one for hovering), pass both layers to each, and check in the event for which layer I'm "selecting"? – whiterook6 May 15 '14 at 22:47

To combine hover and click in OpenLayers 2.x, it is sufficient to override the clickFeature method of OpenLayers.Control.SelectFeature. The default implementation does nothing on hover but is still called on click:

clickFeature: function (feature) {
  if (!this.hover) {

This code demonstrates that it is possible to handle the feature click by overriding clickFeature:

var highlightCtrl = new OpenLayers.Control.SelectFeature([vectors, vectors2], 
  hover: true,
  onSelect: function (e) { ... process feature hover ...  }, 
  clickFeature: function (e) { alert("clicked feature: " +; } 
share|improve this answer
up vote 0 down vote accepted

I've found a solution. To enable hovering and selecting on multiple layers, each handled differently, you need to:

  1. Create both layers without any event handlers:

    var vectors = new OpenLayers.Layer.Vector("vector"),
        vectors2 = new OpenLayers.Layer.Vector("vector");
  2. register select and unselect events on both layers:"featureselected", null, function(feature){
        console.log("v1 featureSelected");
    });"featureunselected", null, function(feature){
        console.log("v1 featureunselected");
    });"featureselected", null, function(feature){
        console.log("v2 featureSelected");
    });"featureunselected", null, function(feature){
        console.log("v2 featureunselected");
  3. Create select and highlight controls:

    var highlightCtrl = new OpenLayers.Control.SelectFeature([vectors, vectors2], {
        hover: true,
        highlightOnly: true,
        renderIntent: "temporary",
    var selectCtrl = new OpenLayers.Control.SelectFeature([vectors, vectors2],
        {clickout: true}
  4. Attach the hover/unhover events to the highlight control: (these take events, not features, but you can get the feature with event.feature)"featurehighlighted", null, function(event){
    });"featureunhighlighted", null, function(event){
  5. Finally, you can tell which layer has triggered the highlight event with


I dislike this solution since I'd like to implement code in pieces and merge it all together later, and this requires setting up the layers completely before being able to add/attach events, but there you go.

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.