topic Re: Simple example to add a polygon to a map? in ArcGIS JavaScript Maps SDK Questions

Simple example to add a polygon to a map?

JimSirianni — Mon, 07 Dec 2015 20:50:47 GMT

Is there a simple example on how to add a polygon to a map? (Web API)

I'm trying to add a polygon to a map and fill it in.

Currently I have:

var map;

require([

"esri/map",

"esri/geometry/Extent",

"esri/layers/FeatureLayer",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/TextSymbol",

"esri/renderers/SimpleRenderer",

"esri/geometry/Polygon",

"esri/layers/GraphicsLayer",

"esri/layers/LabelClass",

"dojo/_base/Color",

"dojo/domReady!"

], function(Map, Extent, FeatureLayer, SimpleLineSymbol, SimpleFillSymbol,

TextSymbol, SimpleRenderer, Polygon, GraphicsLayer, LabelClass, Color) {

map = new Map("map", {

showLabels: true, //very important that this must be set to true!

basemap: "streets",

center: [-79.746933, 40.446949],

zoom: 8

});

var graphicLayer = new GraphicsLayer();

var bCounty = new Polygon(loadBCounty());

map.addLayer(graphicLayer);

graphicLayer.add(bCounty);

function loadBCounty()

{

return [[-80.395815,40.477370],

[-80.394242,40.477313],

[-80.394050,40.477306],

[-80.362057,40.477539],

[-80.164173, 40.978097],

[-80.164226, 40.979473],

[-80.164877, 40.995214],

[-80.165292, 41.000474],

[-80.161159, 41.004532],

[-80.154676, 41.010891],

[-80.137160, 41.028076],

[-80.460466, 40.477488],

[-80.448980, 40.477701],

[-80.438175, 40.477783],

[-80.395815, 40.477370]

]

}

</script>

Re: Simple example to add a polygon to a map?

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:00:27 GMT

Jim,

You are forgetting to create the graphic to add to the GraphicsLayer. You are trying to add the Polygon directly.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Shapes and Symbols</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">

  <style>
    html,
    body,
    #map{
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>

  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    var map;
    require([
          "esri/map",
          "esri/graphic",
          "esri/geometry/Extent",
          "esri/layers/FeatureLayer",
          "esri/symbols/SimpleLineSymbol",
          "esri/symbols/SimpleFillSymbol",
          "esri/symbols/TextSymbol",
          "esri/renderers/SimpleRenderer",
          "esri/geometry/Polygon",
          "esri/layers/GraphicsLayer",
          "esri/layers/LabelClass",
          "dojo/_base/Color",
          "dojo/domReady!"
        ], function (Map, Graphic, Extent, FeatureLayer, SimpleLineSymbol, SimpleFillSymbol,
          TextSymbol, SimpleRenderer, Polygon, GraphicsLayer, LabelClass, Color) {
          map = new Map("map", {
            showLabels: true, //very important that this must be set to true!
            basemap: "streets",
            center: [-79.746933, 40.446949],
            zoom: 8
          });
          var graphicLayer = new GraphicsLayer();

          var bCounty = new Polygon(loadBCounty());
          var countyGraphic = new Graphic(bCounty, new SimpleFillSymbol(), {"Name": "Beaver"});

          map.addLayer(graphicLayer);
          graphicLayer.add(countyGraphic);

          function loadBCounty() {
           return  [[-80.395815, 40.477370],
                    [-80.394242, 40.477313],
                    [-80.394242, 40.477313],
                    [-80.394050, 40.477306],
                    [-80.362057, 40.477539],
                    [-80.164173, 40.978097],
                    [-80.164226, 40.979473],
                    [-80.164877, 40.995214],
                    [-80.165292, 41.000474],
                    [-80.161159, 41.004532],
                    [-80.154676, 41.010891],
                    [-80.137160, 41.028076],
                    [-80.460466, 40.477488],
                    [-80.460466, 40.477488],
                    [-80.448980, 40.477701],
                    [-80.438175, 40.477783],
                    [-80.395815, 40.477370]];
          }
    });
  </script>
</head>

<body>
  <div id="map"></div>
</body>

</html>

Re: Simple example to add a polygon to a map?

JimSirianni — Tue, 08 Dec 2015 14:12:23 GMT

Thank you. This should help me better understand working with the API's.

Re: Simple example to add a polygon to a map?

williamcarr — Fri, 29 Apr 2016 20:10:03 GMT

Thanks Robert, this solved one of my issues as well.