How to draw multiple polygons on an Esri map and get the coordinates of each vertex?

SiyabongaKubeka — Thu, 20 May 2021 12:44:47 GMT

Hi All

I am currently using the code below to display the esri map, draw a polygon and extract data from the map, i.e the coordinates of each vertex of the polygon. I am using JavaScript. Now I want to be able to draw multiple polygons. I have added the "continuous" on creationMode, but I can not add multiple polygons, please assist.

.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: "continuous",

});

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>

@ RobertScheitlin__GISP

RobertScheitlin__GISP

topic How to draw multiple polygons on an Esri map and get the coordinates of each vertex? in ArcGIS JavaScript Maps SDK Questions

How to draw multiple polygons on an Esri map and get the coordinates of each vertex?