Take the 2-minute tour ×

I am using the following example, to select a vector layer feature on click. The example demonstrates Highlighting and selecting the layer. I was able to successfully implement the Highlighting of the layer but I am not able to select the layer.

This is my code

var highlightCtrl = new OpenLayers.Control.SelectFeature([vector_layer,QuebecSpecies], {
                hover: true,
                highlightOnly: true,
                renderIntent: "temporary",
                eventListeners: {
                    beforefeaturehighlighted: report,
                    featurehighlighted: report,
                    featureunhighlighted: report

            var selectCtrl = new OpenLayers.Control.SelectFeature([vector_layer],
                {clickout: true}



Where am I falling short?

share|improve this question
did you activate it? –  Aragon Jun 7 '12 at 6:22
Its not because 'highlightOnly' is set to true is it? From the OpenLayers Manual 'If true do not actually select features (that is place them in the layer’s selected features array), just highlight them.' I've never used this particular control before so I'm just taking a stab in the dark. –  Rob Quincey Jun 7 '12 at 8:46
Ya I did Activate it, forgot to paste that portion of the code earlier –  Sam007 Jun 7 '12 at 17:06
I think it would be better to add your code in jsfiddle so we can easily help you. –  Aragon Jun 8 '12 at 7:17
Here is it jsfiddle.net/smaran/qTFEa/1, the running application is here. –  Sam007 Jun 8 '12 at 17:22

2 Answers 2

up vote 0 down vote accepted

Please try this i hope this will help you. DEMO

This demo will display a point on a map and highlight it on mouse over and selecting point on click will display a popup, and removes the popup on unselect

Here is the code for function :

function init() {
        var Geographic = new OpenLayers.Projection("EPSG:4326");
        var Mercator = new OpenLayers.Projection("EPSG:900913");

        var map = new OpenLayers.Map({
            div: "map",
            center: new OpenLayers.LonLat(0, 0),
            minResolution: "auto",
            maxResolution: "auto",
            projection: Mercator,
            displayProjection: Geographic

        var baselayer = new OpenLayers.Layer.OSM();
        map.addControl(new OpenLayers.Control.MousePosition());
        map.setCenter(new OpenLayers.LonLat(77.79, 22.77),4);
        // creates a point layer with a temporary style
        var pointLayer = new OpenLayers.Layer.Vector("Points", {
            styleMap: new OpenLayers.StyleMap({
                "temporary": new OpenLayers.Style({
                    strokeColor: '#7f0000',
                    fillColor: '#7f0000',
                    strokeOpacity: .8,
                    strokeWidth: 1,
                    fillOpacity: .3,
                    cursor: "default",
                    pointRadius: 6
        // add a point to pointLayer
        var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(77.79, 22.77));
        // point layer events on featureselected adds a popup and removes it on featureunselected
            featureselected: function (e) {
                latitude = e.feature.geometry.x;
                longitude = e.feature.geometry.y;
                id = e.feature.id;
                popup = new OpenLayers.Popup(id,
                            new OpenLayers.LonLat(latitude, longitude),
                            new OpenLayers.Size(200, 20),
                            id, true);
            featureunselected: function (e) {
                var id = e.feature.id;
                for (var i = 0; i < map.popups.length; i++) {
                    if (map.popups[i].id == id) {
                        var x = map.popups[i];
        // highlightControl adds the temporary style on select
        var highlightControl = new OpenLayers.Control.SelectFeature(pointLayer, {
            hover: true,
            highlightOnly: true,
            renderIntent: "temporary"
        // selectControl will select a particular feature
        var selectControl = new OpenLayers.Control.SelectFeature([pointLayer],
            { clickout: true }

share|improve this answer



You had to activate and add the control in right order, begin with the hover activate and add then the select event snippet.

share|improve this answer

Your Answer


