Generate polygon ring from user input coordinates

3404
15
Jump to solution
11-04-2016 06:36 AM
MuhammadFayaz
Occasional Contributor

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!

0 Kudos
15 Replies
RobertScheitlin__GISP
MVP Emeritus

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>
MuhammadFayaz
Occasional Contributor

Thank you Robert, 

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

0 Kudos
MuhammadFayaz
Occasional Contributor

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!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Muhammad,

   New questions should be asked in a new thread.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Muhammed,

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

0 Kudos
MuhammadFayaz
Occasional Contributor

Ok done, that was a mistake

0 Kudos