Community
Select to view content in your preferred language

How to get the coordinates of each vertex of a polygon?

2136
4
05-06-2020 03:10 AM
SiyabongaKubeka
by
Regular Contributor
‎05-06-2020 03:10 AM

Hi All

I am using a webmap. On it I can drop a point or draw a polygon. I can get the coordinates of the point. Now suppose I am drawing a polygon, how can I get the coordinates of each vertex? Please see my code below:

<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>

<title>GIS Map for CRM</title>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.14/"></script>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
//alert("Project ID is equals to 0");
require(["esri/views/MapView",
"esri/WebMap", "esri/config",
"esri/widgets/Sketch",
"esri/layers/GraphicsLayer"],

function (MapView, WebMap, esriConfig, Sketch, GraphicsLayer) {

esriConfig.portalUrl = "https://portal.environment.gov.za/portal";
var webmap = new WebMap({
portalItem: {
id: "04582be14885483da48f29398960f653"
}
});

var graphicsLayer = new GraphicsLayer();

var view = new MapView({
map: webmap,
//zoom: 14,
container: "viewDiv"
});

//var symbol = {
// type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
// style: "circle",
// color: "blue",
// size: "8px", // pixels
// outline: { // autocasts as new SimpleLineSymbol()
// color: [255, 255, 0],
// width: 1 // points
// }
//};

webmap.layers.add(graphicsLayer);

var sketch = new Sketch({
layer: graphicsLayer,
view: view,
//symbol: symbol,
creationMode: "update",
//availableCreateTools: ["point"]
//container: "viewDiv"
});

view.ui.add(sketch, {
position: "top-right"
});

//Listen to sketch widget's create event.

sketch.on('create', function (event) {
// check if the create event's state has changed to complete indicating
// the graphic create operation is completed.
if (event.state === "complete") {

if (view.zoom >= 11) {
let gra = event.graphic.clone();
event.graphic.layer.removeAll();
gra.symbol.color = "red";
gra.layer.add(gra);
console.log(view.zoom);
console.log("X = ", gra.geometry.x);
console.log("Y = ", gra.geometry.y);
console.log("Lat = ", event.graphic.geometry.latitude);
console.log("Long = ", event.graphic.geometry.longitude);
//lati = event.graphic.geometry.latitude;
//longi = event.graphic.geometry.longitude;
zoomLevel = view.zoom;
debugger;
}
else {
alert("please zoom in");
event.graphic.layer.remove(event.graphic);
}
}
});
});
</script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>

0 Kudos
4 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-06-2020 05:25 AM

You have to loop through the rings of the polygon.

for (var i = 0; i < gra.geometry.rings.length; i++){
  for (var p = 0; p < gra.geometry.rings[i].length; p++){
    var LatLon = String(gra.geometry.rings[i][p]);‍‍‍
    console.log(LatLon);
  }
}‍‍‍‍‍‍
SiyabongaKubeka
by
Regular Contributor
‎05-06-2020 11:50 PM

Thank you very much Robert, it works.

0 Kudos
SaiCharanKoppula
by
New Contributor
‎07-07-2022 12:48 AM

I don't get the correct format of longitude and latitude even after using the method provided above

Screenshot 2022-07-07 at 1.18.43 PM.png

 

0 Kudos
GerardoSevilla
by
Emerging Contributor
‎11-20-2023 06:29 AM

Polygon is using spatial  Web Mercator coordinate reference system 3857. You will have to transform these coordinates from Web Mercator system to World Geodesic system 4326. I used the following code:

 

for (var i = 0; i < gra.geometry.rings.length; i++){
  for (var p = 0; p < gra.geometry.rings[i].length; p++){
    let [x, y] = gra.geometry.rings[i][p];
    let lngLat = webMercatorUtils.xyToLngLat(x,y); //get an array with lng,lat
    vertices.push(lngLat);
  }
}‍‍‍‍‍‍

 

 

0 Kudos