I am trying to add a polygon graphic on the map . But the catch is i am trying to take user's input for its dimensions and then when i click on the map ,my code will calculate all the vertices and plot it on the map. The problem is, suppose i am taking user's input as 100 feet as length and 100 feet as breadth . When the polygon gets drawn, the actual area and dimensions are different then what i want.
My map's spatial reference is WGS85 and wkid is 102100.
let lengthInput = document.getElementById("lengthInput") as HTMLInputElement;
let breadthInput = document.getElementById("breadthInput") as HTMLInputElement;
// Check if input elements are not null
if (lengthInput && breadthInput) {
// Get length and breadth values
const lengthInFeet = parseFloat(lengthInput.value) // Parse value as a float
const breadthInFeet = parseFloat(breadthInput.value); // Parse value as a float
// Check if input values are valid numbers
if (!isNaN(lengthInFeet) && !isNaN(breadthInFeet)) {
// Continue with polygon drawing logic
const clickPoint = event.mapPoint;
const halfLength = Math.abs(lengthInFeet) / 2;
const halfBreadth = Math.abs(breadthInFeet) / 2;
const lengthSign = lengthInFeet >= 0 ? 1 : -1;
const breadthSign = breadthInFeet >= 0 ? 1 : -1;
const vertices = [
[
clickPoint.x - halfLength * lengthSign,
clickPoint.y - halfBreadth * breadthSign,
],
[
clickPoint.x + halfLength * lengthSign,
clickPoint.y - halfBreadth * breadthSign,
],
[
clickPoint.x + halfLength * lengthSign,
clickPoint.y + halfBreadth * breadthSign,
],
[
clickPoint.x - halfLength * lengthSign,
clickPoint.y + halfBreadth * breadthSign,
],
[
clickPoint.x - halfLength * lengthSign,
clickPoint.y - halfBreadth * breadthSign,
], // Repeat first point to close the polygon
];}}
i am also attaching some screenshots for better understanding .
As you guys can see took input 100feet as length and 100 feet as breadth but when polygon is drawn i am getting different. Can you please tell me what i am doing wrong here . ?