topic Re: Generate polygon ring from user input coordinates in ArcGIS JavaScript Maps SDK Questions

Generate polygon ring from user input coordinates

MuhammadFayaz — Fri, 04 Nov 2016 13:36:39 GMT

Hello,

I want to develop a small application that get coordinates from user as input and generate a list of it. then i want to show this as a polygon on the map.

I am unable to push the list to the polygon ring. Anybody can help please

I application is attached!

Re: Generate polygon ring from user input coordinates

Anonymous User — Fri, 04 Nov 2016 13:56:29 GMT

You can try this one..
but its need to be more specific

Default Editor

Re: Generate polygon ring from user input coordinates

MuhammadFayaz — Fri, 04 Nov 2016 14:06:32 GMT

Dear Avinash,

I cannot reach to source of your sample, can you share!

Re: Generate polygon ring from user input coordinates

Anonymous User — Fri, 04 Nov 2016 14:50:29 GMT

ArcGIS API for JavaScript Sandbox

Re: Generate polygon ring from user input coordinates

RobertScheitlin__GISP — Fri, 04 Nov 2016 15:43:13 GMT

Muhammad,

Here is your code working

Re: Generate polygon ring from user input coordinates

MuhammadFayaz — Fri, 04 Nov 2016 20:15:38 GMT

Robert,

Thank you very much for your time. This was exactly what i need.. Thanks again!

Re: Generate polygon ring from user input coordinates

MuhammadFayaz — Fri, 04 Nov 2016 20:16:41 GMT

Thank you Avinash, Robert did it for me...

Re: Generate polygon ring from user input coordinates

RobertScheitlin__GISP — Fri, 04 Nov 2016 20:22:41 GMT

Muhammed,

You might want to mark my reply as the correct answer instead of yours.

Re: Generate polygon ring from user input coordinates

MuhammadFayaz — Fri, 04 Nov 2016 20:50:56 GMT

Ok done, that was a mistake

Re: Generate polygon ring from user input coordinates

MuhammadFayaz — Wed, 16 Nov 2016 06:17:39 GMT

Dear Robert,

What if i want to use UTM projected coordinates to place graphics. I tried to change the spatialReference to { wkid: 32638 }. But it is not working..

It might be easy but i am new to custom development.. Any help!

Re: Generate polygon ring from user input coordinates

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:32:46 GMT

Muhammed,

It would look like this then:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Coordinate to Map</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
    <script src="https://js.arcgis.com/4.1/"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!--########## Map ###########-->

    <script>
        var app = {};
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/widgets/Popup",
            "esri/geometry/Polygon",
            "esri/symbols/SimpleFillSymbol",
            "esri/tasks/GeometryService",
            "esri/tasks/support/ProjectParameters",
            "esri/config",
            "esri/Graphic", "dojo/dom", "dojo/on", "dojo/domReady!"

        ], function(
            Map, SceneView, Popup, Polygon,
            SimpleFillSymbol,
            GeometryService,
            ProjectParameters,
            esriConfig,
            Graphic, dom, on
        ) {

            var map = new Map({
                basemap: "hybrid",
                ground: "world-elevation"
            });

            var view = new SceneView({
                center: [43.940626, 26.346404],
                container: "viewDiv",
                map: map,
                zoom: 12,
                tilt: 30
            });

            esriConfig.geometryServiceUrl = "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer";

            view.on("click", function(event) {
                view.popup.location = event.mapPoint;
                // Displays the popup
                view.popup.visible = true;
            });

            var polAtt = {
                Name: "Keystone Pipeline",
                Owner: "TransCanada",
                Length: "3,456 km"
            };

            /************************
             * Create a polygon graphic
             ************************/
            function showPolygon() {
                // Create a polygon geometry
                var polygon = new Polygon({
                    rings: [
                        [43.935018, 26.365905],
                        [43.958770, 26.366693],
                        [43.961578, 26.348339],
                        [43.933733, 26.342883]
                    ]
                });
                console.info(polygon.toJSON());

                // Create a symbol for rendering the graphic
                var fillSymbol = new SimpleFillSymbol({
                    color: [227, 139, 79, 0.8],
                    outline: { // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 255],
                        width: 1
                    }
                });
                /*******************************************
                 * Create a new graphic and add the geometry,
                 ******************************************/
                var polygonGraphic = new Graphic({
                    geometry: polygon,
                    symbol: fillSymbol,
                    attributes: polAtt,
                    popupTemplate: { // autocasts as new PopupTemplate()
                        title: "{Name}",
                        content: [{
                            type: "fields",
                            fieldInfos: [{
                                fieldName: "Name"
                            }, {
                                fieldName: "Owner"
                            }, {
                                fieldName: "Length"
                            }]
                        }]
                    }
                });
                view.graphics.addMany([polygonGraphic]);
                view.goTo([polygonGraphic]);
            }

            app.addUserPolygon = function(json) {
                console.info(json);
                //return;
                view.graphics.removeAll();
                // Create a symbol for rendering the graphic
                var fillSymbol = new SimpleFillSymbol({
                    color: [227, 139, 79, 0.8],
                    outline: { // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 255],
                        width: 1
                    }
                });
                // create the polygon and project it to the maps SR
                var poly =  new Polygon({
                  rings: json,
                  spatialReference: { wkid: 32638 }
                });
                var params = new ProjectParameters({
                  geomerties: [poly],
                  outSR: map.spatialReference
                });
                var geomSer = new GeometryService(esriConfig.geometryServiceUrl);
                geomSer.project(params).then(lang.hitch(this, function(geoms){
                  var polygonGraphic = new Graphic({
                      geometry: geoms[0],
                      symbol: fillSymbol,
                      attributes: polAtt,
                      popupTemplate: { // autocasts as new PopupTemplate()
                          title: "{Name}",
                          content: [{
                              type: "fields",
                              fieldInfos: [{
                                  fieldName: "Name"
                              }, {
                                  fieldName: "Owner"
                              }, {
                                  fieldName: "Length"
                              }]
                          }]
                      }
                  });
                  view.graphics.addMany([polygonGraphic]);
                  view.goTo([polygonGraphic]);
                }));
            }

            // Add the graphics to the view's graphics layer
            on(dom.byId("showBtn"), "click", showPolygon);
        });
    </script>


</head>
<body>
    <h1 id="heading">أحداثيات الى خريطة</h1>
    <h4> Please Enter Geographic Coordinates Clockwise! </h4>
    <input type="text" id="coord">
    <input type='button' onclick="changeText2(); clearCoord();" value='Submit' />
    <p>Coordinates List:</p>
    <ol id="demo"></ol>
    <button id="showBtn">Show Polygon on Map</button>
    <div id="viewDiv"></div>
    <script src="listCoord.js"></script>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Generate polygon ring from user input coordinates

MuhammadFayaz — Thu, 17 Nov 2016 06:49:16 GMT

Dear Robert,

I tried it but got the error "Cannot read property 'wkid' of undefined".

Re: Generate polygon ring from user input coordinates

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:32:50 GMT

Muhammad,

Sorry I see the mistake:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Coordinate to Map</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
    <script src="https://js.arcgis.com/4.1/"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!--########## Map ###########-->

    <script>
        var app = {};
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/widgets/Popup",
            "esri/geometry/Polygon",
            "esri/symbols/SimpleFillSymbol",
            "esri/tasks/GeometryService",
            "esri/tasks/support/ProjectParameters",
            "esri/config",
            "esri/Graphic", "dojo/dom", "dojo/on", "dojo/_base/lang",
            "dojo/domReady!"

        ], function(
            Map, SceneView, Popup, Polygon,
            SimpleFillSymbol,
            GeometryService,
            ProjectParameters,
            esriConfig,
            Graphic, dom, on, lang
        ) {

            var map = new Map({
                basemap: "hybrid",
                ground: "world-elevation"
            });

            var view = new SceneView({
                center: [43.940626, 26.346404],
                container: "viewDiv",
                map: map,
                zoom: 12,
                tilt: 30
            });

            esriConfig.geometryServiceUrl = "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer";

            view.on("click", function(event) {
                view.popup.location = event.mapPoint;
                // Displays the popup
                view.popup.visible = true;
            });

            var polAtt = {
                Name: "Keystone Pipeline",
                Owner: "TransCanada",
                Length: "3,456 km"
            };

            /************************
             * Create a polygon graphic
             ************************/
            function showPolygon() {
                // Create a polygon geometry
                var polygon = new Polygon({
                    rings: [
                        [43.935018, 26.365905],
                        [43.958770, 26.366693],
                        [43.961578, 26.348339],
                        [43.933733, 26.342883]
                    ]
                });
                console.info(polygon.toJSON());

                // Create a symbol for rendering the graphic
                var fillSymbol = new SimpleFillSymbol({
                    color: [227, 139, 79, 0.8],
                    outline: { // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 255],
                        width: 1
                    }
                });
                /*******************************************
                 * Create a new graphic and add the geometry,
                 ******************************************/
                var polygonGraphic = new Graphic({
                    geometry: polygon,
                    symbol: fillSymbol,
                    attributes: polAtt,
                    popupTemplate: { // autocasts as new PopupTemplate()
                        title: "{Name}",
                        content: [{
                            type: "fields",
                            fieldInfos: [{
                                fieldName: "Name"
                            }, {
                                fieldName: "Owner"
                            }, {
                                fieldName: "Length"
                            }]
                        }]
                    }
                });
                view.graphics.addMany([polygonGraphic]);
                view.goTo([polygonGraphic]);
            }

            app.addUserPolygon = function(json) {
                console.info(json);
                //return;
                view.graphics.removeAll();
                // Create a symbol for rendering the graphic
                var fillSymbol = new SimpleFillSymbol({
                    color: [227, 139, 79, 0.8],
                    outline: { // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 255],
                        width: 1
                    }
                });
                // create the polygon and project it to the maps SR
                var poly =  new Polygon({
                  rings: json,
                  spatialReference: { wkid: 32638 }
                });
                var params = new ProjectParameters();
                params.geometries = [poly];
                params.outSR = view.spatialReference;
                var geomSer = new GeometryService(esriConfig.geometryServiceUrl);
                geomSer.project(params).then(lang.hitch(this, function(geoms){
                  var polygonGraphic = new Graphic({
                      geometry: geoms[0],
                      symbol: fillSymbol,
                      attributes: polAtt,
                      popupTemplate: { // autocasts as new PopupTemplate()
                          title: "{Name}",
                          content: [{
                              type: "fields",
                              fieldInfos: [{
                                  fieldName: "Name"
                              }, {
                                  fieldName: "Owner"
                              }, {
                                  fieldName: "Length"
                              }]
                          }]
                      }
                  });
                  view.graphics.addMany([polygonGraphic]);
                  view.goTo([polygonGraphic]);
                }));
            }

            // Add the graphics to the view's graphics layer
            on(dom.byId("showBtn"), "click", showPolygon);
        });
    </script>


</head>
<body>
    <h1 id="heading">أحداثيات الى خريطة</h1>
    <h4> Please Enter Geographic Coordinates Clockwise! </h4>
    <input type="text" id="coord">
    <input type='button' onclick="changeText2(); clearCoord();" value='Submit' />
    <p>Coordinates List:</p>
    <ol id="demo"></ol>
    <button id="showBtn">Show Polygon on Map</button>
    <div id="viewDiv"></div>
    <script src="listCoord.js"></script>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Generate polygon ring from user input coordinates

MuhammadFayaz — Fri, 18 Nov 2016 13:11:24 GMT

Thank you Robert,

It is perfectly working as i was expecting. you were so helpful, Thanks again!!

Re: Generate polygon ring from user input coordinates

MuhammadFayaz — Wed, 23 Nov 2016 11:29:58 GMT

Dear Robert,

I have a simple geoprocessing service which append a feature set into an existing feature layer in geodatabase. I test the service with web appbuilder and works fine. But i am unable to use it from my javascript app. My attempt is attached.

I wish this is the last time i am taking your precious time.

Please let me know if you need full code or service link.

Thank you!

Re: Generate polygon ring from user input coordinates

RobertScheitlin__GISP — Wed, 23 Nov 2016 13:56:11 GMT

Muhammad,

New questions should be asked in a new thread.