I am working on a web app using OpenLayers 4.6.5, with a WFS layer from PostgresSQL via GeoServer 2.5.

I first click and use forEachFeatureAtPixel to get all the feature names at a given location. Then I populate a popup at that location with the list of names (each name is clickable as a element). Then I want to highlight the specific feature by clicking on its name in the popup, by first iterating through the feature list in the layer and searching by the chosen name, then using Select to highlight the matched feature in the map.

Everything seems ok until the last step, where I am getting odd results. When there is only one feature at that location, the feature highlights when clicked (not when I click the link in the popup as desired), and the highlight does not clear when I click another feature. If there is more than one feature link in the popup, the selected feature will highlight for a brief moment, then the highlight is gone.

The code snippet is below. (note that 'event' in the code refers to map features that are street events, not to js events)

var select = new ol.interaction.Select({
            style:function(feature, resolution){
                var select_geom_name = feature.getGeometry().getType();
                return select_styles[select_geom_name];


    $('.this_event').click(function(){ // class of <a> links in popup - feature names
        select.getFeatures().clear(); // doesn't seem to do anything ?

        var selected_text;  
        var selected_features = [];

        selected_text = $(this).text(); // from links in popup- gets name of feature
        selected_features = select.getFeatures();

        var feature_list = layer.getSource().getFeatures();     
        for (var f=0; f<feature_list.length; f++) {             
            if(feature_list[f].get('eventname') === selected_text) {
                console.log("match: " + feature_list[f].get('eventname'));
                console.log(selected_features.length); // undefined     

  • Any special reason you are using ol.interaction.Select to highlight a feature? Why not just set feature style? Select interaction is intended for interactive selection with mouse, default selection act being mouse click (as you found out). You cannot add feature to selected collection of features programmatically, only by mouse interaction (or if you would simulate mouse event, with all the required parameters).
    – TomazicM
    Apr 17, 2020 at 18:58
  • @TomazicM I have seen many examples in SO showing how to use Select programmatically, such as gis.stackexchange.com/questions/136193/… If I hardcode in an attribute value this works. I think my problem has to do with scope and/or having two click events, but I am not sure.
    – JasonBK
    Apr 20, 2020 at 14:57
  • @TomazicM this thread also has another SO link, which shows how to select programmatically using getFeatures() - I would like to use this, so that the select feature will revert to its original style after the selection clears (when another feature is selected) github.com/openlayers/openlayers/issues/4912
    – JasonBK
    Apr 20, 2020 at 15:02
  • Thanks for the link, I just learned something new (I'm OpenLayers beginner). I'll try this.
    – TomazicM
    Apr 20, 2020 at 15:24
  • @TomazicM this is for OL4 as noted - not sure in OL6 but I would iimagine there is something similar to getFeatures()
    – JasonBK
    Apr 20, 2020 at 15:42


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.