topic Re: how to add a polygon with array of coordinates in javascript in ArcGIS JavaScript Maps SDK Questions

how to add a polygon with array of coordinates in javascript

purnimamishra — Wed, 12 Apr 2017 08:39:13 GMT

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

Re: how to add a polygon with array of coordinates in javascript

FC_Basson — Wed, 12 Apr 2017 09:25:00 GMT

API Version?

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

Re: how to add a polygon with array of coordinates in javascript

FC_Basson — Sun, 12 Dec 2021 06:47:36 GMT

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))‍‍‍‍‍‍‍‍‍

Re: how to add a polygon with array of coordinates in javascript

purnimamishra — Thu, 13 Apr 2017 08:45:53 GMT

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

Re: how to add a polygon with array of coordinates in javascript

purnimamishra — Thu, 13 Apr 2017 08:49:29 GMT

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

Re: how to add a polygon with array of coordinates in javascript

FC_Basson — Thu, 13 Apr 2017 08:50:23 GMT

Please post this as a new question

Re: how to add a polygon with array of coordinates in javascript

FC_Basson — Thu, 13 Apr 2017 08:57:12 GMT

See this post: https://community.esri.com/message/667273-re-how-can-i-attach-mouse-over-to-graphiclayer-in-arcgis-api-for-javascrip42?comm…

Re: how to add a polygon with array of coordinates in javascript

ChrisCatania — Thu, 13 Apr 2017 21:50:20 GMT

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.

Re: how to add a polygon with array of coordinates in javascript

SeanOlson1 — Mon, 18 Sep 2017 16:25:44 GMT

Would love to see a 4.x example