Hi Andy,
Thanks for the response. I took your code and added in a Feature layer with a simple line renderer and that does not cross the international dateline. Are we doing something wrong with constructing the graphics for the feature layer? Here is an image (Graphics layer is Orange, Feature Layer is Blue):
![](/legacyfs/online/454178_pastedImage_1.png)
Here is the code:
<!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/light/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",
"esri/geometry/Polyline",
"esri/geometry/support/geodesicUtils",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleLineSymbol"],
(
Map,
MapView,
Graphic, Polyline, geodesicUtils, FeatureLayer, SimpleLineSymbol
) => {
var map = new Map({
basemap: "hybrid"
});
var view = new MapView({
center: [-80, 35],
container: "viewDiv",
map: map,
zoom: 2
});
/****************************
* Create a polyline graphic
****************************/
// First create a line geometry (this is the Keystone pipeline)
var polyline = new Polyline({
// paths: [[138, 36], [-98, 49.5], [-118, 34], [-155.5828, //19.8968], [138, 36]]
paths: [[-157.945774, 21.339723],
[167.726017, 8.719545]]
});
// Create a symbol for drawing the line
var lineSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [226, 119, 40],
width: 4
};
let g1 = null;
let geom = geodesicUtils.geodesicDensify(polyline, 100000);
g1 = new Graphic({
geometry: geom,
symbol: lineSymbol
})
view.graphics.addMany([g1]);
var CircuitInfo = [];
CircuitInfo.push({
Name: "Hickam AFB to/from Kwajalein Atoll, RMI",
Site1: "Hickam AFB",
lat: 21.339723,
lng: -157.945774,
Site2: "Kwajalein Atoll, RMI",
Site2Lat: 8.719545,
Site2Long: 167.726017,
SiteType: "COI"
});
var circuitGraphics = CircuitInfo.map((item, i) => new Graphic({
geometry:
geodesicUtils.geodesicDensify(new Polyline({
paths: [
[item.lng, item.lat],
[item.Site2Long, item.Site2Lat]
]
}), 100000),
attributes: {
ObjectID: i++,
Name: item.Name,
Description: item.Description,
SiteType: item.SiteType
}
}));
const fields = [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},
{
name: "Name",
alias: "Name",
type: "string"
},
{
name: "SiteType",
alias: "Location Type",
type: "string"
}
];
var lineRenderer = {
type: "simple",
symbol: new SimpleLineSymbol({
color: "blue",
width: 10
})
};
var eventCircuitslayer = new FeatureLayer({
source: circuitGraphics, // autocast as an array of esri/Graphic
objectIdField: "ObjectID", // This must be defined when creating a layer from Graphics
fields: fields,
renderer: lineRenderer,
title: "Wrap Problem",
//spatialReference: { wkid: 3857 }
});
map.add(eventCircuitslayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Thanks for your help so far.
~Alan