Add new functionality for dzialki, dzialki2, lines, mpzp, osuwiska, position, section, and test modules with API integration and canvas drawing capabilities

2025-06-05 11:33:33 +02:00
parent 1c97e0610f
commit eb69a810fd
8 changed files with 556 additions and 0 deletions
--- a/js/functions/dzialki.js
+++ b/js/functions/dzialki.js
@@ -0,0 +1,49 @@
+let dzialkiIcon = document.createElement("img");
+function dzialkiButtonClick() {
+
+	
+	dzialkiButton.style.background = "gray";
+
+	dzialkiIcon.src = chrome.runtime.getURL("icons/loading.gif");
+
+	const canvas = document.getElementsByClassName("ol-unselectable")[0];
+	const ctx = canvas.getContext("2d");
+	const height = canvas.height;
+	const width = canvas.width;
+
+	let XMIN = MapData.X_MIN;
+	let YMIN = MapData.Y_MIN;
+	let XMAX = MapData.X_MAX;
+	let YMAX = MapData.Y_MAX;
+
+	// let URL = `https://epsg.io/trans?data=${XMIN},${YMIN};${XMAX},${YMAX}&s_srs=2177&t_srs=2180`; // stary endpoint
+	let URL = `https://api.maptiler.com/coordinates/transform/${XMIN},${YMIN};${XMAX},${YMAX}.json?s_srs=2177&t_srs=2180&key=OZa2pWHGvC94xakI0fVk`;
+
+	fetch(URL, {
+		method: "GET",
+	})
+		.then((response) => response.json())
+		.then((data) => {
+			let NXMIN = data[0].x;
+			let NYMIN = data[0].y;
+			let NXMAX = data[1].x;
+			let NYMAX = data[1].y;
+
+			var img = new Image();
+			img.onload = function () {
+				ctx.drawImage(img, 0, 0, width, height);
+				dzialkiIcon.src = chrome.runtime.getURL("icons/dzialki1.png");
+			};
+			img.onerror = function () {
+				dzialkiIcon.src = chrome.runtime.getURL("icons/dzialki1.png");
+
+				dzialkiButton.style.background = "pink";
+			}
+
+			img.src = `
+			https://integracja01.gugik.gov.pl/cgi-bin/KrajowaIntegracjaEwidencjiGruntow?VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&LAYERS=dzialki,numery_dzialek,budynki&SRS=EPSG:2180&WIDTH=${width}&HEIGHT=${height}&TRANSPARENT=TRUE&FORMAT=image/png&BBOX=${NXMIN},${NYMIN},${NXMAX},${NYMAX}
+			`;
+
+			dzialkiButton.style.background = "none";
+		});
+}
--- a/js/functions/dzialki2.js
+++ b/js/functions/dzialki2.js
@@ -0,0 +1,48 @@
+let dzialki2Icon = document.createElement("img");
+function dzialki2ButtonClick() {
+	dzialki2Button.style.background = "gray";
+
+	dzialki2Icon.src = chrome.runtime.getURL("icons/loading.gif");
+
+	const canvas = document.getElementsByClassName("ol-unselectable")[0];
+	const ctx = canvas.getContext("2d");
+	const height = canvas.height;
+	const width = canvas.width;
+
+	let XMIN = MapData.X_MIN;
+	let YMIN = MapData.Y_MIN;
+	let XMAX = MapData.X_MAX;
+	let YMAX = MapData.Y_MAX;
+
+	let URL = `https://epsg.io/trans?data=${XMIN},${YMIN};${XMAX},${YMAX}&s_srs=2177&t_srs=3857`;
+
+	fetch(URL, {
+		method: "GET",
+	})
+		.then((response) => response.json())
+		.then((data) => {
+			let NXMIN = data[0].x;
+			let NYMIN = data[0].y;
+			let NXMAX = data[1].x;
+			let NYMAX = data[1].y;
+
+			var img = new Image();
+			img.onload = function () {
+				ctx.drawImage(img, 0, 0, width, height);
+				dzialki2Icon.src = chrome.runtime.getURL("icons/dzialki2.png");
+			};
+			img.onerror = function () {
+				dzialki2Icon.src = chrome.runtime.getURL("icons/dzialki2.png");
+
+				dzialki2Button.style.background = "pink";
+			}
+
+			img.src = `https://geoserver.lp-portal.pl/geoserver/pzdnowysacz/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=TRUE&LAYERS=dzialki&env=historydate%3A3022-11-28%2014%3A13%3A48&SRS=EPSG%3A3857&STYLES=&WIDTH=${width}&HEIGHT=${height}&BBOX=${NXMIN}%2C${NYMIN}%2C${NXMAX}%2C${NYMAX}`;
+
+			// img.src = `
+			// https://integracja01.gugik.gov.pl/cgi-bin/KrajowaIntegracjaEwidencjiGruntow?VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&LAYERS=dzialki,numery_dzialek,budynki&SRS=EPSG:2180&WIDTH=${width}&HEIGHT=${height}&TRANSPARENT=TRUE&FORMAT=image/png&BBOX=${NXMIN},${NYMIN},${NXMAX},${NYMAX}
+			// `;
+
+			dzialki2Button.style.background = "none";
+		});
+}
--- a/js/functions/lines.js
+++ b/js/functions/lines.js
@@ -0,0 +1,46 @@
+let LINES = [];
+
+function getLines() {
+	console.log("getLines");
+	port.postMessage({ response: "getLines" });
+}
+function drawLines(data) {
+	navigator.clipboard.writeText(data);
+	for (let element of data) {
+		if (element.SEARCH == "KIER. OBW. 4 SŁUP NR 11") {
+			const canvas = document.getElementsByClassName("ol-unselectable")[0];
+			const ctx = canvas.getContext("2d");
+			console.log(element);
+			if (element.SHAPE.length < 84) {
+				let x1 = parseFloat(element.SHAPE.slice(14, 30));
+				let y1 = parseFloat(element.SHAPE.slice(31, 47));
+				let x2 = parseFloat(element.SHAPE.slice(49, 65));
+				let y2 = parseFloat(element.SHAPE.slice(66, 82));
+				// let coords = [
+				// 	[x1, y1],
+				// 	[x2, y2],
+				// 	element.DESCRIPTION,
+				// 	element.OBJ_SIZE,
+				// 	element,
+				// ];
+				let translated = translate([
+					[x1, y1],
+					[x2, y2],
+				]);
+				console.log(translated);
+				ctx.beginPath();
+				ctx.shadowOffsetX = 2;
+				ctx.shadowOffsetY = 2;
+				ctx.shadowBlur = 4;
+				ctx.shadowColor = "rgba(250, 0, 0, 1)";
+				ctx.strokeStyle = "rgba(255, 0, 0, 1)";
+				ctx.moveTo(translated[0][0], translated[0][1]);
+
+				ctx.lineTo(translated[1][0], translated[1][1]);
+				ctx.stroke();
+				ctx.shadowColor = "rgba(250, 0, 0, 0)";
+				ctx.strokeStyle = "rgba(0, 0, 0, 1)";
+			}
+		}
+	}
+}
--- a/js/functions/mpzp.js
+++ b/js/functions/mpzp.js
@@ -0,0 +1,98 @@
+const mpzpIcon = document.createElement("img");
+
+function mpzpButtonClick() {
+	mpzpIcon.src = chrome.runtime.getURL("icons/loading.gif");
+
+	const canvas = document.getElementsByClassName("ol-unselectable")[0];
+	const ctx = canvas.getContext("2d");
+	const height = canvas.height;
+	const width = canvas.width;
+
+	let XMIN = MapData.X_MIN;
+	let YMIN = MapData.Y_MIN;
+	let XMAX = MapData.X_MAX;
+	let YMAX = MapData.Y_MAX;
+
+	let URL = `https://epsg.io/trans?data=${XMIN},${YMIN};${XMAX},${YMAX}&s_srs=2177&t_srs=2180`;
+
+	fetch(URL, {
+		method: "GET",
+	})
+		.then((response) => response.json())
+		.then((data) => {
+			let NXMIN = data[0].x;
+			let NYMIN = data[0].y;
+			let NXMAX = data[1].x;
+			let NYMAX = data[1].y;
+			getGmina(width, height, NXMIN, NYMIN, NXMAX, NYMAX).then((gmina) => {
+				console.log(gmina);
+
+				if (gmina == "Chełmiec") {
+					mpzpButton.style.background = "teal";
+					mpzpIcon.src = chrome.runtime.getURL("icons/mpzp.png");
+					console.log(NXMIN, NYMIN)
+					port.postMessage({
+						response: "getChelmiec",
+						XMIN: NXMIN,
+						YMIN: NYMIN,
+						XMAX: NXMAX,
+						YMAX: NYMAX,
+					});
+					return;
+				}
+				if (gmina == "Łososina Dolna") {
+					mpzpButton.style.background = "blue";
+					mpzpIcon.src = chrome.runtime.getURL("icons/mpzp.png");
+					console.log(NXMIN, NYMIN)
+					port.postMessage({
+						response: "getLososina",
+						XMIN: NXMIN,
+						YMIN: NYMIN,
+						XMAX: NXMAX,
+						YMAX: NYMAX,
+					});
+					return;
+				}
+				if (gmina == "Nawojowa") {
+					mpzpButton.style.background = "lime";
+					mpzpIcon.src = chrome.runtime.getURL("icons/mpzp.png");
+					let X = Number(XMIN) + Math.abs((XMAX - XMIN) / 2);
+					let Y = Number(YMIN) + Math.abs((YMAX - YMIN) / 2);
+					let URL = `https://epsg.io/trans?data=${X},${Y}&s_srs=2177&t_srs=4258`;
+
+					fetch(URL, {
+						method: "GET",
+					})
+						.then((response) => response.json())
+						.then((data) => {
+							port.postMessage({
+								response: "getNawojowa",
+								X: data.y,
+								Y: data.x,
+							});
+							return;
+						})
+					
+				}
+
+				var img = new Image();
+				img.onload = function () {
+					ctx.drawImage(img, 0, 0, width, height);
+					mpzpIcon.src = chrome.runtime.getURL("icons/mpzp.png");
+					console.log("LO");
+					mpzpButton.style.background = "none";
+				};
+				img.onerror = function () {
+					mpzpIcon.src = chrome.runtime.getURL("icons/mpzp.png");
+
+					mpzpButton.style.background = "pink";
+				};
+
+				img.src = `
+				https://mapy.geoportal.gov.pl/wss/ext/KrajowaIntegracjaMiejscowychPlanowZagospodarowaniaPrzestrzennego?REQUEST=GetMap&TRANSPARENT=TRUE&FORMAT=image%2Fpng&VERSION=1.3.0&LAYERS=raster%2Cwektor-str%2Cwektor-lzb%2Cwektor-pow%2Cwektor-lin%2Cwektor-pkt%2Cgranice&STYLES=%2C%2C%2C%2C%2C%2C&EXCEPTIONS=xml&BBOX=${NYMIN}%2C${NXMIN}%2C${NYMAX}%2C${NXMAX}&CRS=EPSG%3A2180&WIDTH=${width}&HEIGHT=${height}&SERVICE=WMS
+				`;
+				console.log("EN");
+				mpzpButton.style.background = "none";
+			});
+		});
+}
--- a/js/functions/osuwiska.js
+++ b/js/functions/osuwiska.js
@@ -0,0 +1,42 @@
+function osuwiskaButtonClick() {
+	osuwiskaButton.style.background = "gray";
+
+	const canvas = document.getElementsByClassName("ol-unselectable")[0];
+	const ctx = canvas.getContext("2d");
+	const height = canvas.height;
+	const width = canvas.width;
+
+	let XMIN = MapData.X_MIN;
+	let YMIN = MapData.Y_MIN;
+	let XMAX = MapData.X_MAX;
+	let YMAX = MapData.Y_MAX;
+
+	// let URL = `https://epsg.io/trans?data=${XMIN},${YMIN};${XMAX},${YMAX}&s_srs=2177&t_srs=2180`; stary endpoint
+	let URL = `https://api.maptiler.com/coordinates/transform/${XMIN},${YMIN};${XMAX},${YMAX}.json?s_srs=2177&t_srs=2180&key=OZa2pWHGvC94xakI0fVk`;
+
+	fetch(URL, {
+		method: "GET",
+	})
+		.then((response) => response.json())
+		.then((data) => {
+			let NXMIN = data[0].x;
+			let NYMIN = data[0].y;
+			let NXMAX = data[1].x;
+			let NYMAX = data[1].y;
+
+			var img = new Image();
+			img.onload = function () {
+				ctx.drawImage(img, 0, 0, width, height);
+			};
+
+            // img.src = `
+            // https://cbdgmapa.pgi.gov.pl/arcgis/rest/services/geozagrozenia/sopo_obszary/MapServer/export?dpi=96&transparent=true&format=png32&layers=show%3A-1%2C-1%2C-1%2C0%2C1%2C2%2C3&bbox=${NXMIN}%2C${NYMIN}%2C${NXMAX}%2C${NYMAX}&bboxSR=2180&imageSR=2180&size=${width}%2C${height}&f=image
+            // `
+			
+			img.src = `
+			https://geoportal.pgi.gov.pl/arcgis/rest/services/sopoView_dynamic/MapServer/export?dpi=96&transparent=true&format=png8&bbox=${NXMIN}%2C${NYMIN}%2C${NXMAX}%2C${NYMAX}&bboxSR=%7B%22wkt%22%3A%22PROJCS%5B%5C%22PUWG_92%5C%22%2CGEOGCS%5B%5C%22GCS_ETRF_1989%5C%22%2CDATUM%5B%5C%22D_ETRF_1989%5C%22%2CSPHEROID%5B%5C%22WGS_1984%5C%22%2C6378137.0%2C298.257223563%5D%5D%2CPRIMEM%5B%5C%22Greenwich%5C%22%2C0.0%5D%2CUNIT%5B%5C%22Degree%5C%22%2C0.0174532925199433%5D%5D%2CPROJECTION%5B%5C%22Gauss_Kruger%5C%22%5D%2CPARAMETER%5B%5C%22False_Easting%5C%22%2C500000.0%5D%2CPARAMETER%5B%5C%22False_Northing%5C%22%2C-5300000.0%5D%2CPARAMETER%5B%5C%22Central_Meridian%5C%22%2C19.0%5D%2CPARAMETER%5B%5C%22Scale_Factor%5C%22%2C0.9993%5D%2CPARAMETER%5B%5C%22Latitude_Of_Origin%5C%22%2C0.0%5D%2CUNIT%5B%5C%22Meter%5C%22%2C1.0%5D%5D%22%7D&imageSR=%7B%22wkt%22%3A%22PROJCS%5B%5C%22PUWG_92%5C%22%2CGEOGCS%5B%5C%22GCS_ETRF_1989%5C%22%2CDATUM%5B%5C%22D_ETRF_1989%5C%22%2CSPHEROID%5B%5C%22WGS_1984%5C%22%2C6378137.0%2C298.257223563%5D%5D%2CPRIMEM%5B%5C%22Greenwich%5C%22%2C0.0%5D%2CUNIT%5B%5C%22Degree%5C%22%2C0.0174532925199433%5D%5D%2CPROJECTION%5B%5C%22Gauss_Kruger%5C%22%5D%2CPARAMETER%5B%5C%22False_Easting%5C%22%2C500000.0%5D%2CPARAMETER%5B%5C%22False_Northing%5C%22%2C-5300000.0%5D%2CPARAMETER%5B%5C%22Central_Meridian%5C%22%2C19.0%5D%2CPARAMETER%5B%5C%22Scale_Factor%5C%22%2C0.9993%5D%2CPARAMETER%5B%5C%22Latitude_Of_Origin%5C%22%2C0.0%5D%2CUNIT%5B%5C%22Meter%5C%22%2C1.0%5D%5D%22%7D&size=${width}%2C${height}&f=image
+			`
+
+			osuwiskaButton.style.background = "none";
+		});
+}
--- a/js/functions/position.js
+++ b/js/functions/position.js
@@ -0,0 +1,79 @@
+let posStarted = -1;
+const posIcon = document.createElement("img");
+function getPos() {
+	posStarted = -posStarted;
+
+	const canvas = document.getElementsByClassName("ol-unselectable")[0];
+
+	if (posStarted == 1) {
+		posIcon.src = chrome.runtime.getURL("icons/position_alt.png");
+		posButton.appendChild(posIcon);
+		canvas.addEventListener("click", drawPos, true);
+	} else {
+		posIcon.src = chrome.runtime.getURL("icons/position.png");
+		posButton.appendChild(posIcon);
+		canvas.removeEventListener("click", drawPos, true);
+	}
+}
+
+function drawPos(event) {
+	event.preventDefault();
+	if (event.target.className == "ol-unselectable") {
+		const bttm = document.getElementsByClassName("pl-2");
+		const x = bttm[0].innerHTML;
+		const y = bttm[1].innerHTML;
+		const canvas = document.getElementsByClassName("ol-unselectable")[0];
+		const ctx = canvas.getContext("2d");
+
+		const header = canvas.getBoundingClientRect().top;
+
+		ctx.beginPath();
+		ctx.arc(event.clientX, event.clientY - header, 3, 0, Math.PI * 2, true);
+		ctx.fill();
+
+		let URL = `https://epsg.io/trans?data=${x},${y}&s_srs=2177&t_srs=4326`;
+
+		fetch(URL, {
+			method: "GET",
+		})
+			.then((response) => response.json())
+			.then((data) => {
+				const x = data.x; //E
+				const y = data.y; //N
+
+				const degreesNorth = Math.floor(y);
+				const degreesEast = Math.floor(x);
+
+				const minutesNorth = Math.floor((y - degreesNorth) * 60);
+				const minutesEast = Math.floor((x - degreesEast) * 60);
+
+				const secondsNorth = Math.floor(
+					((y - degreesNorth) * 60 - minutesNorth) * 60
+				);
+				const secondsEast = Math.floor(
+					((x - degreesEast) * 60 - minutesEast) * 60
+				);
+
+				const positionText =
+					"" +
+					degreesNorth +
+					"°" +
+					minutesNorth +
+					"'" +
+					secondsNorth +
+					'"N ' +
+					degreesEast +
+					"°" +
+					minutesEast +
+					"'" +
+					secondsEast +
+					'"E';
+
+				//https://www.calculatorsoup.com/calculators/conversions/convert-decimal-degrees-to-degrees-minutes-seconds.php
+				ctx.font = "20px Arial";
+				ctx.fillText(positionText, event.clientX + 5, event.clientY - header);
+
+				navigator.clipboard.writeText(positionText);
+			});
+	}
+}
--- a/js/functions/section.js
+++ b/js/functions/section.js
@@ -0,0 +1,153 @@
+let array = [];
+let prevClick = [];
+let sectionStarted = -1;
+
+function catchMouse(event) {
+	event.preventDefault();
+	if (event.target.className == "ol-unselectable") {
+		const bttm = document.getElementsByClassName("pl-2");
+		const x = bttm[0].innerHTML;
+		const y = bttm[1].innerHTML;
+		array.push([x, y]);
+
+		const canvas = document.getElementsByClassName("ol-unselectable")[0];
+		const ctx = canvas.getContext("2d");
+		const header = canvas.getBoundingClientRect().top;
+
+		if (prevClick.length == 0) {
+			prevClick = [event.clientX, event.clientY - header];
+			ctx.beginPath();
+			ctx.arc(prevClick[0], prevClick[1], 3, 0, Math.PI * 2, true);
+			ctx.fill();
+		} else {
+			ctx.beginPath();
+			ctx.moveTo(prevClick[0], prevClick[1]);
+			prevClick = [event.clientX, event.clientY - header];
+			ctx.lineTo(prevClick[0], prevClick[1]);
+			ctx.stroke();
+			ctx.beginPath();
+			ctx.arc(prevClick[0], prevClick[1], 3, 0, Math.PI * 2, true);
+			ctx.fill();
+		}
+	}
+	sectionDraw.innerText = array.length;
+}
+
+function sectionDrawClick() {
+	sectionStarted = -sectionStarted;
+
+	const canvas = document.getElementsByClassName("ol-unselectable")[0];
+
+	if (sectionStarted == 1) {
+		sectionDraw.style.background = "crimson";
+		array = [];
+		canvas.addEventListener("click", catchMouse, true);
+		sectionDraw.innerText = array.length;
+	} else {
+		prevClick = [];
+		sectionDraw.style.background = "none";
+		canvas.removeEventListener("click", catchMouse, true);
+	}
+}
+
+function sectionDownloadClick() {
+	sectionDownload.style.background = "none";
+	// let url = 'https://mapy.geoportal.gov.pl/wss/ims/gp/nmt/profile3D/submitJob';
+
+	let arrayString = "";
+
+	for (let part of array) {
+		arrayString = arrayString + ";" + part;
+	}
+
+	let URL = `https://epsg.io/trans?data=${arrayString.slice(
+		1
+	)}&s_srs=2177&t_srs=2180`;
+
+	fetch(URL, {
+		method: "GET",
+	})
+		.then((response) => response.json())
+		.then((data) => {
+			let newArray = [];
+			let dataString = "[[";
+			for (let point of data) {
+				dataString = dataString + "[" + point.x + "," + point.y + "],";
+			}
+			dataString = dataString.slice(0, dataString.length - 1) + "]]";
+			body = `geometry=%7B%22paths%22%3A${dataString}%2C%22spatialReference%22%3A%7B%22wkid%22%3A2180%7D%7D&segment=1&token=CBlPCf6Y140rcxQkthN3wGDtsaEYDhdBILokv6JKaWDkbrhN9IO5D3ecyRKFH6fpxQ9z0SfB13m6dMQ4jtwDsQ..&f=json`;
+			bod = {
+				geometry:
+					'{"paths":' + dataString + ',"spatialReference":{"wkid":2180}}',
+				segment: 1,
+				token:
+					"CBlPCf6Y140rcxQkthN3wGDtsaEYDhdBILokv6JKaWDkbrhN9IO5D3ecyRKFH6fpxQ9z0SfB13m6dMQ4jtwDsQ..",
+				f: "json",
+			};
+
+			URL = "https://mapy.geoportal.gov.pl/wss/ims/gp/nmt/profile3D/submitJob";
+
+			fetch(URL, {
+				headers: {
+					"content-type": "application/x-www-form-urlencoded",
+				},
+				method: "POST",
+				body: body,
+			})
+				.then((response) => response.json())
+				.then((data) => {
+					let status = data.jobStatus;
+					let id = data.jobId;
+
+					URL = `https://mapy.geoportal.gov.pl/wss/ims/gp/nmt/profile3D/jobs/${id}?f=json`;
+					fetchStatus(id);
+				});
+		});
+}
+
+function fetchStatus(id) {
+	URL = `https://mapy.geoportal.gov.pl/wss/ims/gp/nmt/profile3D/jobs/${id}?f=json`;
+	fetch(URL)
+		.then((response) => response.json())
+		.then((data) => {
+			let status = data.jobStatus;
+			if (status == "succeeded") {
+				URL = `https://mapy.geoportal.gov.pl/wss/ims/gp/nmt/profile3D/jobs/${id}/results/result?f=json`;
+				fetch(URL)
+					.then((response) => response.json())
+					.then((data) => {
+						result = data.value.paths;
+
+						fetch("https://test.wastpol.pl/api/external", {
+							method: "POST",
+							body: result,
+						})
+							.then((response) => response.json())
+							.then((data) => {
+								window.open(data.url, "_blank");
+							});
+
+						const canvas =
+							document.getElementsByClassName("ol-unselectable")[0];
+						const ctx = canvas.getContext("2d");
+						const height = canvas.height;
+						i = 20;
+						for (let line of result[0]) {
+							ctx.beginPath();
+							ctx.arc(
+								i,
+								height - ((line[2] - 300) / 100) * 600,
+								2,
+								0,
+								Math.PI * 2,
+								true
+							);
+							ctx.fill();
+							i += 4;
+						}
+					});
+			} else {
+				fetchStatus(id);
+			}
+		});
+}
--- a/js/functions/test.js
+++ b/js/functions/test.js
@@ -0,0 +1,41 @@
+let posdStarted = -1;
+let minx = 1000000000000;
+let miny = 10000000000000;
+let maxx = 0;
+let maxy = 0;
+
+function getPos2() {
+	posdStarted = -posdStarted;
+	const canvas = document.getElementsByClassName("ol-unselectable")[0];
+
+	if (posStarted == 1) {
+		// posButton.style.background = "crimson";
+		canvas.addEventListener("mousemove", drawPos2, true);
+	} else {
+		// posButton.style.background = "none";
+		canvas.removeEventListener("mousemove", drawPos2, true);
+	}
+}
+
+function drawPos2(event) {
+	const canvas = document.getElementsByClassName("ol-unselectable")[0];
+
+	console.log("x, y");
+	event.preventDefault();
+	if (event.target.className == "ol-unselectable") {
+		const bttm = document.getElementsByClassName("pl-2");
+		const x = bttm[0].innerHTML;
+		const y = bttm[1].innerHTML;
+
+		if (minx > x) minx = x;
+		if (miny > y) miny = y;
+		if (maxx < x) maxx = x;
+		if (maxy < y) maxy = y;
+		console.log(minx, miny, maxx, maxy);
+		//6695449.20 5500500.60 6695784.09 5500663.00
+		// X_MAX: "6695784.399102096"
+		// X_MIN: "6695449.225719332"
+		// Y_MAX: "5500663.0551045155"
+		// Y_MIN: "5500500.136691383"
+	}
+}