Unable to find distance from selected coordinates to center coordinate
617
7
11-21-2023 08:42 PM
by
Hello ,
i am doing a requirement , i.e in arcgis/navigation map i have the text field that enters the radius and go button for generating the circle as per the given radius.
here green point is my center point , red is selected point(should be one or many number of points).
so firstly i will select some points on the map and i will enter the radius , click on Go , so when i click on Go button the circle should formed according to radius & should display the distance of the selected points to the center point in the table.
the circle is forming but i am facing the issue of distance between the selected points to center point was not calculating & repeatedly throwing the errors ,how can i solve this errors and display the distance.
Error is Exactly at this line
const distance = geometryEngine.distance(centerGeom, point, "kilometers");
this is my code, and please refer my attachments for the errors
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Point Selection </title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#resultsTable {
position: absolute;
bottom: 10px;
right: 10px;
background-color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="row">
<div class="col-md-5"></div>
<div id="radius" class="col-md-2 p-0">
<input id="radiusText" type="text" placeholder="Enter radius in meters" class="form-control ">
</div>
<div class="col-md-1 p-0">
<button id="Go" class="btn btn-primary m-0 rounded-pill">Go</button>
</div>
</div>
<div id="viewDiv"></div>
<div id="resultsTable"></div>
<script>
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/GraphicsLayer", "esri/Graphic", "esri/geometry/Circle", "esri/geometry/geometryEngine", "esri/geometry/Point"],
function (esriConfig, Map, MapView, GraphicsLayer, Graphic, Circle, geometryEngine, Point) {
esriConfig.apiKey = "AAPK2955722526784555b96cb5321c217429D8QiaXXXRgT_2W95DJJAIzOvVRo_1pJgXLisk5URWZuK9bQgM3B8MwcfkzH6o-Kz";
const map = new Map({
basemap: "arcgis/navigation"
});
const view = new MapView({
map: map,
center: [78.4867, 17.3850], // Hyderabad coordinates
zoom: 11,
container: "viewDiv"
});
const selectedPoints = new GraphicsLayer();
map.add(selectedPoints);
view.on("click", function (event) {
const point = {
type: "point",
longitude: event.mapPoint.longitude,
latitude: event.mapPoint.latitude
};
console.log("Latitude: " + point.latitude + "\nLongitude: " + point.longitude);
const pointGraphic = new Graphic({
geometry: point,
symbol: {
type: "simple-marker",
color: [255, 0, 0],
size: 8
}
});
selectedPoints.add(pointGraphic);
});
const circleLayer = new GraphicsLayer();
map.add(circleLayer);
let circleGraphic;
$("#Go").on("click", function () {
var radiusInKilometers = $("#radiusText").val();
console.log("Radius Given :" + radiusInKilometers);
if (!isNaN(radiusInKilometers)) {
const hyderabadCenter = {
type: "point",
longitude: 78.3772,
latitude: 17.4421,
spatialReference: { wkid: 4326 } //WGS 84
};
//Adding Graphic for the center point
const centerPointLayer = new GraphicsLayer();
map.add(centerPointLayer);
const centerPointGraphic = new Graphic({
geometry: hyderabadCenter,
symbol: {
type: "simple-marker",
color: [0, 255, 0], //Green
size: 8
}
});
centerPointLayer.add(centerPointGraphic);
const circumference = 2 * Math.PI * radiusInKilometers;
console.log("Expected Circumference: " + circumference.toFixed(2) + " km");
console.log("Latitude: " + hyderabadCenter.latitude + "\nLongitude: " + hyderabadCenter.longitude);
if (circleGraphic) {
circleLayer.remove(circleGraphic);
};
const circle = new Circle({
center: hyderabadCenter,
radius: radiusInKilometers, //Converting to meters
radiusUnit: "kilometers",
onRoad: true
});
circleGraphic = new Graphic({
geometry: circle,
symbol: {
type: "simple-fill",
color: [255, 0, 0, 0.2], // Red with 20% transparency
outline: {
color: [255, 0, 0],
width: 2
}
}
});
circleLayer.add(circleGraphic);
// const withinCircleGraphics = selectedPoints.graphics.filter(function (pointGraphic) {
// const pointGeometry = pointGraphic.geometry;
// return geometryEngine.intersects(circle, pointGeometry);
// });
// displayResultsTable(withinCircleGraphics, hyderabadCenter);
displayDistances(selectedPoints.graphics, hyderabadCenter);
} else {
alert("Please enter a valid radius");
}
});
function displayDistances(selectedGraphics, centerPoint) {
const resultsTable = $("#resultsTable");
// Create center point geometry
const centerGeom = new Point({
longitude: centerPoint.longitude,
latitude: centerPoint.latitude,
spatialReference: { wkid: 4326 }
});
resultsTable.empty();
resultsTable.append("<h5>Distances</h5>");
resultsTable.append("<table class='table table-bordered'><thead><tr><th>Point</th><th>Distance (Km)</th></tr></thead><tbody>");
selectedGraphics.forEach((graphic) => {
const point = new Point({
longitude: graphic.geometry.longitude,
latitude: graphic.geometry.latitude,
spatialReference: { wkid: 4326 }
});
const distance = geometryEngine.distance(centerGeom, point, "kilometers");
resultsTable.append("<tr><td>(" + point.longitude.toFixed(4) + "," + point.latitude.toFixed(4) + ")</td><td>" + distance.toFixed(2) + "</td></tr>")
});
resultsTable.append("</tbody></table>");
}
});
</script>
</body>
</html>
