how to add a polygon with array of coordinates in javascript

purnimamishra · ‎04-12-2017

i want to add some polygon to my map in javascript.

i have some array of coordinates.. how to do it?? i could not add any polygon.. only marker with coordinate can be added..

please help me to add a polygon..

thanks

Purnima

FC_Basson · ‎04-12-2017

API Version?

See the 4.3 samples here: Get started with graphics | ArcGIS API for JavaScript 4.3

FC_Basson · ‎04-12-2017

For 3.20 see the Polygon constructors: Polygon | API Reference | ArcGIS API for JavaScript 3.20

Then to add it as a graphic to the map:

var polygonJson = {"rings":[[[2.43,53.432],[3.2342, 54.234],[2.84, 54.01],[2.5401, 53.64]]],"spatialReference":{"wkid":4326 }};
var poly = new Polygon(polygonJson);
var fs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
 new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
 new Color([255,0,0]), 2),
 new Color([255,255,0,0.6])
 ); 
map.graphics.add(new Graphic(poly, fs));‍‍‍‍‍‍‍‍
map.setExtent(poly.getExtent().expand(2))‍‍‍‍‍‍‍‍‍

purnimamishra · ‎04-13-2017

hii,

thank u so much for replying me. now i can add polygon . but can not add

any event to it.

kindly help me to add a mouse hover event to a particular polygon.

when i hover on a polygon its fill color should be changed. and show a

popup.. i am copy-paste my code here.. u can check it and kindly help me..

my code....

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">*
<meta name="viewport"

content="initial-scale=1,maximum-scale=1,user-scalable=no">*

<meta name="description" content="[Get started with graphics - 4.3]">*
<!--*
ArcGIS API for JavaScript, https://js.arcgis.com <https://js.arcgis.com>*
For more information about the get-started-graphics sample, read the

original sample description at developers.arcgis.com

<http://developers.arcgis.com>.*

*

https://developers.arcgis.com/javascript/latest/get-started-graphics/index.html

<https://developers.arcgis.com/javascript/latest/get-started-graphics/index.html>*

-->*

<title>Get started with graphics - 4.3</title>

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

<https://js.arcgis.com/4.3/esri/css/main.css>">*

<script src="https://js.arcgis.com/4.3/

<https://js.arcgis.com/4.3/>"></script>*

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

<script>*
require([*
"esri/Map",*
"esri/views/MapView",*
"esri/Graphic",*
"esri/geometry/Point",*
"esri/geometry/Polyline",*
"esri/geometry/Polygon",*
"esri/symbols/SimpleMarkerSymbol",*
"esri/symbols/SimpleLineSymbol",*
"esri/symbols/SimpleFillSymbol",*
"dojo/domReady!"*
], function(*
Map, MapView,*
Graphic, Point, Polyline, Polygon,*
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol*
) {*

var map = new Map({*
basemap: "hybrid"*
});*

var view = new MapView({*
center: ,*
container: "viewDiv",*
map: map,*
zoom: 3*
});*

/*************************
* Create a polygon graphic*
***********************/

// Create a polygon geometry*
var polygon = new Polygon({*
rings: [*
,*
,*
,[-92.21, 35.78],[-85.21, 32.78],*
*
]*
});*

// Create a symbol for rendering the graphic*
var fillSymbol = new SimpleFillSymbol({*
color: ,*
outline: { // autocasts as new SimpleLineSymbol()*
color: ,*
width: 1*
}*
});*

// Add the geometry and symbol to a new graphic*
var polygonGraphic = new Graphic({*
geometry: polygon,*
symbol: fillSymbol*
});*

// Add the graphics to the view's graphics layer*
view.graphics.addMany();*
});*
</script>*

</head>

<body>

<div id="viewDiv"></div>*

</body>

</html>

thank u

Purnima

FC_Basson · ‎04-13-2017

Please post this as a new question

purnimamishra · ‎04-13-2017

hii,

thank u so much for replying me. now i can add polygon . but can not add

any event to it.

kindly help me to add a mouse hover event to a particular polygon.

when i hover on a polygon its fill color should be changed. and show a

popup.. i am copy-paste my code here.. u can check it and kindly help me..

my code....

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">*
<meta name="viewport"

content="initial-scale=1,maximum-scale=1,user-scalable=no">*

<meta name="description" content="[Get started with graphics - 4.3]">*
<!--*
ArcGIS API for JavaScript, https://js.arcgis.com

<https://js.arcgis.com/>*

For more information about the get-started-graphics sample, read the

original sample description at developers.arcgis.com

<http://developers.arcgis.com/>.*

https://developers.arcgis.com/javascript/latest/get-started-graphics/index.html

<https://developers.arcgis.com/javascript/latest/get-started-graphics/index.html>*

-->*

<title>Get started with graphics - 4.3</title>

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

<https://js.arcgis.com/4.3/esri/css/main.css>">*

<script src="https://js.arcgis.com/4.3/

<https://js.arcgis.com/4.3/>"></script>*

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

<script>*
require([*
"esri/Map",*
"esri/views/MapView",*
"esri/Graphic",*
"esri/geometry/Point",*
"esri/geometry/Polyline",*
"esri/geometry/Polygon",*
"esri/symbols/SimpleMarkerSymbol",*
"esri/symbols/SimpleLineSymbol",*
"esri/symbols/SimpleFillSymbol",*
"dojo/domReady!"*
], function(*
Map, MapView,*
Graphic, Point, Polyline, Polygon,*
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol*
) {*

var map = new Map({*
basemap: "hybrid"*
});*

var view = new MapView({*
center: ,*
container: "viewDiv",*
map: map,*
zoom: 3*
});*

/*************************
* Create a polygon graphic*
***********************/

// Create a polygon geometry*
var polygon = new Polygon({*
rings: [*
,*
,*
,[-92.21, 35.78],[-85.21, 32.78],*
*
]*
});*

// Create a symbol for rendering the graphic*
var fillSymbol = new SimpleFillSymbol({*
color: ,*
outline: { // autocasts as new SimpleLineSymbol()*
color: ,*
width: 1*
}*
});*

// Add the geometry and symbol to a new graphic*
var polygonGraphic = new Graphic({*
geometry: polygon,*
symbol: fillSymbol*
});*

// Add the graphics to the view's graphics layer*
view.graphics.addMany();*
});*
</script>*

</head>

<body>

<div id="viewDiv"></div>*

</body>

</html>

thank u

Purnima

FC_Basson · ‎04-13-2017

See this post: https://community.esri.com/message/667273-re-how-can-i-attach-mouse-over-to-graphiclayer-in-arcgis-a...

SeanOlson1 · ‎09-18-2017

Would love to see a 4.x example

ChrisCatania · ‎04-13-2017

Hi Purnima - I wanted to let you know that we're moving your question to the ArcGIS API for JavaScript space so our Esri and user subject matter experts can further help answer your questions. In the future, and so you can get your questions answered faster, we suggest first searching for and then posting in the relevant GeoNet group instead of posting in this GeoNet Help group, which is for tips on how to use GeoNet and not the Esri platform.

Also looping in Esri SMEs on this: Kelly Hutchins‌ and Bjorn Svensson‌

Thank for contributing and I hope this helps and let us know if you have any questions.

Esri Community Strategist