Polyline not crossing the international dateline

298
7
Jump to solution
07-23-2019 06:34 AM
Highlighted
New Contributor II

I posted the original question about a WPF .NET Application not crossing the international dateline, https://community.esri.com/thread/237169-polyline-not-crossing-international-dateline. When taking that same solution, of adding or subtracting 360 based on the polyline direction, the ESRI Javascript API v4.12 still stops at the International Dateline.

WPF .NET  app (See the blue line below)

 

Using the ESRI Javascript API v4.12, the fix stops drawing the line at the International dateline.

 

I was just curious why with .NET the fix works but not with Javascript. And what is the fix for javascript?

 

Thanks for your help.

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
Esri Regular Contributor

Sorry ignore the previous jsbin and try this one: https://jsbin.com/xegicih/2/edit?html,output

View solution in original post

Reply
0 Kudos
7 Replies
Highlighted
Reply
0 Kudos
Highlighted
Esri Regular Contributor

Also take a look at this JS API 4.12 example that uses geodesicUtils.geodesicDensify() https://codepen.io/andygup/pen/QeyerP.

Reply
0 Kudos
Highlighted
New Contributor II

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

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

Reply
0 Kudos
Highlighted
Esri Regular Contributor

Hi Alan, thanks for the code. That's a bug and I've opened an issue on it. The workaround for 4.12 is to convert to webmercator and then normalize the geometries, for example: FeatureLayer across dateline. Let me know if that doesn't work?

Reply
0 Kudos
Highlighted
New Contributor II

Hey Andy,

Not sure your workaround works. Looks like the colors were flipped from the code I posted so the Feature layer is now orange and the Graphics layer is now blue. Either way, in your example the Feature Layer is still stopping at the international dateline.

Did I misinterpret the code?

Thanks,
Alan

Reply
0 Kudos
Highlighted
Esri Regular Contributor

Sorry ignore the previous jsbin and try this one: https://jsbin.com/xegicih/2/edit?html,output

View solution in original post

Reply
0 Kudos
Highlighted
New Contributor II

Thanks Andy, that one works.

Reply
0 Kudos