Simple example to add a polygon to a map?

3237
3
Jump to solution
12-07-2015 12:50 PM
JimSirianni
New Contributor

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:

<script>

        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.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>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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>

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus

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>
JimSirianni
New Contributor

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

0 Kudos
williamcarr
Occasional Contributor II

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

0 Kudos