0

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?

0

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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