I have a map with layers that have similar attributes. I want to add a function that when you select a feature in a layer, it searches for a feature with similar properties in another feature (in this case NAME) and if a similar feature property is found, then the styling of the matching feature is altered.

I have a JSfiddle that tries to achieve this here: http://jsfiddle.net/TimLucas/nmd2vsww/6/

The function is called by using the second button. As you can see the get() of features works from the function called by the first button.

Here I mainly have problems with how you can set properties (instead of getting them) in the VectorSource GeoJSON file. I use .attr() but I am not sure if that actually works.

Does anyone know how to do this?

1 Answer 1



There are several errors in your code, namely:

  1. Your style functions uses feature.getGeometry().getType(); This will always return "Point" for a Point geometry.

A style function should be something like:

var styleFunction1 = function(feature, resolution) {
    if (feature.get("type")) {
      return styles1[feature.get("type")];
    return styles1["Point"];
  1. Your new ol.interaction.Select({}); has no style attribute, this means it will always use the default style for selected features

Pass it a style:

select = new ol.interaction.Select({
    condition: ol.events.condition.click,
    style: blueCircle
  1. The find-button callback has several errors:

    • when you find a matching feature, you store it's index in selectArray
    • you should use set() to set a new attribute on a feature

A better function:

FindButton.addEventListener('click', function(){
        if (select) {
            //Get the name of the feature
            var features = select.getFeatures();
            var selectedFeature = features.item(0);
            var name = selectedFeature.get("NAME");
            //Find corresponding name in other layer
            var otherFeatures = Layer2Source.getFeatures();
            for (var i=0; i < otherFeatures.length; i++) {
                var feature = otherFeatures[i];
                if (feature.get("NAME") == name) {
                    feature.set("type", "SelectedPoint");
                } else {
                    feature.set("type", "Point");
        } else {
         window.alert("You have not selected anything");

Original answer (for context)

Although I'm not sure how I can get the found features to be redrawn using the same style (i guess you could assign it a new style using feature setStyle (http://openlayers.org/en/v3.1.1/apidoc/ol.Feature.html?unstable=true#setStyle)), I've managed to rewrite your code to set the attribute on similar features:

var FindButton = document.getElementById('find-sim-name');
FindButton.addEventListener('click', function(){
        if(select) {
            //Get the name of the feature
            var features = select.getFeatures();
            var feature = features.item(0);
            var id = feature.get("NAME");
            //Find corresponding name in other layer

            //this array holds matching features
            var selectArray = [];

            //loop through all features on layer 
            for(var i=0; i < Layer2Source.getFeatures().length; i++) {

                //get the feature
                var feature = Layer2Source.getFeatures()[i];

                //check if name matches
                if(feature.get("NAME") == id){
                    //add matching to the array
            //Now do something to the found point
            if(selectArray.length > 0){
                for (var j = 0; j < selectArray.length; j++) {
                    var selectedFeature = selectArray[0];
                    selectedFeature.set("type", "SelectedPoint");
        } else {
         window.alert("You have not selected anything");
  • Thanks for your awnser but it seems to me that there are some problems with your solution: 1. You define a new selectedFeature var in your last loop and set the value of type in that variable, instead of in the source (Layer2Source) property. I tried to change this but it still doesn't work. 2. (bit nitpicky this one) you define the feature var twice so the second definition is not picked up. The major problem is that I cannot set the new value of the property in the source, do you maybe now how to do this?
    – Tim.Lucas
    Jan 16, 2015 at 8:34
  • For problem 1) these objects are not copied when assigned to a new variable, the reference is passed. That means that if i loop through Layer2Source, extract feature i, assign it to a variable, push that variable into a new array, and then get it back out from that array and assign it to a new variable it's still the same object as the original one
    – atlefren
    Jan 16, 2015 at 10:31
  • As for problem 2: I missed your first defition of feature, but renaming it should be easy..
    – atlefren
    Jan 16, 2015 at 10:32
  • Setting a new property on a vector feature is done with set(): openlayers.org/en/v3.1.1/apidoc/…
    – atlefren
    Jan 16, 2015 at 10:33
  • 1
    Well, there where several issues with your jsfiddle: here is my try: jsfiddle.net/9vtxch36
    – atlefren
    Jan 16, 2015 at 11:26

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.