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>
Solved! Go to Solution.
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>
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>
Thank you. This should help me better understand working with the API's.
Thanks Robert, this solved one of my issues as well.