nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Simple? Add polygon of Lat/Long points to map

BrentStevener

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?

Vind meer berichten getagd met

Accepted answers

All comments

MartenLiebster

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

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

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

PhilipMarty_0-1623946027229.png

BrentStevener

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

Edited my previous post...

BrentStevener

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

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

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

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.

BrentStevener

Firefox, but I probably didn't have it set up right for Javascript debugging (.NET/Silverlight/Windows shop here). I just tried to duplicate a test we had using the Silverlight API, but using the Javascript API instead. Looking to fix that debugging problem as we speak.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.