Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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.

share|improve this question
add comment

1 Answer

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(
    vectorLayer,
    {
        autoActivate: true,
        hover: false,
        multiple: false,
        clickout: true,
        toggle: true,
        onSelect: function (feature) {
            alert(feature.attributes.your_id);
            // Place logic here to highlight item in grid
        },
        onUnselect: function (feature) {
            // Place logic here to unhighligt item in grid
        }
    }
);

map.addControl(selectControl);

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.

share|improve this answer
add comment

Your Answer

 
discard

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.