Simple? Add polygon of Lat/Long points to map

BrentStevener · ‎02-11-2011

I am new to the Javascript API, but have found it quite difficult to try to do a simple thing I am wanting to test. I have a set of points that make up a polygon. These points are in Lat/Lon (ex. x=-107.36,y=25.29). I just want to add a polygon and show it on a map, with the ESRI World Imagery base layer behind it. I can get the basemap to show, but I can't seem to find the right code to create a polygon with my lat/long points and add it to the map.

Any help?

MartenLiebster · ‎02-11-2011

I am new to the Javascript API, but have found it quite difficult to try to do a simple thing I am wanting to test. I have a set of points that make up a polygon. These points are in Lat/Lon (ex. x=-107.36,y=25.29). I just want to add a polygon and show it on a map, with the ESRI World Imagery base layer behind it. I can get the basemap to show, but I can't seem to find the right code to create a polygon with my lat/long points and add it to the map.

Any help?

You need to create a Polygon geometry : http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/polygon.htm

And use that with a Graphic : http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/graphic.htm

And then add that graphic to a graphic layer.

Here are ESRI's polygon samples: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm?Polygon

BrentStevener · ‎02-11-2011

I've looked at the samples already, but I can't get a working sample with what I am trying to do. What is wrong with the below code? The polygon doesn't display, but the map does. I think its where I am trying to add the graphic, and I assume I have to convert the polygon geometry like I did for the map extent. What is the syntax to do that for a polygon?

<script type="text/javascript">
    dojo.require("esri.map");
    dojo.require("esri.graphic");
    dojo.require("esri.geometry");
    dojo.require("esri.arcgis.utils");

    var map;
    function init() {
      var myExtent = new esri.geometry.Extent(-107,25,-92,36, new esri.SpatialReference({wkid:4326}));
      map = new esri.Map("mapDiv", {extent:esri.geometry.geographicToWebMercator(myExtent) });
      var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
      var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
      map.addLayer(basemap);

      var myPolygon = new esri.geometry.Polygon(new esri.SpatialReference({wkid:4326}));
      myPolygon.addRing([[-99.24,28.39],[-99.24,29.37],[-99.482,29.37],[-99.24,28.39]]);

      var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
   new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
   new dojo.Color([255,0,0]), 2),new dojo.Color([255,255,0,0.25]));
      map.graphics.add(myPolygon, sfs);  //******How to convert coordinates?********//
    }
 
    dojo.addOnLoad(init);
  </script>

derekswingley1 · ‎02-11-2011

Check out what I posted a couple of months ago over on gis.se: http://gis.stackexchange.com/questions/2749/esri-json-polygon-ring-orientation/2750#2750

Also, esri.geometry.geographicToWebMercator() works for polygons so do something like this:

var poly_wm = esri.geometry.geographicToWebMercator(myPolygon);
map.graphics.add(new esri.Graphic(poly_wm, sfs));

BrentStevener · ‎02-11-2011

Check out what I posted a couple of months ago over on gis.se: http://gis.stackexchange.com/questions/2749/esri-json-polygon-ring-orientation/2750#2750

That is not Lat/Long coordinates. Other than that, I don't see you doing anything that different than what is already in my above code. Adding the polygon as a new graphic had the same result. All I want is someone to actually test my code to see what I am missing Below is the full page code that you can copy and paste into a new html doc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
  <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
  <script type="text/javascript">
    dojo.require("esri.map");
    dojo.require("esri.graphic");
    dojo.require("esri.geometry");
    dojo.require("esri.arcgis.utils");

    var map;
    function init() {
      var myExtent = new esri.geometry.Extent(-107,25,-92,36, new esri.SpatialReference({wkid:4326}));
      map = new esri.Map("mapDiv", {extent:esri.geometry.geographicToWebMercator(myExtent) });
      
      var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
      var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
      map.addLayer(basemap);
     
      var myPolygon = new esri.geometry.Polygon(new esri.SpatialReference({wkid:4326}));
      myPolygon.addRing([[-99.24,28.39],[-99.24,29.37],[-99.482,29.37],[-99.24,28.39]]);

      var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
      polygonGraphic = new esri.Graphic(myPolygon, symbol); ///*** how to convert the polygon geometry????? *******////
      map.graphics.add(polygonGraphic);
    }
    dojo.addOnLoad(init);
  </script>
</head>

<body class="claro">
  <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>

derekswingley1 · ‎02-11-2011

Edited my previous post...

BrentStevener · ‎02-11-2011

I have already tried that in my hunt to get a working sample, to no avail. I posted the full page code for anyone to test it and give me a fixed working sample.

derekswingley1 · ‎02-11-2011

When I run your code in chrome I get this error: Uncaught TypeError: Cannot call method 'add' of null

What does that tell you? Since the only add method you're calling is map.graphics.add(), it's clear that function call is failing.

You need to wait for the map to load before you can add graphics. Did you notice that the link I posted previously puts the code that actually adds graphics inside a function that runs after the map loads?

Anyway, here's a working version of your code, which uses esri.geometry.geographicToWebMercator() to get a geometry that is suitable to add to the map:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
  <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
  <script type="text/javascript">
    dojo.require("esri.map");
    dojo.require("esri.graphic");
    dojo.require("esri.geometry");
    dojo.require("esri.arcgis.utils");

    var map;
    function init() {
      var myExtent = new esri.geometry.Extent(-107,25,-92,36, new esri.SpatialReference({wkid:4326}));
      map = new esri.Map("mapDiv", {extent:esri.geometry.geographicToWebMercator(myExtent) });
      
      var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
      var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
      map.addLayer(basemap);
      dojo.connect(map, 'onLoad', function() {
        var myPolygon = new esri.geometry.Polygon(new esri.SpatialReference({wkid:4326}));
        myPolygon.addRing([[-99.24,28.39],[-99.24,29.37],[-99.482,29.37],[-99.24,28.39]]);
        
        // 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);
        polygonGraphic = new esri.Graphic(poly_wm, symbol); ///*** how to convert the polygon geometry????? *******////
        map.graphics.add(polygonGraphic);
      });
    }
    dojo.addOnLoad(init);
  </script>
</head>

<body class="claro">
  <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>

BrentStevener · ‎02-11-2011

Thanks. That's all I was wanting. I saw no errors in my browser, so that obvious error was not seen by myself. I wasn't trying to be an a** about it. All I wanted was someone to test my code to see what is wrong, and look what happened. As soon as someone finally did, I finally got the help I was looking for.

derekswingley1 · ‎02-11-2011

What browser are you using? Chrome with the JS console open or Firefox with Firebug on are the only two viable options for debugging, IMO.