How do get longitude and latitude for each vertex of each polygon in JavaScript?

SiyabongaKubeka — Tue, 01 Jun 2021 09:23:32 GMT

Hi Everyone

I need you assistance or advice, I have a webmap and I can draw multiple polygons on it. I want to be able to get the coordinates of each vertex (corner or ring) of each polygon. Below is the javascript code that is currently running.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Sketch temporary geometries - 4.9</title>

#topbar {
background: #fff;
position: absolute;
top: 15px;
right: 15px;
padding: 10px;
}

.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #D3D3D3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}

.active {
background: #0079c1;
color: #e4e4e4;
}

</style>

let editFeature, editGraphic, highlight, featureForm, editArea, attributeEditing, updateInstructionDiv;
esriConfig.portalUrl = "https://portal.environment.gov.za/portal";

const featureLayer = new FeatureLayer({
url: "https://portal.environment.gov.za/server/rest/services/Boundary/Wards/MapServer/0",

});

// GraphicsLayer to hold graphics created via sketch view model
const graphicsLayer = new GraphicsLayer({
id: "tempGraphics"
});

var webmap = new WebMap({
layers: [graphicsLayer],
portalItem: {
id: "04582be14885483da48f29398960f653"
}

});

var view = new MapView({
container: "viewDiv",
map: webmap

});

const polygonSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: "rgba(138,43,226, 0.8)",
style: "solid",
outline: {
color: "white",
width: 1
}
};

view.when(function () {
// create a new sketch view model
const sketchViewModel = new SketchViewModel({
view,
layer: graphicsLayer,
polygonSymbol
});

//

setUpClickHandler();

// ***********************************************************
// Call FeatureLayer.applyEdits() with specified params.
// ***********************************************************
function applyEdits(params) {
featureLayer.applyEdits(params).then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (editsResult.addFeatureResults.length > 0) {
const objectId = editsResult.addFeatureResults[0].objectId;
selectFeature(objectId);
}
})
.catch(function(error) {
console.log("===============================================");
console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
error.message);
console.log("error = ", error);
});
}

// Listen to create-complete event to add a newly created graphic to view
sketchViewModel.on("create-complete", addGraphic);

// Listen the sketchViewModel's update-complete and update-cancel events
sketchViewModel.on("update-complete", updateGraphic);
sketchViewModel.on("update-cancel", updateGraphic);

// called when sketchViewModel's create-complete event is fired.
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol

});

graphicsLayer.add(graphic);

const edits = { //Fire the addFeatures function using the completed graphic
addFeatures: [graphic]
};
applyEdits(edits);

console.log(graphic);
}

// Runs when sketchViewModel's update-complete or update-cancel
// events are fired.
function updateGraphic(event) {
// Create a new graphic and set its geometry event.geometry
var graphic = new Graphic({
geometry: event.geometry,
symbol: editGraphic.symbol
});
graphicsLayer.add(graphic);

// set the editGraphic to null update is complete or cancelled.
editGraphic = null;
}

// set up logic to handle geometry update and reflect the update on "graphicsLayer"
function setUpClickHandler() {
view.on("click", function (event) {
view.hitTest(event).then(function (response) {
var results = response.results;
if (results.length > 0) {
for (var i = 0; i < results.length; i++) {
// Check if we're already editing a graphic
if (!editGraphic && results[i].graphic.layer.id === "tempGraphics") {
// Save a reference to the graphic we intend to update
editGraphic = results[i].graphic;

// Remove the graphic from the GraphicsLayer
// Sketch will handle displaying the graphic while being updated
graphicsLayer.remove(editGraphic);
sketchViewModel.update(editGraphic);
break;
}
}
}
});
});
}

// activate the sketch to create a polygon
var drawPolygonButton = document.getElementById("polygonButton");
drawPolygonButton.onclick = function () {
// set the sketch to create a polygon geometry
sketchViewModel.create("polygon");
setActiveButton(this);
};

// reset button
document.getElementById("resetBtn").onclick = function () {
sketchViewModel.reset();
graphicsLayer.removeAll();
setActiveButton();
};

</script>
</head>

</html>

On my previous code I can get this information but I can not draw multiple polygons on it. Please see code below:

.esri-sketch__section.esri-sketch__tool-section:last-of-type {
display: none;
}

.esri-sketch__section.esri-sketch__tool-section:nth-child(2) {
border-right: none;
}
button[title="Reshape"]{
display: none;
}
button[title="Transform"]{
display: none;
}
</style>
<script>
var lon;
var lat;
var crmLatitude;
var crmLongitude;
var latlon;
var provinces;
var municipalities;
var districts;
var wards;
var showWards = [];
var testVariable;
require([
"esri/Map",
"esri/views/MapView",
"esri/WebMap",
"esri/layers/FeatureLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/config",
"esri/widgets/Sketch",
"esri/layers/GraphicsLayer",
"esri/widgets/ScaleBar"],

function(Map, MapView, WebMap, FeatureLayer, QueryTask, Query,
esriConfig, Sketch, GraphicsLayer, ScaleBar) {
esriConfig.portalUrl = "https://portal.environment.gov.za/portal";

const featureLayerUrl = 'https://portal.environment.gov.za/server/rest/services/Boundary/Wards/MapServer/0';
var webmap = new WebMap({
portalItem: {
id: "04582be14885483da48f29398960f653"
}
});

var graphicsLayer = new GraphicsLayer();

var view = new MapView({
map: webmap,
container: "viewDiv",
popup: null
});

var featureLayer = new FeatureLayer({
url: featureLayerUrl
});

webmap.add(featureLayer);

webmap.layers.add(graphicsLayer);

var sketch = new Sketch({
layer: graphicsLayer,
view: view,
availableCreateTools: ["polygon"],
creationMode: "update",

});

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

var scaleBar = new ScaleBar({
view: view
});
// Add widget to the bottom left corner of the view
view.ui.add(scaleBar, {
position: "bottom-left"
});

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);
lat = event.graphic.geometry.latitude;
lon = event.graphic.geometry.longitude;
zoomLevel = view.zoom;
for (var i = 0; i < gra.geometry.rings.length; i++){
for (var p = 0; p < gra.geometry.rings[i].length; p++){
crmLatitude = String(gra.geometry.getPoint(i, p));
crmLongitude = String(gra.geometry.getPoint(i, p));
var LatLon = String(gra.geometry.rings[i][p]);
console.log(LatLon);
latlon = LatLon;
}
}
debugger;
}
else{
alert("please zoom in");
event.graphic.layer.remove(event.graphic);
}
}

});

view.on('click', function(event){
var queryTask = new QueryTask({
url: featureLayerUrl
});
var query = new Query();
query.geometry = view.toMap(event);
query.distance = 0;
query.units = "meters";
query.spatialRelationship = "intersects";
query.returnGeometry = true;
query.outFields = [ "PROVINCE", "DCS12_NAME", "S12_NAME", "WARD_NO" ];

queryTask.execute(query).then(function(results){

var feat = results.features[0];
provinces = feat.attributes.PROVINCE;
wards = feat.attributes.WARD_NO;
districts = feat.attributes.DCS12_NAME;
municipalities = feat.attributes.S12_NAME

showWards.push(wards);
var xwards = showWards.toString();

console.log(provinces);
console.log(wards);
console.log(districts);
console.log(municipalities);

console.log(xwards);

//Call to CRM to populate the lookup field for Province

debugger;

window.parent.Xrm.WebApi.online.retrieveMultipleRecords("dea_province", "?$select=dea_name,dea_provinceid&$filter=dea_name eq '" + provinces + "'").then(
function success(results) {
debugger;
for (var i = 0; i < results.entities.length; i++) {
var dea_name = results.entities[i]["dea_name"];
var dea_provinceid = results.entities[i]["dea_provinceid"];

//Populate lookup
var lookupValue = new Array();
lookupValue[0] = new Object();
lookupValue[0].id = dea_provinceid; // GUID of the lookup id
lookupValue[0].name = dea_name; // Name of the lookup
lookupValue[0].entityType = "dea_province"; //Entity Type of the lookup entity
window.parent.Xrm.Page.getAttribute("dea_province").setValue(lookupValue);
}
},
function(error) {
Xrm.Utility.alertDialog(error.message);
}
);

//Call to CRM to populate the lookup field for the Local Municipality

window.parent.Xrm.WebApi.online.retrieveMultipleRecords("dea_localmunicipality", "?$select=dea_localmunicipalityid,dea_name&$filter=dea_name eq '" + municipalities + "'").then(
function success(results) {
for (var i = 0; i < results.entities.length; i++) {
var dea_localmunicipalityid = results.entities[i]["dea_localmunicipalityid"];
var dea_name = results.entities[i]["dea_name"];

//Populate lookup
var lookupValue = new Array();
lookupValue[0] = new Object();
lookupValue[0].id = dea_localmunicipalityid; // GUID of the lookup id
lookupValue[0].name = dea_name; // Name of the lookup
lookupValue[0].entityType = "dea_localmunicipality"; //Entity Type of the lookup entity
window.parent.Xrm.Page.getAttribute("dea_localmunicipality").setValue(lookupValue);
}
},
function(error) {
Xrm.Utility.alertDialog(error.message);
}
);

//Call to CRM to populate the lookup field for District Municipality

</script>
<meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta></head>
</head>
<body style="overflow-wrap: break-word;">
<div id="viewDiv"></div>

</body></html>

Please assist.

Kind Regards

Siyabonga Kubeka

Re: How do get longitude and latitude for each vertex of each polygon in JavaScript?

BlakeTerhune — Tue, 01 Jun 2021 14:01:10 GMT

Try Geometry toJSON()

For a regular 2D polygon, you'll get something like this

{ "rings" : [[[-97.06138,32.837],[-97.06133,32.836],[-97.06124,32.834],[-97.06127,32.832], [-97.06138,32.837]],[[-97.06326,32.759],[-97.06298,32.755],[-97.06153,32.749], [-97.06326,32.759]]], "spatialReference" : {"wkid" : 4326} }

Re: How do get longitude and latitude for each vertex of each polygon in JavaScript?

SiyabongaKubeka — Wed, 02 Jun 2021 20:23:41 GMT

Hi All

I came right, I hat to remove this line : event.graphic.layer.removeAll();

topic How do get longitude and latitude for each vertex of each polygon in JavaScript? in ArcGIS JavaScript Maps SDK Questions

How do get longitude and latitude for each vertex of each polygon in JavaScript?

Re: How do get longitude and latitude for each vertex of each polygon in JavaScript?

Re: How do get longitude and latitude for each vertex of each polygon in JavaScript?