We are facing an issue to bind the selected coordinates of polygon using ArcGIS Javascript library on page load. The same issue we are facing with all geometry types. Please help us to bind the selected coordinates. We are able to find out the coordinates and save them in database. Please help me to solve this issue. This is urgent.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Geometry Service: Label Points</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require(["dojo/dom",
"dojo/dom-attr",
"dojo/_base/array",
"esri/Color",
"dojo/number",
"dojo/parser",
"dijit/registry",
"esri/config",
"esri/map",
"esri/graphic",
"esri/tasks/GeometryService",
"esri/tasks/BufferParameters",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/Font",
"esri/symbols/TextSymbol",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane" ], function(dom, domAttr, array, Color, number, parser, registry, esriConfig, Map, Graphic, GeometryService, BufferParameters, Draw,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Font, TextSymbol) {
var map, toolbar, geometryService;
parser.parse();
// create the map control
map = new Map("mapDiv", {
basemap: "streets",
center: [-117.215, 34.05],
zoom: 13,
showAttribution: false
}
);
// configure the proxy url for the application
esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.defaults.io.alwaysUseProxy = false;
// create a toolbar for the map
toolbar = new Draw(map);
toolbar.activate(Draw.POLYGON);
toolbar.on("draw-complete", drawPolygon);
geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
function drawPolygon()
{
var geo='{"type":"polygon","rings":[[[-13056817.732730055,4038154.8595605],[-13052174.183261735,4037715.346647861],[-13056416.43833156,4036377.698652872],[-13056817.732730055,4038154.8595605]]],"_ring":0,"spatialReference":{"wkid":102100,"latestWkid":3857}}';
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0]), 2),
new Color([0, 0, 255, 0.5]));
var grap = new Graphic(geo, symbol);
console.log(grap);
map.graphics.add(grap);
geometryService.simplify([geo], getLabelPoints);
}
function getLabelPoints(geometries) {
if (geometries[0].rings.length > 0) {
geometryService.labelPoints(geometries, function(labelPoints) { // callback
toolbar.deactivate();
map.showZoomSlider();
var font = new Font("20px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER);
array.forEach(labelPoints, function(labelPoint) {
// create a text symbol
var textSymbol = new TextSymbol(
"X: " + number.format(labelPoint.x) + ", Y: " +
number.format(labelPoint.y),
font, new Color([0, 0, 0]));
var labelPointGraphic = new Graphic(labelPoint, textSymbol);
// add the label point graphic to the map
map.graphics.add(labelPointGraphic);
});
});
} else {
alert("Invalid Polygon - must have at least 3 points");
}
} });
</script>
</head>
<body class="nihilo">
<div id="mapDiv"></div>
</body>
</html>Please let me know, where is the issue and help me to bind this with selected coordinates.
Thanks in advance.
