topic Re: Multipolygons are not plotted on map from JSON but on Google Map works ! in ArcGIS JavaScript Maps SDK Questions

Multipolygons are not plotted on map from JSON but on Google Map works !

CarlosEscobar — Sat, 14 Apr 2012 08:19:19 GMT

Hi everyone!,

I am newbie working on ArcGIS, I was working with google maps days ago but I came across with the need to apply new feaute which Google Maps does not have. So I migrated my project to ArcGIS.
But Unfourtunally I got a problem:

1. I am trying to show polygons from JSON data. but no shape appear. The same JSON data from Google Maps is show.
2. I copy the JSON structure over an online Geometry Visualizer tool in order to find any problem, but the same problem persists no shape is shown neither.

Please, anyone may help me ASAP about this issue? what is the different between Google Maps and ArcGIS why does it work for one YES and the another NO ?? I attached JSON data as a zip file.

Thanks in advance!
Carlos

Re: Multipolygons are not plotted on map from JSON but on Google Map works !

derekswingley1 — Mon, 16 Apr 2012 15:18:17 GMT

Can you post a screen shot of what your data looks like when added to a Google map? Posting the code to do so would also be helpful.

One thing I'd like to point out is that your data is in geographic coordinates (latitude and longitude) but you're probably using web mercator basemaps. We plan to simplify this, but until we do, you need to convert your geographic data to web mercator. You can use esri.geometry.geographicToWebMercator to do this.

Regarding specific support for multipolygons in the JS API, yes, they are supported. See a previous discussion I participated in on gis.stackexchange: Esri JSON Polygon Ring Orientation.

Re: Multipolygons are not plotted on map from JSON but on Google Map works !

CarlosEscobar — Tue, 17 Apr 2012 01:23:58 GMT

Hi Forums Team,

I am going to review the info related to WebMercator, because my code is not using that. Any ways if you can send me an example about how to adjust that into my code , it will be very appreciated.

I attach the information requested.
1. The screenshot of the map plotted on google map which works fine.
2. The source code in order to see if I am making a mistake. ( I just probed using differents wkid: 102100 and 4326 )

I am really happy by using ArcGIS but I would like to complete that to show the work and let know to my friends and coworkers about the benefits by using ArcGIS.

thanks in advance.
Carlos

--------------------------------------------------------------------------------

<script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.layers.agstiled");
      dojo.require("esri.toolbars.draw");
      dojo.require("esri.toolbars.edit");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");

      dojo.addOnLoad(pageReady);

      var map, tb;
      var editToolbar;
      var ctxMenuForGraphics, ctxMenuForMap;
      var selected, currentLocation;
      var serviceResult = [];
      var mode;

      function pageReady() {
      var startExtent = new esri.geometry.Extent({"xmin":-18902571,
                                                  "ymin":-1995923,
                                                  "xmax":1134936,
                                                  "ymax":8022830,
                                                  "spatialReference":{"wkid":4326}}); // 102100

        map = new esri.Map("map", {
          extent: startExtent,
          slider: true
        });

        dojo.connect(map, "onLoad", createToolbarAndContextMenu);

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

        map.addLayer(basemap);
      }

function requestSucceeded(response, io) {
          console.log("Succeeded: ", response);
          console.log(response.coordinates.length);
          serviceResult = response.coordinates;
         // document.getElementById("contenido").innerHTML = dojo.toJson(response, true);
          requestCompleted();
          dojo.toJsonIndentStr = " ";


          if(serviceResult)
          {
            console.log("serviceResult-lenght =", serviceResult.length);

            // Adds pre-defined geometries to map
            var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                                                             new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT,
                                                                                              new dojo.Color([151, 249,0,.80]), 3),
                                                                                              new dojo.Color([151, 249, 0, 0.45]));

           for(var index = 0; index < serviceResult.length; index++)
            {
             var data = serviceResult[index];
             var ring;
             for(var ringIndex = 0; ringIndex < data.length; ringIndex++)
             {
               ring = data[ringIndex];

               console.log("ring = ", ring);
               var polygon = new esri.geometry.Polygon({ "rings" : ring,
                                                         "spatialReference":{"wkid":4326}
                                                      });

               map.graphics.add(new esri.Graphic(polygon, polygonSymbol));
              }
             }
             var p = new esri.geometry.Polygon({
                                                "rings" : [[[-111.05023, 22.58182], [-110.252045, 22.547132], [-110.93383, 22.513498], [-111.05023, 22.58182]]],
                                               "spatialReference":{"wkid":4326}
                                               });
            var graphic = new esri.Graphic(p, polygonSymbol);
            map.graphics.add( graphic );

         }

      }

Re: Multipolygons are not plotted on map from JSON but on Google Map works !

CarlosEscobar — Tue, 17 Apr 2012 05:54:35 GMT

Hi Forum,

Thanks for supporting to me, I just solved the problem this one was made by using esri.geometry.geographicToWebMercator( shape )

The better for you.
Carlos

Can you post a screen shot of what your data looks like when added to a Google map? Posting the code to do so would also be helpful.

One thing I'd like to point out is that your data is in geographic coordinates (latitude and longitude) but you're probably using web mercator basemaps. We plan to simplify this, but until we do, you need to convert your geographic data to web mercator. You can use esri.geometry.geographicToWebMercator to do this.

Regarding specific support for multipolygons in the JS API, yes, they are supported. See a previous discussion I participated in on gis.stackexchange: Esri JSON Polygon Ring Orientation.

Re: Multipolygons are not plotted on map from JSON but on Google Map works !

PaulBushore — Tue, 17 Apr 2012 12:11:53 GMT

Glad to hear that Derek's answer helped you Carlos. If you could, please take the time to mark Derek's post as the answer to the question, this lets other forum users know that the question has been answered. On the right-side of his post there should be a spot where you can mark it as answered.

Best wishes!

Re: Multipolygons are not plotted on map from JSON but on Google Map works !

derekswingley1 — Tue, 17 Apr 2012 15:26:03 GMT

Glad you got it working. To close the loop on this, here's a working example using the JS API: http://dl.dropbox.com/u/2654618/multi-poly/map_full.html