print dynamic polygon

2204
9
Jump to solution
04-24-2016 02:00 PM
FabienNodet
New Contributor III

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?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

View solution in original post

9 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

View solution in original post

FabienNodet
New Contributor III

Excellent!

documentation is extensive hope soon to understand it better.

Thank you.

0 Kudos
FabienNodet
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Fabien,

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

0 Kudos
FabienNodet
New Contributor III

Hello,

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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?

0 Kudos
FabienNodet
New Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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);

            }

0 Kudos
FabienNodet
New Contributor III

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);

                }

        });

0 Kudos