Dear team,
The below coordinates do not work for fill symbol. The fill color is not coming. Please provide support.
[51.50685501097203, 25.308767846478304],
[51.497327804536326, 25.306129675695274],
[51.49526786801695, 25.300775564312445],
[51.49908733365672, 25.296274823945666],
[51.50848579403868, 25.29557641823031],
[51.51376438138189, 25.30069796675457],
[51.513163566565964, 25.30671163006852],
[51.50685501097203, 25.308767846478304]
Example -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Intro to graphics - 4.12</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/dark/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require(["esri/Map", "esri/views/MapView", "esri/Graphic"], function(
Map,
MapView,
Graphic
) {
var map = new Map({
basemap: "hybrid"
});
var view = new MapView({
center: [-80, 35],
container: "viewDiv",
map: map,
zoom: 3
});
/*************************
* Create a point graphic
*************************/
// First create a point geometry (this is the location of the Titanic)
var point = {
type: "point", // autocasts as new Point()
longitude: -49.97,
latitude: 41.73
};
// Create a symbol for drawing the point
var markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2
}
};
// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
/****************************
* Create a polyline graphic
****************************/
// First create a line geometry (this is the Keystone pipeline)
var polyline = {
type: "polyline", // autocasts as new Polyline()
paths: [[-111.3, 52.68], [-98, 49.5], [-93.94, 29.89]]
};
// Create a symbol for drawing the line
var lineSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [226, 119, 40],
width: 4
};
// Create an object for storing attributes related to the line
var lineAtt = {
Name: "Keystone Pipeline",
Owner: "TransCanada",
Length: "3,456 km"
};
/*******************************************
* Create a new graphic and add the geometry,
* symbol, and attributes to it. You may also
* add a simple PopupTemplate to the graphic.
* This allows users to view the graphic's
* attributes when it is clicked.
******************************************/
var polylineGraphic = new Graphic({
geometry: polyline,
symbol: lineSymbol,
attributes: lineAtt,
popupTemplate: {
// autocasts as new PopupTemplate()
title: "{Name}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "Name"
},
{
fieldName: "Owner"
},
{
fieldName: "Length"
}
]
}
]
}
});
/***************************
* Create a polygon graphic
***************************/
// Create a polygon geometry
var polygon = {
type: "polygon", // autocasts as new Polygon()
rings: [
[51.50685501097203, 25.308767846478304],
[51.497327804536326, 25.306129675695274],
[51.49526786801695, 25.300775564312445],
[51.49908733365672, 25.296274823945666],
[51.50848579403868, 25.29557641823031],
[51.51376438138189, 25.30069796675457],
[51.513163566565964, 25.30671163006852],
[51.50685501097203, 25.308767846478304]
]
};
// Create a symbol for rendering the graphic
var fillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [227, 139, 79, 0.8],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
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([pointGraphic, polylineGraphic, polygonGraphic]);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
