I'm using OpenLayers to show routes on a map. These routes are loaded from JSON and I'm using a Vector Layer to get it onto the map - works great.

Now I want to Display all features in a div outside Map. and when user hovers on it, feature should highlight on map and on click only selected route should be displayed on Map and other features will be hidden. (Just like Google Maps route Information).

any guidance to archive with openlayers would be great.

1 Answer 1


What you will need is a SelectFeature control. This will handle the highlighting and will give you a place to hook up your select/unselect event handlers.

Add the following control:

var selectControl = new OpenLayers.Control.SelectFeature(
        autoActivate: true,
        hover: false,
        multiple: false,
        clickout: true,
        toggle: true,
        onSelect: function (feature) {
            // Place logic here to highlight item in grid
        onUnselect: function (feature) {
            // Place logic here to unhighligt item in grid


In order for the highlighting to work properly, you'll have to add a StyleMap to your vector layer, which you can add to the options you provide with your new OpenLayers.Layer.Vector:

styleMap: new OpenLayers.StyleMap({
    "default": new OpenLayers.Style({
        strokeColor: '#00FF00',
        strokeWidth: 2,
        strokeOpacity: 1.0
    "select": {
        strokeColor: '#FF0000',
        strokeWidth: 2,
        strokeOpacity: 1.0

How your grid works probably is beyond the scope of the GIS SE. If you have any questions in that regard, you may wish to head over to the stackoverflow site.

But this should give you the basic entry points for what you are trying to achieve.


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.