[GIS] Setting properties of geoJSON in OpenLayers

javascriptopenlayers-2

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?

Best Answer

Edited:

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
                    selectArray.push(feature);
                }
            }
            //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");
                    //perhaps
                    //selectedFeature.setStyle(selectedStyle); 
                }
            }
        } else {
         window.alert("You have not selected anything");
        }
 })r
Related Question