AnsweredAssumed Answered

print dynamic polygon

Question asked by CloudingSoft on Apr 24, 2016
Latest reply on Apr 26, 2016 by CloudingSoft

Hello, I'm using "FreehandPolygon" in this example:

 

http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=graphics_add

 

when I draw a polygon coordinates recovery and keep in a textarea tag and then save them in the database, but I can not draw the polygon on the map with these coordinates.

I have 2 actions:

1) "add Graph demo" Dynamically adds a polygon on the map OK.

2) "add Graph", steps:

the user clicks on the "Draw Zone" button and can draw the polygon on the map, when it ends I keep drawing the coordinates in the textarea tag.

I can click "Delete Zone" and then "add Graph" to show the polygon on the map but does nothing.

 

my code:

<div class="form-group ">
                            <div id="info">
                            <button style="display:;" type="button" class="tool btn btn-primary pull-left" id="FreehandPolygon">Draw Zone</button>
                            </div>
                            &n 
                            <button style="display:;" type="button"  class="btn btn-danger pull-left" id="clearGraphics">Delete Zone</button>
                            <button style="display:;" type="button"  class="btn btn-info pull-left" id="addGraphics">add Graph</button>
                            <button style="display:;" type="button"  class="btn btn-success pull-left" id="addGraphicsDemo">add Graph demo</button>


                        </div>
                        <textarea id="load_zona"></textarea>

 

<script src="https://js.arcgis.com/3.16/"></script>

        <script>

var map, tb;


        require([
            "esri/map", 
            "esri/toolbars/draw",
            "esri/symbols/SimpleMarkerSymbol", 
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/PictureFillSymbol", 
            "esri/symbols/CartographicLineSymbol", 
            "esri/graphic", 
            "esri/Color", 
            "dojo/dom",
            "dojo/on",
            "esri/geometry/webMercatorUtils",
            "esri/geometry/Point",  
            "esri/SpatialReference", 
            "dojo/domReady!"
        ], function(
            Map, 
            Draw,
            SimpleMarkerSymbol, 
            SimpleLineSymbol,
            PictureFillSymbol, 
            CartographicLineSymbol, 
            Graphic, 
            Color, 
            dom, 
            on,
            webMercatorUtils,
            Point, 
            SpatialReference
        ) {
            map = new Map("mapDiv", {
                center: [-58.791635351999616, -34.60544583699959], // lon, lat  OK CENTER MAP  
                zoom: 5,  
                basemap: "gray"  
            });
            map.on("load", initToolbar);
            //Setup button click handlers
            on(dom.byId("clearGraphics"), "click", function(){
                if(map){
                  map.graphics.clear();


                }
            });
            on(dom.byId("addGraphics"), "click", loadGraphic);
            on(dom.byId("addGraphicsDemo"), "click", loadGraphicDemo);
            // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
            var markerSymbol = new SimpleMarkerSymbol();
            markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
            markerSymbol.setColor(new Color("#00FFFF"));


            // lineSymbol used for freehand polyline, polyline and line. 
            var lineSymbol = new CartographicLineSymbol(
                CartographicLineSymbol.STYLE_SOLID,
                new Color([255,0,0]), 10, 
                CartographicLineSymbol.CAP_ROUND,
                CartographicLineSymbol.JOIN_MITER, 5
            );


             // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
            // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
            var fillSymbol = new PictureFillSymbol(
                "http://optimocamino.dev/images/IsoLogo.png",
                new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color('#000'), 
                    1
                ), 
                42, 
                42
            );
            /*
             * FUNCTIONS
             */
            function initToolbar() {
                tb = new Draw(map);
                tb.on("draw-end", addGraphic);


                // event delegation so a click handler is not
                // needed for each individual button
                on(dom.byId("info"), "click", function(evt) {
                    if ( evt.target.id === "info" ) {
                        return;
                    }
                    var tool = evt.target.id.toLowerCase();
                    map.disableMapNavigation();
                    tb.activate(tool);
                    $("#clearGraphics").click();//elimino los graficos cargados previamente, solo se permite un grafico.
                });
            }


            function addGraphic(evt) {
                //deactivate the toolbar and clear existing graphics 
                tb.deactivate(); 
                map.enableMapNavigation();


                // figure out which symbol to use
                var symbol;
                console.log("evt.geometry.type:::"+evt.geometry.type)
                console.log(evt.geometry.rings)
                
                /*
                 * save coordenadas
                 */
                console.log("save coordenadas");
                var myJsonString = JSON.stringify(evt.geometry.rings);
                
                var rings = evt.geometry.rings[0];


                strSrings = "[[";
                auxArray = [];
                for(var i =0;i<rings.length;i++){
                    console.log(rings[i]);
                    /*
                     * option A: save X and Y from evt.geometry.rings
                     */
                    y = rings[i][0];
                    x = rings[i][1];
                    auxArray.push("["+y+","+x+"]");
                    /*
                     * option B: paser X and Y with geographicToWebMercator
                     */
//                    var mapPnt = new Point(y,x, new SpatialReference({wkid:4326}));  
//                    pnt = webMercatorUtils.geographicToWebMercator(mapPnt);
//                    _y = pnt.y;
//                    _x = pnt.x;
//                    auxArray.push("["+_y+","+_x+"]");
                }
                strSrings += auxArray.join(",");
                strSrings += "]]";
                $("#load_zona").html(strSrings);
//                $("#load_zona_rings").html(evt.geometry.rings);
                
                
                console.log("end save coordenadas")
                if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
                    symbol = markerSymbol;
                } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
                    symbol = lineSymbol;//USA ESTE SYMBOL
                } else {
                    symbol = fillSymbol;
                }
                map.graphics.add(new Graphic(evt.geometry, symbol));
            }
            function loadGraphic() {
                tb.deactivate(); 
                map.enableMapNavigation();
                //array con coordenadas
                load_zona = $("#load_zona").html();
                parsedTest = JSON.parse(load_zona);
                console.log(load_zona);
                console.log(parsedTest);


                //create poligon
                var myPolygon = {
                    "geometry":{
                        "rings":parsedTest
//  
                                ,
                                "spatialReference":{"wkid":4326}
                        },
                        "symbol":
                        {
                            "color":[0,0,0,64],
                            "outline":{
                                "color":[0,0,0,255],
                                "width":1,
                                "type":"esriSLS",
                                "style":"esriSLSSolid"
                            },
                            "type":"esriSFS",
                            "style":"esriSFSSolid"
                        }
                    };
                //deactivate the toolbar and clear existing graphics 
                symbol = lineSymbol;
                var gra = new Graphic(myPolygon, symbol);


                map.graphics.add(gra);
            }
            function loadGraphicDemo() {
                tb.deactivate(); 
                map.enableMapNavigation();
                parsedJson = [                                    
                                [
                                    [-115.3125,37.96875],[-111.4453125,37.96875],[-99.84375,36.2109375],[-99.84375,23.90625],[-116.015625,24.609375],[-115.3125,37.96875]
                                ]
                            ];
                //create poligon
                var myPolygon = {
                    "geometry":{
                            "rings":parsedJson,
                            "spatialReference":{"wkid":4326}
                        },
                        "symbol":
                        {
                            "color":[0,0,0,64],
                            "outline":{
                                "color":[0,0,0,255],
                                "width":1,
                                "type":"esriSLS",
                                "style":"esriSLSSolid"
                            },
                            "type":"esriSFS",
                            "style":"esriSFSSolid"
                        }
                    };
                //deactivate the toolbar and clear existing graphics 
                symbol = lineSymbol;
                var gra = new Graphic(myPolygon, symbol);


                map.graphics.add(gra);
            }
        });
symbol = lineSymbol;
                var gra = new Graphic(myPolygon, symbol);


                map.graphics.add(gra);
            }
        });

        </script>

 

 

which are the correct coordinates I should keep?

Outcomes