Drawing and getting coordinates for a static image and then writing those coordinates to this page. Addresses all but one thing I want. I want to put the coordinates in another part of the the page, not with the image.

based in part on the OpenLayers, Static Image Example

To write drawn coordinates (snippet) to the page, must send the target with the call to `function addInteraction(target)`\n The values are not being used in this demo, but in my project they would be since they would be read from the database

Displaying image and function for drawing and returning coordinates all in connect() method. Target for coordinates sent to addInteraction function (drawing). No data actions required. FIXME. Rectangle disappears on completion and it doesn't in the Open Layers Draw Features Example

	HTML
<div data-controller="static-get-coordinates" id="sgcmap"
		data-static-get-coordinates-url-value = "<%= url %>"
		data-static-get-coordinates-coords-value = "<%= snippetCoords %>"
		data-static-get-coordinates-center-value = "<%= snippetCenter %>"
		data-static-get-coordinates-xcenter-value = "<%= centerX %>" 
		data-static-get-coordinates-ycenter-value = "<%= centerY %>"
		style="width: 1024px; height: 968px"
		class="mt-1">
		<div id="sgcresult" data-static-get-coordinates-target="drawnCoordinates">Drawn coordinates will appear here after drawing a rectangle</div>
	</div> 
	
	
// app/javascript/controllers/static_get_coordinates.js
	import { Controller } from "@hotwired/stimulus"
	
	import Map from 'ol/Map.js';
	import View from 'ol/View.js';
	import {getCenter} from 'ol/extent';
	import Projection from 'ol/proj/Projection';
	import Static from 'ol/source/ImageStatic';
	import ImageLayer from 'ol/layer/Image';
	import Draw, {createBox} from 'ol/interaction/Draw.js';
	import {Vector as VectorSource} from 'ol/source.js';
	import {Tile as TileLayer} from 'ol/layer.js';
	
	
	export default class extends Controller {
		static targets = [ "drawnCoordinates" ]
		
		static values = {
			url: String,
			coords: Array,
			xcenter: Number,
			ycenter: Number,
			center: Array,
		}
		connect(){
			var xkcdUrl = this.urlValue; // this is the only value I'm using in this demo. But other descriptors of the image in the final app
			
			const source = new VectorSource({wrapX: false});
			 
			const extent = [0, 0, 1024, 968];
			const projection = new Projection({
				code: 'xkcd-image',
				units: 'pixels',
				extent: extent,
			});
			
			const xkcdLayer = new ImageLayer({
				 source: new Static({
					 attributions: '© <a href="https://xkcd.com/license.html">xkcd</a>',
					 url: xkcdUrl,
					projection: projection,
					 imageExtent: extent,
				 }),
			 });
			var map = new Map({
				layers: [
					 xkcdLayer
				],
				target: 'sgcmap',
				view: new View({
					projection: projection,
					center: getCenter(extent),
					zoom: 2,
					maxZoom: 8,
				}),
			});
			function addDrawInteraction(coordsOutputTarget) {
				let draw = new Draw({
					 source: source,
					 type: 'Circle',
					 geometryFunction: createBox(),
				 });
				 map.addInteraction(draw);
				 draw.on('drawend', function(event) {
					let boxCoords = event.feature.values_.geometry.flatCoordinates;
					const boxCoordsTrunc = boxCoords.map(x => Math.trunc(x)) // For readability truncating the 13 meaningless digits after the decimal place 
						coordsOutputTarget.textContent = `${boxCoordsTrunc}`;
				}); 
			}
			addDrawInteraction(this.drawnCoordinatesTarget); // sending target for coordinates and having this function available
		 }
	}