OpenLayers Static Image Filtered and Cropped Only have cropping implemented.

or ol-ext examples (OpenLayers Extensions-Viglino)

crop_controller. Getting geojson in RoR instead of trying to read url in jS. See crop_controller and ol_ext_crop together on a page

(crop)coords as passed to controller. Treated as array by both Rails and JavaScript

Sample (too long to display: [[[[-335430, 6009377], [-335931, 6009459], [-335708, 6009661], [-335310, 6009569], )

Partial HTML for this page

	
		<% url = "#{Rails.root}/public/ol_ext_crop.geojson" %>
		<% response = open(url).read %>
		<% geojson = JSON.parse(response) %> <!-- HASH while response is string -->
		<!-- {"type"=>"Feature", "geometry"=>{"type"=>"MultiPolygon", "coordinates"=>[[[[- is how the file reads-->
		<p>(crop)coords as passed to controller. Treated as array by both Rails and JavaScript</p>
		<% coords = geojson['geometry']['coordinates'] %> <!-- just the coords -->
		<p>Sample (too long to display: [[[[-335430, 6009377], [-335931, 6009459], [-335708, 6009661], [-335310, 6009569], )</p>
		<div id="cropid"
			 data-controller="crop"
			 data-crop-coords-value="<%= coords %>"
			 style="height:400px">
			 </div> 
	

Stimulus controller. crop_controller.js

	import { Controller } from "@hotwired/stimulus"
	import Map from 'ol/Map.js';
	import View from 'ol/View.js';
	import TileLayer from 'ol/layer/Tile';
	import {OSM, Stamen} from 'ol/source.js';
	import Fill from 'ol/style/Fill.js';
	import Feature from 'ol/Feature.js';
	import MultiPolygon from 'ol/geom/MultiPolygon.js';
	import Crop from 'ol-ext/filter/Crop.js';
	
	// Connects to data-controller="crop"
	export default class extends Controller {
	
		static values = {
			coords: Array // Array in Rails and jS
		}
		connect() {		
			let coords = this.coordsValue
			console.log(`26 typeof(coords): ${typeof(coords)}`); // object
			
			var osm = new TileLayer({ source: new OSM() }); /* layer to be cropped */
			var stamenLayer = new TileLayer({ source: new Stamen({ layer: 'watercolor' }) }); // acts as baselayer
	
			var map = new Map({
				target: 'cropid',
				view: new View({
					zoom: 8,
					center: [-337743, 6059005]
				}),
				layers:[
					stamenLayer, // This acts as the underlying layer and the osm layer which is cropped and masked sits on top
					// If remove this layer, just the cropped osm shows
					osm
				]
			});
			
				var f = new Feature(
					new MultiPolygon(coords)
				);
				
				var crop = new Crop({ 
					feature: f, 
					wrapX: true,
					inner: false
				});        
				osm.addFilter(crop); // cropped to this            
			} 
	}

Out of date nav below