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

SiyabongaKubeka · ‎06-01-2021

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

BlakeTerhune · ‎06-01-2021

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}
}

SiyabongaKubeka · ‎06-02-2021

Hi All

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