title: How to clip and show clipped vector geometry in OpenLayers 5.3.0
body: <p>I have to clip vector layer based on the main/restriction vector layer. Upon drawing, if some part of the drawn layer is outside restriction layer, clip area that is outside restriction layer.</p>
  
  <p><em>Example 1.
  As we can see, part of the bottom border is outside restriction (purple layer)</em></p>
  
  <p><a href="https://i.stack.imgur.com/5SzTE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5SzTE.png" alt="enter image description here"></a></p>
  
  <p>I'm wondering if it is possible upon adding feature to clip area that is outside restriction layer</p>
  
  <p><em>Example 2. Removing area that is outside restriction layer</em> (green color) </p>
  
  <p><a href="https://i.stack.imgur.com/aoj1N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aoj1N.png" alt="enter image description here"></a></p>
  
  <p>I tried to calculate geometry using bboxPolygon function from (<a href="http://turfjs.org/docs/#bboxPolygon" rel="nofollow noreferrer">Turf.js</a>) library. Even tried with booleanWithin to detect if the drawn polygon is outside restriction layer but to no avail.</p>
  
  <p>Now, I'm wondering if it is possible to clip area then upon <code>addfeature</code> render clipped area within restriction layer (as shown in example 2)</p>
  
  <p>Here is code snippet that I used to somehow detect if area is clipped or if is it within restriction layer. </p>
  
  <pre><code>// detect if drawn layers is outside restriction layer
  vectorDrawLayer.getSource().on('addfeature', (evt) =&gt; {
    let feature = evt.feature;
    //let coordinatess = feature.getGeometry().clone().transform('EPSG:3857', 'EPSG:4326').getCoordinates();
  
    let geojsonFormat = new GeoJSON();
  
    let firstGeometryObject = {};
    let secondGeometryObject = {};
  
    if (vectorDrawLayer.getSource().getState() === 'ready') {
      let firstGeometry = vectorDrawLayer.getSource().getFeatures()[0];
      let secondGeometry = restrictionLayer.getSource().getFeatures()[0];
  
      firstGeometryObject = geojsonFormat.writeFeatureObject(firstGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });
  
      secondGeometryObject = geojsonFormat.writeFeatureObject(secondGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });
    }
  
    let isWithin = booleanWithin(firstGeometryObject, secondGeometryObject)
    let clipped = bBoxclip(firstGeometryObject, transformedExtent);
  
    //console.log(JSON.stringify(firstGeometryObject))
    console.log(clipped.geometry.coordinates);
    console.log(isWithin);
  })
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I was able to extract only polygon that is within restriction layer using <a href="http://turfjs.org/docs/#intersect" rel="nofollow noreferrer">http://turfjs.org/docs/#intersect</a> but now I'm having problem rendering only intersected layer. </p>
  
  <p>Initially, I wanted do delete layer source, then upon getting intersecting polygon coordinates I want to add new intersected polygon geometry (without outside area) but I can't render anything (seems that I'm missing something)</p>
  
  <p>Here is code snippet:</p>
  
  <pre><code>  let geojsonFormat = new GeoJSON();
    let firstGeometryObject = {};
    let secondGeometryObject = {};
    let feature;
    if (vectorDrawLayer.getSource().getState() === 'ready') {
  
      let firstGeometry = vectorDrawLayer.getSource().getFeatures()[0];
      let secondGeometry = restrictionLayer.getSource().getFeatures()[0];
  
  
      firstGeometryObject = geojsonFormat.writeFeatureObject(firstGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });
  
      secondGeometryObject = geojsonFormat.writeFeatureObject(secondGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });
  
      let intersectTest = intersect(firstGeometryObject, secondGeometryObject);
  
      let polygon = new Polygon(intersectTest.geometry.coordinates)
  
      feature = new Feature({
        geometry: polygon,
        name: 'test BlaBla'
      });
      console.log(feature)
      vectorDrawSource.removeFeature(firstGeometry);
      vectorDrawSource.addFeatures(feature);
    }
  </code></pre>
  
  <p>Here is link to test app (update):
  <a href="https://stackblitz.com/edit/js-vpdnbf" rel="nofollow noreferrer">https://stackblitz.com/edit/js-vpdnbf</a></p>