Setting properties of geoJSON in OpenLayers

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 caseNAME) 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:

The function is called by using the second button. As you can see theget()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?


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:, 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 (, 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

Watch the video: GIS with Openlayers part1. How to add #GeoJSON on #Openlayers map? (October 2021).