Polygon object not drawing

MartynSmith · ‎10-11-2012

I'm trying to create an esri.geometry.Polygon using a JSON object as per the Javascript API reference. I'm creating the JSON object, and then referencing it in the creation of the polygon, just like in the API reference. I've copied the syntax exactly yet my polygon fails to draw.

My code is:
this is the polygon:
console.log(hullString);
{"rings": [[[-73.7104093,40.54816076],[-73.7519722,40.5871111],[-73.7601326,40.61371559],[-73.7615556,40.8149722],[-73.7562433,40.8320452],[-73.7265199,40.86482226],[-73.6309606,40.8962101],[-73.5906812,40.90843197],[-73.5679025,40.91454289],[-73.3965069,40.9539866],[-71.9822949,41.2742658],[-71.85812147,41.07093545],[-71.85784367,41.0701021],[-71.8675662,41.0606577],[-71.8772889,41.05565774],[-71.91034587,41.04371326],[-72.044796,40.99537948],[-72.39814118,40.8689892],[-72.4800884,40.8420448],[-72.5287016,40.8267668],[-73.0403879,40.6720437],[-73.04316579,40.67121038],[-73.0576108,40.66732155],[-73.1362248,40.6473219],[-73.20219949,40.6340722],[-73.7104093,40.54816076],[-73.7104093,40.54816076]]],"spatialReference": {"wkid": 102100} }

this is where I create the polygon:
var polygon = esri.geometry.geographicToWebMercator(new esri.geometry.Polygon(hullString));

But the polygon is empty:
console.log(polygon);
Object { type="polygon", rings=[0], _ring=0, more...}

But if I copy the JSON string from the console, and paste that into:
var polygon = esri.geometry.geographicToWebMercator(new esri.geometry.Polygon(paste above JSON here));
the polygon draws fine in my map.

This should be simple, I'm sure I'm overlooking something.

derekswingley1 · ‎10-11-2012

Your polygon coordinates appear to be in geographic/WGS84 but your wkid is for Web Mercator. Change your spatialReference.wkid to 4326 (the wkid for WGS84) and it works:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      
      var map;
      function init() {
        var ext = new esri.geometry.Extent({"xmin":-17878954,"ymin":-2368856,"xmax":11003235,"ymax":12170078,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{ extent: ext, wrapAround180: true });
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer");
        map.addLayer(basemap);
        
        // polygon JSON
        // coordinates are in wgs84 so wkid should be 4326, not 102100
        var geom = {"rings": [[[-73.7104093,40.54816076],[-73.7519722,40.5871111],[-73.7601326,40.61371559],[-73.7615556,40.8149722],[-73.7562433,40.8320452],[-73.7265199,40.86482226],[-73.6309606,40.8962101],[-73.5906812,40.90843197],[-73.5679025,40.91454289],[-73.3965069,40.9539866],[-71.9822949,41.2742658],[-71.85812147,41.07093545],[-71.85784367,41.0701021],[-71.8675662,41.0606577],[-71.8772889,41.05565774],[-71.91034587,41.04371326],[-72.044796,40.99537948],[-72.39814118,40.8689892],[-72.4800884,40.8420448],[-72.5287016,40.8267668],[-73.0403879,40.6720437],[-73.04316579,40.67121038],[-73.0576108,40.66732155],[-73.1362248,40.6473219],[-73.20219949,40.6340722],[-73.7104093,40.54816076],[-73.7104093,40.54816076]]],"spatialReference": {"wkid": 4326} };
        console.log("geom is: ", geom);
        dojo.connect(map, "onLoad", function() { 
          dojo.connect(dijit.byId("map"), "resize", map, map.resize);
          // create a polygon object from JSON
          var wgs84 = new esri.geometry.Polygon(geom);
          // convert wgs84 polygon to web mercator
          var webMercator = esri.geometry.geographicToWebMercator(wgs84);
          // create a graphic
          var graphic = new esri.Graphic(webMercator, new esri.symbol.SimpleFillSymbol());
          // add it to the map
          map.graphics.add(graphic);
          // zoom to the graphic
          map.setExtent(esri.graphicsExtent(map.graphics.graphics), true);
          console.log("added and zoomed to polygon");
        });
      }

      
      dojo.ready(init);
    </script>
  </head>
  
  <body class="tundra">
    <div data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline',gutters:false" 
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'"> 
      </div>
    </div>
  </body>
</html>

On jsfiddle: http://jsfiddle.net/taf8Q/

Traspac · ‎01-16-2017

It' WORK to me THANK YOU very much

MartynSmith · ‎10-11-2012

Derek Thanks for replying. You are definitely right that I was using the wrong wkid, but changing it did not fix the problem in my app.

The issue is something to do with the formatting of my JSON string which I am building in a for loop. If I use JSON.parse on the string it works fine (but I'd like to avoid that because of browser incompatibilities), or if I copy and paste the text of the string from the console log it works fine. Any other ideas?

These work:
var jsonString = JSON.parse(hullString);
var polygon = esri.geometry.geographicToWebMercator(new esri.geometry.Polygon(jsonString));

var polygon = esri.geometry.geographicToWebMercator(new esri.geometry.Polygon({"rings": [[[-73.7104093,40.54816076],[-73.7519722,40.5871111],[-73.7601326,40.61371559],[-73.7615556,40.8149722],[-73.7562433,40.8320452],[-73.7265199,40.86482226],[-73.6309606,40.8962101],[-73.5906812,40.90843197],[-73.5679025,40.91454289],[-73.3965069,40.9539866],[-71.9822949,41.2742658],[-71.85812147,41.07093545],[-71.85784367,41.0701021],[-71.8675662,41.0606577],[-71.8772889,41.05565774],[-71.91034587,41.04371326],[-72.044796,40.99537948],[-72.39814118,40.8689892],[-72.4800884,40.8420448],[-72.5287016,40.8267668],[-73.0403879,40.6720437],[-73.04316579,40.67121038],[-73.0576108,40.66732155],[-73.1362248,40.6473219],[-73.20219949,40.6340722],[-73.7104093,40.54816076],[-73.7104093,40.54816076]]],"spatialReference": {"wkid": 4326} }));

This doesn't work:
var polygon = esri.geometry.geographicToWebMercator(new esri.geometry.Polygon(hullString));

ReneRubalcava · ‎10-11-2012

So is hullString still a string when you pass it in that last line? If it's a string and you don't want to worry about JSON.parse being available, you can still use the dojo/json module to parse it for you.
http://dojotoolkit.org/reference-guide/1.7/dojo/json.html
You need to parse it one way or another to work.