Static Image OpenLayers Example

Static Image OpenLayers Selected Area (Snippet)

As the center of the image is placed in the width and height provided, not working right at the moment, because of maybe not getting the coordinate system right?

snippetCoords: [[[158, -237], [669, -237], [669, -407], [158, -407]]]

snippetCenter: [413, -322]

--> style="width: 511px; height: 170px"> style="width: 1024px; height: 968px">

snippet_controller based on OpenLayers Static Image example above

	import { Controller } from "@hotwired/stimulus"
	
	import ImageLayer from 'ol/layer/Image';
	import Map from 'ol/Map';
	import Projection from 'ol/proj/Projection';
	import Static from 'ol/source/ImageStatic';
	import View from 'ol/View';
	import {getCenter} from 'ol/extent';
	import OSM from 'ol/source/OSM';
	import TileLayer from 'ol/layer/Tile';
	
	export default class extends Controller {
		static values = {
			coords: Array,
		}
		connect() {
			const x_extent = 1024
			const y_extent = 968
			const extent = [0, 0, x_extent, y_extent]; // original
			const snippet_coords = this.coordsValue;
			console.log(`25 snippet_coords = this.coordsValue ${this.coordsValue}`);
			const scale = 5 // I think this amounts to 1/scale  and just makes the image smaller, Doesn't crop out of the midds.
			const projection = new Projection({
				code: 'xkcd_image', // The SRS identifier code, e.g. EPSG:4326. The one given is meaningless.
				units: 'pixels',
				extent: extent,
			});
			// const map = new Map({
			this.map = new Map({
				layers: [
					new ImageLayer({
						source: new Static({
							attributions: '© xkcd',
							url: 'https://imgs.xkcd.com/comics/online_communities.png',
							projection: projection,
							imageExtent: extent,
							extent: snippet_coords, // doesn't seem to to anything
						}),
					}),
				],
				target: 'mapsn',
				view: new View({
					projection: projection,
					center: getCenter(extent),
					zoom: 2,
					maxZoom: 8,
				}),
			});
		}	
	}