Unable to plot a polygon on Map using user's input.

[TheKingsSlayer007]

Hello Everyone, 

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.

This is my code which i am using for calculating the vertices:

 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 . ?

[JoelBennett]

One of the main problems is that your measurements are in feet, but the coordinate system units for Web Mercator are meters.  Even then, one might expect 100 meters to be 328.084 feet, but that's not what the screenshot shows either.

I've used the logic below to generate rectangles based upon user-entered dimensions, and it works.  The "getRectangle" function is the main one, while "getMapDistance" is just a helper.  I suppose the efficiency of this particular workflow could be improved since the circle gets created twice, but it is what it is.

function getMapDistance(mapPoint, radiusInFeet, ordinate) {
	var circle = new Circle({
		center: mapPoint,
		geodesic: true,
		radius: radiusInFeet,
		radiusUnit: "feet"
	});

	return circle.extent[ordinate + "max"] - mapPoint[ordinate];
}

function getRectangle(length, width, centerPoint) {
	var mapLength = getMapDistance(centerPoint, length / 2, "x");
	var mapWidth = getMapDistance(centerPoint, width / 2, "y");

	var xmin = centerPoint.x - mapLength;
	var ymin = centerPoint.y - mapWidth;
	var xmax = centerPoint.x + mapLength;
	var ymax = centerPoint.y + mapWidth;

	return Polygon.fromExtent(new Extent({xmin:xmin, ymin:ymin, xmax:xmax, ymax:ymax, spatialReference:centerPoint.spatialReference}));
}