print dynamic polygon

[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);
                    /*
                     * option A: save X and Y from evt.geometry.rings
                     */
                    y = rings[0];
                    x = rings[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?

[RobertScheitlin__GISP · Accepted solution]

Fabien,

  Here is the code working with comments on my changes:

<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/Point",
            "esri/SpatialReference",
            "dojo/domReady!"
        ], function(
            Map,
            Draw,
            SimpleMarkerSymbol,
            SimpleLineSymbol,
            PictureFillSymbol,
            CartographicLineSymbol,
            Graphic,
            Color,
            dom,
            on,
            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);
//The dojo way to get the html element                    
                    dom.byId("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);
//Because the map is in 102100 not 4326 the order should be x, y not y, x
                    x = rings[0];
                    y = rings[1];
                    auxArray.push("[" + x + "," + y + "]");
                }
                strSrings += auxArray.join(",");
                strSrings += "]]";
//The dojo way to get the html element
                dom.byId("load_zona").innerHTML = strSrings;

                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 = dom.byId("load_zona").innerHTML;
                parsedTest = JSON.parse(load_zona);
                console.log(load_zona);
                console.log(parsedTest);

                //create polygon graphic
//The map is in 102100 not 4326                
                var myPolygon = {
                    "geometry": {
                        "rings": parsedTest,
                        "spatialReference": {
                            "wkid": 102100
                        }
                    },
                    "symbol": {
                        "color": [0, 0, 0, 64],
                        "outline": {
                            "color": [0, 0, 0, 255],
                            "width": 1,
                            "type": "esriSLS",
                            "style": "esriSLSSolid"
                        },
                        "type": "esriSFS",
                        "style": "esriSFSSolid"
                    }
                };
                map.graphics.add(new Graphic(myPolygon));
            }

            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"
                    }
                };
                map.graphics.add(new Graphic(myPolygon));
            }
        });
    </script>

[CloudingSoft]

Excellent!

documentation is extensive hope soon to understand it better.

Thank you.

[CloudingSoft]

already solved this problem, I came to my map is initialised in Argentina but if drawing a zone in Mexico for example, showing again the map with the map area in Mexico continues initialised in Argentina.

I would like to be able to self-adjust the map as they do in this example:

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

but take my saved area

[RobertScheitlin__GISP]

Fabien,

  Are you asking how to automatically zoom to the graphic that is added when you click the "add Graph demo" button?

[CloudingSoft]

Hello,

not exactly, but I can serve as "add Graph demo" in USA loading area and this map is initialised in Argentina

[RobertScheitlin__GISP]

Fabien,

  I am afraid the language barrier is causing an issue here. I am not sure what you are asking or wanting. The code you I provided allows for clicking the the "draw zone" button which activate the freehand polygon draw tool. The on draw complete event takes the polygon geometry and manually converts it to a string (not sure why you do not use Polygon.toJson() function for this) and adds it to the textArea. The "Delete Zone" button clears the maps graphics and the "add Graph" take the polygon json string from the textArea and adds a new graphic to the map using that json. The "add Graph Demo" button take a predefined graphic json (whos coordinates are in Mexico and southwest US) and adds that graphic to the map. That graphic will never be added in the area of Argentina  based on the coordinates given. So can you explain any better what it is that you are wanting?

[CloudingSoft]

ok, I want the zone map focus depending on where charges when I click on the "add Graph Demo" button.

By default, the map will always focus on Argentina when no area.

[RobertScheitlin__GISP]

Fabien,

  Here is the updated function:

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"
                    }
                };
                var gra = new Graphic(myPolygon);
                map.graphics.add(gra);
                map.setExtent(gra.geometry.getExtent().expand(1.5), true);
            }

[CloudingSoft]

very good!

Now this works with polygons but not with New Graphic (), I think I'm getting the wrong type of coordinates.

you can see that the setCenter variable when is 0 initializes startExtent and when 1 adds "setTextent" to the map:

require([
            "esri/map",  
                "esri/dijit/HomeButton",  
                "esri/symbols/PictureMarkerSymbol",  
                "esri/geometry/webMercatorUtils",  
                "dojo/on",  
                "dijit/registry",
                "dojo/parser",
                "esri/graphic",  
                "esri/InfoTemplate",  
                "esri/geometry/Point",  
                "esri/SpatialReference" ,
                "dojo/_base/array",
                "dojo/_base/lang"


        ], function(Map, HomeButton, PictureMarkerSymbol, webMercatorUtils, on,registry,parser, Graphic, InfoTemplate, Point, SpatialReference,dojoArray,lang) {
            
            parser.parse();
            var map = new Map("map_camino", {
                center: [-58.791635351999616, -34.60544583699959], // lon, lat  OK CENTER MAP  
                zoom: 5,  
                basemap: "gray"  
            });
            on(map, 'load', function(map) {  
                    /*
                     * PARADAS
                     */
                                                var mapPnt = new Point(-58.75897841499967,-34.65621587899962, new SpatialReference({wkid:4326}));  
                            var nombre = 'Parada Paso del Rey';
                            var direccion = 'Paso del Rey, Buenos Aires, Argentina';
                            var telefono = '';
                            var color = 'Red';
                            _width=_height=70;
                            setMark(webMercatorUtils.geographicToWebMercator(mapPnt),nombre,direccion,telefono,color,_width,_height);  
                                                var mapPnt = new Point(-60.639316557999614,-32.94681756799963, new SpatialReference({wkid:4326}));  
                            var nombre = 'Parada Rosario';
                            var direccion = 'Rosario, Santa Fe, Argentina';
                            var telefono = '1531040465';
                            var color = 'Red';
                            _width=_height=70;
                            setMark(webMercatorUtils.geographicToWebMercator(mapPnt),nombre,direccion,telefono,color,_width,_height);  
                                   
                });  
                var setCenter = 0;
                function setMark(pnt,nombre,direccion,telefono,color,_width,_height) {  
                    var Symbol = new PictureMarkerSymbol("https://static.arcgis.com/images/Symbols/Shapes/"+color+"Pin1LargeB.png",_width,_height);  
                    var Template = new InfoTemplate("${Nombre}","<i><font color='grey'>Dirección:</font></i> ${Direccion}<br />\n\
                                                                 <i><font color='grey'>Telefono:</font></i> ${Contacto}<br />");  
                    var mark = new Graphic(  
                        pnt,  
                        Symbol,  
                        {  
                            "Nombre": nombre,  
                            "Direccion": "<br/>"+direccion,  
                            "Contacto": "<br/>"+telefono  
                        },  
                        Template);  
                    map.graphics.add(mark);  
                    if(setCenter==0){
                        var spatialRef = new esri.SpatialReference({wkid:4326});
                        var startExtent = new esri.geometry.Extent();
                        startExtent.xmin = mark.geometry.x;
                        startExtent.ymin = mark.geometry.y;
                        startExtent.spatialReference = spatialRef;
                    }else if(setCenter==1){
                        startExtent.xmax = mark.geometry.x;
                        startExtent.ymax = mark.geometry.y;
                        map.setExtent(startExtent);
                    }
                    setCenter++;
                    
                    map.infoWindow.resize(270, 350);
                }
        });