OpenLayers - edit properties of GeoJSON vector source

Question

I have a GeoJSON vector file with some polygons representing country borders. I have added a property called "processed" to each country which defaults to 0 (i.e. false). I want to create a function that changes this value to 1 (true) when i select a country on OpenLayers map and click a button. And i want to overwrite old data with this edited data or make new data exportable to server-side.

Vector data source looks like this: https://raw.githubusercontent.com/mleontenko/openlayers-edit-properties/master/borders1.geojson

Full html file is here: https://github.com/mleontenko/openlayers-edit-properties/blob/master/map1.html

Script code (commented missing parts) looks like this:

  var vectorSource = new ol.source.Vector({
    url: 'https://raw.githubusercontent.com/mleontenko/openlayers-edit-properties/master/borders1.geojson',
    format: new ol.format.GeoJSON()
  });

  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
        source: vectorSource
      })
    ],
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([4.8, 47.75]),
      zoom: 5
    })
  });

  // a normal select interaction to handle click
  var select = new ol.interaction.Select();
  map.addInteraction(select);

//button that changes 0 to 1  
var PushButton = document.getElementById('store-data');
PushButton.addEventListener('click', function(){
  if(select){
    // missing code that changes "processed" value from 0 to 1

  }else {
     window.alert("You have not selected anything");
    }
 });

So, how can i change value of "processed" property from 0 to 1 and store changes to GeoJSON to "update" the map?

Answer 1

I think you could use the source's getFeaturesCollection and each features setProperties function to update the properties.

vectorSource.getFeaturesCollection().forEach(function(feature){
    feature.setProperties({
        processed: 1
    });
});

http://openlayers.org/en/latest/apidoc/ol.source.Vector.html#getFeatures http://openlayers.org/en/latest/apidoc/ol.Feature.html

Answer 2

You can get the currently selected feature by using select.getFeatures().item(0)

So you can update its "processed" property using the feature's set() method:

select.getFeatures().item(0).set('processed', 1);

Putting that line where you have // missing code that changes "processed" value from 0 to 1 will accomplish what you want to do.

It will overwrite the "processed" property in the vector source, so you can export that to server-side however you like.