How can I enable panning using Openlayers and a vector overlay with controls?

Question

I am creating a map using the following code:

map = new OpenLayers.Map({
    div: "map"
});

Then I load in a geojson polygon layer and add two controls

var highlightCtrl = new OpenLayers.Control.SelectFeature(geojson_layer, {
    hover: true,
    highlightOnly: true,       
    renderIntent: "temporary",
    eventListeners: {
                beforefeaturehighlighted: unreport,
                featurehighlighted: report,
                featureunhighlighted: unreport
            }
}); 

selectCtrl = new OpenLayers.Control.SelectFeature(geojson_layer,
    {clickout: true , 
     renderIntent: "select",
     onSelect: selected, 
     onUnselect: function(e){console.log('unselected)}
});    

map.addControl(highlightCtrl);
map.addControl(selectCtrl);    

highlightCtrl.activate();
selectCtrl.activate();  

This layer covers the entire map div, and now I can no longer pan the map. Is there a way that I can enable panning when I have a layer with controls that cover the basemap?

Answer 1

Andreas Hocevar has created an OpenLayers branch (currently in the pull-request queue) that solves this problem.

Rather than using the SelectFeature control, the branch enables the employment of event listeners that do not get in the way of other event intentions such as panning the map while inside one of your vector layers.

Your code may look something more like the following:

map = new OpenLayers.Map({
  div: "map",
  eventListeners: {
    featureover: function(e) {
      //behavior for hover events
    },
    featureout: function(e) {
      //behavior for mouse out events
    },                    
    featureclick: function(e) {
      //behavior for click events
    }
  }
});

var layer_style = new OpenLayers.StyleMap( {
  'default': OpenLayers.Util.applyDefaults(
    { fillColor: '#993333' } //normal (un-selected) appearance
  ),
  'select': OpenLayers.Util.applyDefaults(
    { fillColor: '#cc3333' } //hover/click appearance
  )
});

var geojson_layer = new OpenLayers.Layer.Vector(
  "my_vector_layer", 
  {
    isBaseLayer: false, 
    styleMap: layer_style
    //additional settings you are using to create your geojson layer...
  }
);

map.addLayers([geojson_layer]);

I've also created an example recently that demonstrates the use of this branch/strategy.

Hope that helps.