nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Polyline not crossing the international dateline

AlanFlythe

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.

Find more posts tagged with

Accepted answers

AndyGup

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

All comments

AlanFlythe

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

AndyGup

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?

AlanFlythe

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>

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>

Thanks for your help so far.

~Alan

AndyGup

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

MatthewDriscoll

This thread might be of some help. https://community.esri.com/thread/230605-how-do-i-remove-the-180th-meridian-line-on-my-map-of-russia

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.