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 example to add a polygon to a map?

JimSirianni

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>

Vind meer berichten getagd met

Accepted answers

RobertScheitlin__GISP

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>

All comments

williamcarr

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

JimSirianni

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

RobertScheitlin__GISP

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>

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.