1

based on this example addInteraction adds opacity, so I am setting a new style for each selected feature, however the clicked features remain red.

I only want to style with the red border only one feature at a time.

var style_simple = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'khaki'
  }),
   stroke: new ol.style.Stroke({
      color: '#880000',
      width: 2,
      opacity:1
    })
});

var style_noBG = new ol.style.Style({
    fill: new ol.style.Fill({
    color: '#5755d900'
  }),
   stroke: new ol.style.Stroke({
      color: 'yellow',
      width: 2,
      opacity:1
    })
});
    var style_selected = new ol.style.Style({ //style to be added on selected layer
        fill: new ol.style.Fill({
        color: '#5fba6a38'
      }),
       stroke: new ol.style.Stroke({
          color: 'red',
          width: 3,
          opacity:1
        })
    });

    var getStyle = style_simple;
    $("#layerbg").change(function () { //fires when checkbox is changed
      if ($(this).is(':checked')){
        getStyle = style_simple;
      }
      else{
        getStyle = style_noBG;
      }
    vector.setStyle(getStyle);
    });

    var vector = new ol.layer.Vector({
      style:style_simple,//set default style when page is loaded
      source: new ol.source.Vector({
        //url: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson',
        url: 'JS/getjson.json',
        format: new ol.format.GeoJSON()
       //,serverType: 'geoserver'
      }),opacity: 1
    });

var selectClick =  new ol.interaction.Select({
    condition: ol.events.condition.click
  });

        if (select !== null) {
          map.addInteraction(select);
          select.on('select', function(e) {
          var extent = e.target.getFeatures().getArray()[0].getGeometry().getExtent();
          e.target.getFeatures().getArray()[0].setStyle(style_selected); //commenting out this line works but adds opacity to the layer
          map.getView().fit(extent,{duration: 590},map.getSize());
          });
        }

la

4
  • Definition of style_selected would help pinpointing the problem.
    – TomazicM
    Jun 11, 2019 at 12:36
  • Is the yellow style applied directly to the features or the result of a layer style? If it is a layer style setting the style option on the select interaction will override it.
    – Mike
    Jun 11, 2019 at 12:36
  • Yellow border actually adds styles to all the features, it's set when i click checkbox. When clicking a specific feature it should turn red. I will add some more code.
    – csandreas1
    Jun 11, 2019 at 12:39
  • So the page loads, it adds to the vector default styling the style_simple. I have a checkbox which by default is checked when is unchecked it switches the style of the vector to style_noBG . Now clicking selected feature, will zoom and style the selected feature with the style_selected style.
    – csandreas1
    Jun 11, 2019 at 12:48

1 Answer 1

2

Since your styles are on the layer specifying the selected style when you create the Select interaction should be sufficient

var select = new ol.interaction.Select({
     style: style_selected,
     ...  // any other options
});

(and remove the line which sets the style on features)

1
  • i'm dumb :). Thanks again Mike, i appreciate your help
    – csandreas1
    Jun 11, 2019 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.