topic Re: Polygon not showing up in ArcGIS JavaScript Maps SDK Questions

Polygon not showing up

DiptiSheth — Tue, 22 Apr 2014 02:08:37 GMT

Hi,

Following is my code:

function LoadEsriTrees() {

var divEsriMap = $mover.find('div#mapDiv').attr('id');

require(
["esri/map", "esri/layers/GraphicsLayer", "dojo/_base/array", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "dojo/_base/Color", "esri/graphic", "esri/InfoTemplate",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters"],
function (Map, GraphicsLayer, array, Point, SimpleMarkerSymbol, Color, Graphic, InfoTemplate, ArcGISDynamicMapServiceLayer, ImageParameters) {

map = new Map(divEsriMap, {

center: [174.605, -37.119],
zoom: 15
});

//var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", { id: 'basemap' });

var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", { id: 'basemap' });
map.addLayer(basemap);

//show polygon
dojo.connect(map, 'onLoad', function () {
// var myPolygon = new esri.geometry.Polygon(new esri.SpatialReference({ wkid: 4326 }));

var myPolygon = new esri.geometry.Polygon([[174.605111568859, -37.119413675388707], [174.6051123299834, -37.119449718193458], [174.60515905129122, -37.119530204987136], [174.60540067619004, -37.119779304335452], [174.60554255499551, -37.120101860545844], [174.60568043759687, -37.120235191897571], [174.60572696965184, -37.1203066677341], [174.60572849253467, -37.120378753310746], [174.60570674933629, -37.120415100973361], [174.60560757225889, -37.120515590528086], [174.60554177129595, -37.120597601350227], [174.60549026791193, -37.120823630882519], [174.6054873903158, -37.121220253972716], [174.6055119446122, -37.122382633739591], [174.60513274122792, -37.119350295725816], [174.605111568859, -37.119413675388707]]);

// map is in web mercator so transform the geometry
// var poly_wm = esri.geometry.geographicToWebMercator(myPolygon);

// var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);

var symbol = new esri.symbol.SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]) );

// polygonGraphic = new esri.Graphic(poly_wm, symbol);

polygonGraphic = new esri.Graphic(myPolygon, symbol);
map.graphics.add(polygonGraphic);
});

}
);
}

Can any one please help me to locate polygon on the map? I don't know..where I'm getting wrong, its not showing up polygon on the map.

Thanks,

Dipti Sheth

Re: Polygon not showing up

JakeSkinner — Sun, 12 Dec 2021 02:15:55 GMT

Hi Dipti,

Take a look at this example. This should get you going in the right direction.

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  
  <script src="http://js.arcgis.com/3.8/"></script>
  <script>
    var map;
    require([
        "esri/map", 
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "dojo/_base/Color",
        
        "esri/graphic",        
        "esri/geometry/Polygon",
        
        "dojo/on",
        "dojo/dom",
        "dojo/domReady!"
    ], 
    function(
        Map, SimpleFillSymbol, SimpleLineSymbol, Color, 
        Graphic, Polygon,
        on, dom
    ) {
      map = new Map("mapDiv", {
        center: [174.605369, -37.120276],
        zoom: 15,
        basemap: "streets"
      });     
      
      on(map, "load", addGraphic);       
      
      var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
        new Color([255,0,0]), 2),new Color([255,255,0,0.25])
        )        

      
      function addGraphic(){            
            var singleRingPolygon = new Polygon([[174.605111568859, -37.119413675388707], [174.6051123299834, -37.119449718193458], [174.60515905129122, -37.119530204987136], [174.60540067619004, -37.119779304335452], [174.60554255499551, -37.120101860545844], [174.60568043759687, -37.120235191897571], [174.60572696965184, -37.1203066677341], [174.60572849253467, -37.120378753310746], [174.60570674933629, -37.120415100973361], [174.60560757225889, -37.120515590528086], [174.60554177129595, -37.120597601350227], [174.60549026791193, -37.120823630882519], [174.6054873903158, -37.121220253972716], [174.6055119446122, -37.122382633739591], [174.60513274122792, -37.119350295725816], [174.605111568859, -37.119413675388707]]);
            var gra = new Graphic(singleRingPolygon, sfs);
            map.graphics.add(gra);
      }
                       

    });
  </script>

</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

Re: Polygon not showing up

DiptiSheth — Sun, 12 Dec 2021 02:15:58 GMT

Hi Dipti,

Take a look at this example. This should get you going in the right direction.

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  
  <script src="http://js.arcgis.com/3.8/"></script>
  <script>
    var map;
    require([
        "esri/map", 
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "dojo/_base/Color",
        
        "esri/graphic",        
        "esri/geometry/Polygon",
        
        "dojo/on",
        "dojo/dom",
        "dojo/domReady!"
    ], 
    function(
        Map, SimpleFillSymbol, SimpleLineSymbol, Color, 
        Graphic, Polygon,
        on, dom
    ) {
      map = new Map("mapDiv", {
        center: [174.605369, -37.120276],
        zoom: 15,
        basemap: "streets"
      });     
      
      on(map, "load", addGraphic);       
      
      var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
        new Color([255,0,0]), 2),new Color([255,255,0,0.25])
        )        

      
      function addGraphic(){            
            var singleRingPolygon = new Polygon([[174.605111568859, -37.119413675388707], [174.6051123299834, -37.119449718193458], [174.60515905129122, -37.119530204987136], [174.60540067619004, -37.119779304335452], [174.60554255499551, -37.120101860545844], [174.60568043759687, -37.120235191897571], [174.60572696965184, -37.1203066677341], [174.60572849253467, -37.120378753310746], [174.60570674933629, -37.120415100973361], [174.60560757225889, -37.120515590528086], [174.60554177129595, -37.120597601350227], [174.60549026791193, -37.120823630882519], [174.6054873903158, -37.121220253972716], [174.6055119446122, -37.122382633739591], [174.60513274122792, -37.119350295725816], [174.605111568859, -37.119413675388707]]);
            var gra = new Graphic(singleRingPolygon, sfs);
            map.graphics.add(gra);
      }
                       

    });
  </script>

</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

Hi,

First of all really sorry for my late response.

Thanks for your code..it really shows up polygon. But..next step is that this data comes from db, so when I store it in array or string and pass it to polygon as follows:
var singleRingPolygon = new Polygon(thisLocs.toString());

it again doesn't show up anything.

Please have a look at this and let me know...in which format coordinated data should be passed from db to show up polygon.

Thanks a lot,
Dipti Sheth

Re: Polygon not showing up

JakeSkinner — Wed, 23 Apr 2014 11:49:17 GMT

You will need to pass the coordinates as an array. See the following link.

Create a new polygon by providing an array of geographic coordinate pairs. For a single ring polygon specify an array of coordinate pairs. For a multi-ring polygon specify an array of array coordinate pairs.

Re: Polygon not showing up

DiptiSheth — Wed, 23 Apr 2014 18:18:23 GMT

You will need to pass the coordinates as an array. See the following link.

Create a new polygon by providing an array of geographic coordinate pairs. For a single ring polygon specify an array of coordinate pairs. For a multi-ring polygon specify an array of array coordinate pairs.

Hi,

I get coordinates from db and format that data it in the following form:

[[174.605111568859, -37.119413675388707], [174.6051123299834, -37.119449718193458], [174.60515905129122, -37.119530204987136], [174.60540067619004, -37.119779304335452], [174.60554255499551, -37.120101860545844], [174.60568043759687, -37.120235191897571], [174.60572696965184, -37.1203066677341], [174.60572849253467, -37.120378753310746], [174.60570674933629, -37.120415100973361], [174.60560757225889, -37.120515590528086], [174.60554177129595, -37.120597601350227], [174.60549026791193, -37.120823630882519], [174.6054873903158, -37.121220253972716], [174.6055119446122, -37.122382633739591], [174.60513274122792, -37.119350295725816], [174.605111568859, -37.119413675388707]])

If I hardcode this value as:

var singleRingPolygon = new Polygon([[174.605111568859, -37.119413675388707], [174.6051123299834, -37.119449718193458], [174.60515905129122, -37.119530204987136], [174.60540067619004, -37.119779304335452], [174.60554255499551, -37.120101860545844], [174.60568043759687, -37.120235191897571], [174.60572696965184, -37.1203066677341], [174.60572849253467, -37.120378753310746], [174.60570674933629, -37.120415100973361], [174.60560757225889, -37.120515590528086], [174.60554177129595, -37.120597601350227], [174.60549026791193, -37.120823630882519], [174.6054873903158, -37.121220253972716], [174.6055119446122, -37.122382633739591], [174.60513274122792, -37.119350295725816], [174.605111568859, -37.119413675388707]]);

it works well and shows polygon.

But..how to convert it to array...I tried many things...but still no positive result. I created array, pushed all values into array and then passed it to create polygon...still of no help.

Please guide me in more detail.

Thanks,

Dipti Sheth

Re: Polygon not showing up

MichaelVolz — Wed, 23 Apr 2014 18:28:25 GMT

Can you post all of your current code where you get the polygon data from a db?

Re: Polygon not showing up

DiptiSheth — Wed, 23 Apr 2014 19:25:59 GMT

Can you post all of your current code where you get the polygon data from a db?

Hi,

following is my current code:

var $mover = $('#thingtypecontent');

        var polygonData = $mover.find('input#hdndata').val();

        var check1 = (polygonData.indexOf("POLYGON ((") !== -1);
        if (check1 == true)
            polygonData = polygonData.replace('POLYGON ((', '[');

        var check2 = (polygonData.indexOf("))") !== -1);
        if (check2 == true)
            polygonData = polygonData.replace('))', ']');

           polygonData = polygonData.replace(/,\s+/g, '],[');

        //create polygon data
        var coords = new Array();
        var allLocs = new Array();

        var anchorLat = null;
        var anchorLon = null;

        coords = polygonData.split(" ");

        var thisLocs = new Array();

        var anchorCoord = null;
        if ((coords.length / 2) % 2) {
            anchorCoord = coords.length / 2 - 1;
        }
        else {
            anchorCoord = coords.length / 2;
        }

        for (k = 0; k <= coords.length - 1; k = k + 2) {

           var thisLoc = new esri.geometry.Point(coords, coords[k + 1]);
                thisLocs.push(thisLoc);
                allLocs.push(thisLoc);


            if (k == anchorCoord) {
                anchorLat = coords[k + 1];
                anchorLon = coords;
            }

        }

    var map;
    require([
        "esri/map",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "dojo/_base/Color",

        "esri/graphic",
        "esri/geometry/Polygon",

        "dojo/on",
        "dojo/dom",
        "dojo/domReady!"
    ],
    function (
        Map, SimpleFillSymbol, SimpleLineSymbol, Color,
        Graphic, Polygon,
        on, dom
    ) {
        map = new Map("mapDiv", {
            center: [174.605369, -37.120276],
            zoom: 15,
            basemap: "streets"
        });

        on(map, "load", addGraphic);

        var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
        new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])
        )

        function addGraphic() {
            //            var singleRingPolygon = new Polygon([[174.605111568859, -37.119413675388707], [174.6051123299834, -37.119449718193458], [174.60515905129122, -37.119530204987136], [174.60540067619004, -37.119779304335452], [174.60554255499551, -37.120101860545844], [174.60568043759687, -37.120235191897571], [174.60572696965184, -37.1203066677341], [174.60572849253467, -37.120378753310746], [174.60570674933629, -37.120415100973361], [174.60560757225889, -37.120515590528086], [174.60554177129595, -37.120597601350227], [174.60549026791193, -37.120823630882519], [174.6054873903158, -37.121220253972716], [174.6055119446122, -37.122382633739591], [174.60513274122792, -37.119350295725816], [174.605111568859, -37.119413675388707]]);

             var singleRingPolygon = new Polygon(thisLocs);


            var gra = new Graphic(singleRingPolygon, sfs);
            map.graphics.add(gra);
        }

    });