title: Manipulate GeoJSON Data - reload vector Layer in OpenLayers
body: <p>I’m stuck on creating a function that manipulates loaded GeoJSON data and updates the OpenLayers Map. What I have so far is a map that works with data filtered from a loaded GeoJSON file. How do I change the vector layer to use updated data?</p>
  
  <p>That’s my code so far:</p>
  
  <ul>
  <li><p>load GeoJSON <code>fullGeoJSON</code>:</p>
  
  <pre><code>var fullGeoJSON = require("./data/data.json");
  </code></pre></li>
  <li><p>create var filteredGeoJSON</p>
  
  <pre><code>var filteredGeoJSON = {
      "type": "FeatureCollection",
      "features": []
  };
  </code></pre></li>
  <li><p>fill empty <code>features</code> by filtering the <code>fullGeoJSON</code></p>
  
  <pre><code>function filterGeoJSON(religion, gender) {
      fullGeoJSON.features.forEach(function (feature) {
          if (
              feature.properties.religion == religion &amp;&amp;
              feature.properties.gender == gender
          ) {
              filteredGeoJSON.features.push(feature);
          }
      });
  }
  </code></pre></li>
  <li><p>define a vector source</p>
  
  <pre><code>var filteredSource = new VectorSource({
      features: new GeoJSON().readFeatures(filteredGeoJSON, {
          featureProjection: "EPSG:3857"
      })
  });
  </code></pre></li>
  <li><p>define new vector layer using the source</p>
  
  <pre><code>var filteredLayer = new VectorLayer({
      source: filteredSource
  });
  </code></pre></li>
  </ul>
  
  <p>define map (<code>mainMap</code>) using the vector source. The Map renders fine with only the
      features shown that are left over after filtering the input JSON</p>
  
  <p>Now I’m looking for a way to change the <code>filteredGeoJSON</code> by the click of a button by calling filterGeoJSON() with different parameters and use this changed data source for refreshing the <code>filteredSource</code> and hence the <code>filteredLayer</code>. What I have so far is:</p>
  
  <pre><code>onClick("gender", function () {
      // clear filteredGeoJSON
      (filteredGeoJSON = {
          type: "FeatureCollection",
          features: []
      });
      filterGeoJSON("protestantisch", "f"); // call filterGeoJSON again
      mainMap.refresh(); // &lt;- Something like this?
  });
  </code></pre>
  
  <p>How do I force OpenLayers to use the changed <code>filteredGeoJSON</code> from the onClick function as the datasource for my <code>mainMap</code>?</p>
  
  <p>Thanks for your help!</p>